Bootstrap基礎：柵格化系統

柵格系統的原理非常簡單，僅僅是通過定義容器大小，平分12份，在調整內外邊距，最后再結合媒體查詢，就制作出了強大的響應式的柵格系統。

基本用法

1.列組合

<div class="container">
        <div class="row">
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
        </div>
        <div class="row">
            <div class="col-md-8">col-md-8</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-4">col-md-4</div>
            <div class="col-md-4">col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-6">col-md-6</div>
            <div class="col-md-6">col-md-6</div>
        </div>
    </div>

 

 

 

 2.列偏移 用到的是.col-md-offset-*就可以偏移了  默認的是做左對齊的

<div class="container">
        <div class="row">
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4 col-md-offset-4">col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-3 col-md-offset-3">col-md-3</div>
            <div class="col-md-3 col-md-offset-3">col-md-3</div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">col-md-3</div>
        </div>
    </div>

 

 

3.列嵌套：在一個列里面在聲明一個或者多個行（row），但是注意，內部嵌套的row的寬度為100%時，就說當前外部列的寬度。

如：

<div class="container">
        <div class="row">
            <div class="col-md-9">LEVEL1:col-md-9
                <div class="row">
                    <div class="col-md-6">LEVEL2:col-md-6</div>
                    <div class="col-md-6">LEVEL2:col-md-6</div>
                </div>
            </div>

            <div class="col-md-3">LEVEL1:col-md-3</div>
        </div>        
    </div>

 

4.列排序：列排序其實可以改變列的方向，也就是給編左右浮動，並且設置浮動的距離，通過.col-md-pull-*和.col-md-push來實現的。

如：

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

 

 

響應式布局

響應式柵格尺寸標准   超小(xs)屏幕設備手機（<768px）    小屏幕（sm）設備平板（>=768px）    中等屏幕（md）設備平板（>=992px）  大屏幕（lg）設備桌面（>=1200px）

1.跨設備組合定義

<div class="container">
        <div class="row">
            <div class="col-sm-12  col-md-8 ">.col-sm-12  .col-md-8 </div>
            <div class="col-sm-6  col-md-4 ">.col-sm-6  .col-md-4 </div>
        </div>
        <div class="row">
            <div class="col-sm-6  col-md-4 ">.col-sm-6  .col-md-4 </div>
            <div class="col-sm-6  col-md-4 ">.col-sm-6  .col-md-4</div>
            <div class="col-sm-6  col-md-4 ">.col-sm-6  .col-md-4</div>
        </div>
        <div class="row">
            <div class="col-sm-6">.col-sm-6</div>
            <div class="col-sm-6">.col-sm-6</div>
        </div>
</div>

小屏幕運行效果：

中型屏幕運行效果:

 

2.清除浮動問題（clearfix visible-xs）

下圖這種問題就是沒有清楚浮動導致的，改正代碼如下：

<div class="row">
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-6多添加內容，都添加內容</div>
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-6</div>
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-6</div>
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-6</div>
</div>