Bootstrap系列 -- 10. 網格布局

 

一. 實現原理

　　網格布局是通過容器的大小，平均分為12份(可以修改),再調整內外邊距,和表格布局有點類似但是也存在區別。

　　實現步驟如下:

　　(1) 數據行.row 必須包含在容器.container 中, 以便賦予核實的對齊方式和內間距設置

<div class="container">
        <div class="row"></div>
</div>

　　(2) 在行(.row)中可以添加列(.column)，但列數之和不能超過平分的總列數，比如12

<div class="container">
        <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-8"></div>
        </div>
</div>

　　(3) 具體內容應當放置在列容器（column）之內，而且只有列（column）才可以作為行容器(.row)的直接子元素

　　(4) 通過設置內距（padding）從而創建列與列之間的間距。然后通過為第一列和最后一列設置負值的外距（margin）來抵消內距(padding)的影響

 

二. 基本用法

<div class="container">
        <div class="row">
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-8">col-md-8</div>
        </div>

        <div class="row">
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-9">col-md-9</div>
        </div>
</div>

　　以上代碼中定義了兩行, 其中第一行比例為4:8，第二行比例為3:9，運行頁面效果如下圖

 

三. 參數介紹

　　通過下表可以詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工作的。

	超小屏幕 手機 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面顯示器 (≥992px)	大屏幕 大桌面顯示器 (≥1200px)
柵格系統行為	總是水平排列	開始是堆疊在一起的，當大於這些閾值時將變為水平排列C
.container 最大寬度	None （自動）	750px	970px	1170px
類前綴	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）數	12
最大列（column）寬	自動	~62px	~81px	~97px
槽（gutter）寬	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

 

四. 偏移量

　　有的時候，我們不希望相鄰的兩個列緊靠在一起，但又不想使用margin或者其他的技術手段來。這個時候就可以使用列偏移（offset）功能來實現。使用列偏移也非常簡單，只需要在列元素上添加類名“col-md-offset-*”(其中星號代表要偏移的列組合數)，那么具有這個類名的列就會向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示該列向右移動4個列的寬度。

<div class="container">
        <h4>列向右移動四列的間距</h4>
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-2 col-md-offset-4">列向右移動四列的間距</div>
            <div class="col-md-2">.col-md-3</div>
        </div>
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">列向右移動四列的間距</div>
        </div>
    </div>
    <br /><br />
    
    <div class="container">
        <h4>發生行斷裂</h4>
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-2 col-md-offset-4">列向右移動四列的間距</div>
            <div class="col-md-2">.col-md-3</div>
        </div>
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">列向右移動四列的間距</div>
        </div>
        <div class="row">
            <div class="col-md-3">.col-md-3</div>
            <div class="col-md-3 col-md-offset-3">col-md-offset-3</div>
            <div class="col-md-4">col-md-4</div>
        </div>
    </div>
    <br /><br />
    <div class="container">
        <div class="row">
            <div class="col-sm-2">col-sm-2</div>
            <div class="col-sm-2 col-sm-offset-2">col-sm-2</div>
            <div class="col-sm-2">col-sm-2</div>
            <div class="col-sm-3 col-sm-offset-1">col-sm-2</div>
        </div>
    </div>

運行頁面效果圖如下:

 

五. 列排序

　　列排序其實就是改變列的方向，就是改變左右浮動，並且設置浮動的距離。在Bootstrap框架的網格系統中是通過添加類名“col-md-push-*”和“col-md-pull-*” (其中星號代表移動的列組合數)

 

六. 嵌套

　　Bootstrap框架的網格系統還支持列的嵌套。你可以在一個列中添加一個或者多個行（row）容器，然后在這個行容器中插入列（像前面介紹的一樣使用列）。但在列容器中的行容器（row），寬度為100%時，就是當前外部列的寬度

<div class="container">
        <div class="row">
            <div class="col-md-8">
                我的里面嵌套了一個網格
     
                <div class="row">
                    <div class="col-md-6">col-md-6</div>
                    <div class="col-md-6">col-md-6</div>
                </div>
            </div>
            <div class="col-md-4">col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-8">
                我的里面嵌套了一個網格
     
                <div class="row">
                    <div class="col-md-4">col-md-4</div>
                    <div class="col-md-4">col-md-4</div>
                    <div class="col-md-4">col-md-4</div>
                </div>
            </div>
        </div>
    </div>