Bootstrap網格/柵格系統（行row與列column）

在柵格系統中，我們在 Less 文件中使用以下媒體查詢（media query）來創建關鍵的分界點閾值。

 超小屏幕（手機，小於 768px） 

 沒有任何媒體查詢相關的代碼，因為這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優先的嗎？）

//小屏幕（平板，大於等於 768px） 

@media (min-width: @screen-sm-min) { ... }

 //中等屏幕（桌面顯示器，大於等於 992px） 

@media (min-width: @screen-md-min) { ... }

 //大屏幕（大桌面顯示器，大於等於 1200px）

 @media (min-width: @screen-lg-min) { ... }

1.  Row必須包含在樣式為.container或.container-fluid的容器中,其中.container-fluid寬度為100%，column必須包含在row內，而其它標簽元素只有在column中。      

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

2.  列column默認情況分為1－12列，列與列之間的間距可能padding 與margin的屬性來調節。

col-lg-1    col-lg-12

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

3.  列表示：

col-xs-# (<768px屏幕)  col-sm-# (>768px屏幕)  col-md-# (>992px屏幕)  col-lg- #(>1200px屏幕)  后面的#表示每一行占用的列數1-12之間，超出自動換行。

4.  列偏移：

col-xs(xm,md,lg)-offset-#  #表示偏移的列數12內。后面的內容會同樣跟隨偏移，超過了12列另起一行。

col-lg-offset-1   col-lg-offset-6

5. 列排序：

col-xs(xm,md,lg)-push-# 向右浮動   col-xs(xm,md,lg)-pull-# 向左浮動 原位置有內容會重疊在一起。

 col-lg-push-2    col-lg-pull-2

列嵌套：

列中可繼續嵌套行。