比較重點的部分：
http://v3.bootcss.com/css/#grid

1. Bootstrap 是移動設備優先的

2. .container類用于固定寬度并支持響應式布局的容器；
   .container-fluid類用于100%寬度，占據全部視圖的容器

3. Bootstrap 柵格系統的工作原理：
   通過為“列（column）”設置 padding 屬性，從而創建列與列之間的間隔（gutter）。通過為 .row 元素設置負值 margin 從而抵消掉為 .container 元素設置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。

4. 柵格參數：
   超小屏幕 手機 (<768px)
   小屏幕 平板 (≥768px)
   中等屏幕 桌面顯示器 (≥992px)
   大屏幕 大桌面顯示器 (≥1200px)

5. 實例：流式布局容器
   將最外面的布局元素 .container 修改為 .container-fluid，就可以將固定寬度的柵格布局轉換為 100% 寬度的布局。

6. 實例：從堆疊到水平排列（中等屏幕）
   使用單一的一組 .col-md-* 柵格類，就可以創建一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一起的（超小屏幕到小屏幕這一范圍），在桌面（中等）屏幕設備上變為水平排列。所有“列（column）必須放在 ” .row 內。

<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<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>

7. 實例：移動設備xs和桌面屏幕md
   是否不希望在小屏幕設備上所有列都堆疊在一起？那就使用針對超小屏幕和中等屏幕設備所定義的類吧，即 .col-xs-* 和 .col-md-*。

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

<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>

8.實例：手機xs、平板ms、桌面md
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

9.響應式列重置
即便有上面給出的四組柵格class，你也不免會碰到一些問題，例如，在某些閾值時，某些列可能會出現比別的列高的情況。為了克服這一問題，建議聯合使用 .clearfix和 響應式工具類。

10. 具體布局

    1. container類
       定義一個固定寬度且居中的版心
       container是具備響應式的能力
       四個檔位 1170 970 750 100%

    2. row類
       row類代表一行，一般都是與container類一起結合使用。
       并且在柵欄系統中，所有“列（column）必須放在 ” .row 內;

    3. 柵格系統
       所有“列（column）必須放在 ” .row 內; 并且.row一般放在.container內；
       Bootstrap中的柵格系統就是將一行劃分為12列
       我們通過col--的類名控制某個元素在某種屏幕的情況下展示幾列
       col-md-6 在中等屏幕下 占1/2
       col-xs-12 在超小屏幕下 占全部

    4. col--類
       在某種屏幕尺寸下控制列的占比
       col-xs-[列數]：在超小屏幕下展示幾份
       col-sm-[列數]：在小屏幕下展示幾份
       col-md-[列數]：在中等屏幕下展示幾份
       col-lg-[列數]：在大屏幕下展示幾份
       xs : 超小屏幕 手機 (<768px)
       sm : 小屏幕 平板 (≥768px)
       md : 中等屏幕 桌面顯示器 (≥992px)
       lg : 大屏幕 大桌面顯示器 (≥1200px)