Bootstrap系列 -- 10. 網格佈局

賀臣發表於2015-06-24
boot

 

一. 實現原理

　　網格佈局是通過容器的大小，平均分為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>
巢狀

 

相關文章