Grid是什么？
Grid 翻譯成中文是格柵系統，不過還是不好理解，理解為一行12個格子可能更容易些。Grid可以把一行內容最多分成12個格子，而且可以根據需要來合並這12個格子中的其中某些格子。下面是一個示意圖。這樣做有什么好處呢？最大的好處就是方便排版。
舉個例子，我現在要在每一行設置三個元素，我想讓這三個元素在頁面中占據相同的寬度，也就是把頁面三等分，那么，我們就可以用 Grid 系統來處理，三個元素都設置為 span 4即可以。
Grid 的基礎用法：
四個層級：
Grid系統有四個層級，分別如下，設計的初衷是針對不同的屏幕大小，可以分類顯示。
- xs (for phones)
- sm (for tablets)
- md (for desktops)
- lg (for larger desktops)
Tip: Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs.
使用規則：
.row必須在.container(固定寬度fixed-width) 或者.container-fluid(全屏full-width) 包裹的內容中使用。（結合下方代碼示例理解）- 而且 元素應該放在columns中，而 columns(ie:
col-sm-4) 應該直接是.row直接的子集。（結合下方代碼示例理解） - columns 的總數不能超過12個，否則會顯示錯亂。
- 除了 xs 之外，其他的三個層級，到某個固定的屏幕寬度節點，多會自動換行，這個需要注意，當然這樣也能提升移動設備上的可閱讀性。
- 請注意，如果只設置了比較小的層級的的參數的話，自動套用到上一級別的屬性，比如設置了 xs 的 column的，在 sm、md 和 lg 都沒有設置的情況下，會自動套用 xs 的分欄 。如果sm、md 和 lg 另行單獨設置了，會按照設置的參數來顯示。
示例代碼：
<div class="container"> # 需要在 container 或 container-fluid 下使用 <div class="row"> #用 row 來定義一行 <div class="col-*-*"></div> #col-*-*需要直接緊跟在 row 下方。 </div> <div class="row"> #用 row 來定義另外一行 <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> ... </div> </div>
So, to create the layout you want, create a container (). Next, create a row (). Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.
Grid 的微進階用法：
1.同一個元素可以設定多個層級
比如下面這行代碼，如果是在小屏幕下，就是 3/9 比例分欄顯示；如果是在中等屏幕下，就是 6/6 比例分欄顯示；如果是在大屏幕下，就是 4/8 比例分欄顯示。
這時候你要問了，col-xs-*沒設置，如果縮小到一定程度，會怎么顯示，答案是縮小到 xs 的寬度后，每個元素都是占 1 整行。這樣做的好處就是可以針對不同的屏幕顯示最優的效果。
同理，如果只設定了col-lg-*，那么當屏幕縮小到中屏幕寬度及以下的時候，都是每個元素占1整行。
<div class="col-sm-3 col-md-6 col-lg-4">....</div> <div class="col-sm-9 col-md-6 col-lg-8">....</div>
請看下面三張圖：
- 大屏幕 4/8 比例分欄
- 中屏幕 6/6 比例分欄
- 小屏幕 3/9 比例分欄
- 最小屏幕，1個元素1行：
2.row 內部還可以嵌套row（Nestable）
下面的例子是整個屏幕分2欄，而且第1欄下面還分了2個子欄。注意在欄目下的子欄里面也是12等分的。所以，第二個row里面的兩等分用是2個col-sm-6。
<div class="row"> <div class="col-sm-8"> .col-sm-8 <div class="row"> <div class="col-sm-6">.col-sm-6</div> <div class="col-sm-6">.col-sm-6</div> </div> </div> <div class="col-sm-4">.col-sm-4</div> </div>
在對應屏幕的顯示效果如下：
如果屏幕寬度小於 sm 對應的寬度，則會顯示成這樣：先顯示第1欄，再顯示第1欄下面的子欄，最后再顯示第2欄。
我們再來嘗試改下代碼，把子欄都改為col-xs-6，這時候屏幕寬度小於 sm 對應寬度會顯示如下圖。
總結下，嵌套 row這個方法要慎重使用，因為需要思考幾層才能知道最終的顯示結果。
3、當元素高度不一致的時候，防止發生不期望的換行（Clear Floats）
方法：添加.clearfix這個屬性。請參考下面的代碼導致的不同變化:
<div class="row"> <div class="col-xs-6 col-sm-3"> Column 1 <br> Resize the browser window to see the effect. </div> <div class="col-xs-6 col-sm-3">Column 2</div> <!-- Add clearfix for only the required viewport --> <div class="clearfix visible-xs"></div> #這里增加了 clearfix 來確保Column 3和Column 4的正確換行。 <div class="col-xs-6 col-sm-3">Column 3</div> <div class="col-xs-6 col-sm-3">Column 4</div> </div>
顯示效果如下：
sm 尺寸下，分成4欄：
xs 尺寸下，分成2欄，加了 clearfix 這個屬性后，Column 3和Column 4都在Column 1的下方重新起一行，這是我們一般預期達到的效果。
假如我們不添加clearfix這個屬性，xs 尺寸下會出現這樣的情況，也就是說Column 3和Column 4看到Column 1后面還有空間，就直接縮到那里了。這一般不是我們期望的方式，所以要注意。注意，這些都是因為元素的高度不一致，如果元素高度一致，那么就不需要這樣的設定了。
4.縮進
.col-*-offset-* 的作用相當於縮進。就是往后退幾格的意思。我們來看個例子：
<div class="row" style=""> <div class="col-sm-5 " style="">.col-sm-5</div> <div class="col-sm-5 col-sm-offset-2 " style="">.col-sm-5 .col-sm-offset-2 </div> </div>
在 sm 寬度及以上的時候，由於設置了第2欄往后縮進2格，所以會顯示如下：2欄分別占5格，欄目之間的空白為2格。
sm 寬度以下的時候，會顯示成這樣，也就是說退格不起作用了。
5.push and pull 可以重新調整元素的位置(Change Column Ordering)
這個詳見后面的參考資料，目前還有點暈，暫時留個尾巴在這。