柵格設計系統，是一種平面設計的方法與風格。運用固定的格子設計版面佈局，其風格工整簡潔。
柵格系統的設計原理
Bootstrap 網格系統
Bootstrap 包含了一個響應式的、移動設備優先的、不固定的網格系統，可以隨着設備或視口大小的增加而適當地擴展到 12 列。它包含了用於簡單的佈局選項的預定義類，也包含了用於生成更多語義佈局的功能強大的混合類。
Bootstrap 3 是移動設備優先的，在這個意義上，Bootstrap 代碼從小屏幕設備（比如移動設備、平板電腦）開始，然後擴展到大屏幕設備（比如筆記本電腦、臺式電腦）上的組件和網格。
移動設備優先策略
內容：決定什麼是最重要的。
佈局：優先設計更小的寬度。基礎的 CSS 是移動設備優先，媒體查詢是針對於平板電腦、臺式電腦。
漸進增強：隨着屏幕大小的增加而添加元素。
響應式網格系統隨着屏幕或視口（viewport）尺寸的增加，系統會自動分爲最多12列。
工作原理
(row（.row）必須位於container的內部，column（如.col-md-6）必須位於row的內部。如果要嵌套使用柵格，正確的做法是在column內直接續接row，然後再繼續接column，而不再需要container)
行必須放置在 .container class 內，以便獲得適當的對齊（alignment）和內邊距（padding）。
使用行來創建列的水平組。
內容應該放置在列內，且唯有列可以是行的直接子元素。
預定義的網格類，比如 .row 和 .col-xs-4，可用於快速創建網格佈局。LESS 混合類可用於更多語義佈局。
列通過內邊距（padding）來創建列內容之間的間隙。該內邊距是通過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。
網格系統是通過指定您想要橫跨的十二個可用的列來創建的。例如，要創建三個相等的列，則使用三個 .col-xs-4。
媒體查詢
/* 超小設備（手機，小於 768px） */
/* Bootstrap 中默認情況下沒有媒體查詢 */
/* 小型設備（平板電腦，768px 起） */
@media (min-width: @screen-sm-min) { ... }
/* 中型設備（臺式電腦，992px 起） */
@media (min-width: @screen-md-min) { ... }
/* 大型設備（大臺式電腦，1200px 起） */
@media (min-width: @screen-lg-min) { ... }
我們有時候也會在媒體查詢代碼中包含 max-width，從而將 CSS 的影響限制在更小範圍的屏幕大小之內。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }網格選項
| 超小設備手機（<768px） | 小型設備平板電腦（≥768px） | 中型設備臺式電腦（≥992px） | 大型設備臺式電腦（≥1200px） | |
|---|---|---|---|---|
| 網格行爲 | 一直是水平的 | 以摺疊開始，斷點以上是水平的 | 以摺疊開始，斷點以上是水平的 | 以摺疊開始，斷點以上是水平的 |
| 最大容器寬度 | None (auto) | 750px | 970px | 1170px |
| Class 前綴 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列數量和 | 12 | 12 | 12 | 12 |
| 最大列寬 | Auto | 60px | 78px | 95px |
| 間隙寬度 |
30px （一個列的每邊分別 15px） |
30px （一個列的每邊分別 15px） |
30px （一個列的每邊分別 15px） |
30px （一個列的每邊分別 15px） |
| 可嵌套 | Yes | Yes | Yes | Yes |
| 偏移量 | Yes | Yes | Yes | Yes |
| 列排序 | Yes | Yes | Yes | Yes |
基本的網格結構
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....讓我們來看幾個簡單的網格實例：
實例：堆疊的水平
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-6" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
</div>
<div class="col-md-6" style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
</div>
</div>實例：中型和大型設備
現在 Bootstrap 在中型設備中，會查找帶有 md 的類，並使用它們。在大型設備中，會查找帶有 lg 的類，並使用它們。
Bootstrap柵格的column對應的類名形如.col-xx-y。y是數字，表示該元素的寬度佔據12列中的多少列。而xx只有特定的幾個值可供選擇，分別是xs、sm、md、lg，它們就是斷點類型。
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
</div>
<div class="col-md-6 col-lg-8" style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
</div>
</div>實例：手機、平板電腦、臺式電腦
在手機上，它將是左邊 25% 右邊 75% 的佈局。在平板電腦上，它將是 50%/50% 的佈局。在大型視口的設備上，它將是 33%/66% 的佈局。
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-8" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
</div>
<div class="col-sm-9 col-md-6 col-lg-4" style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
</div>
</div>響應式的列重置
以下實例包含了4個網格，但是我們在小設備瀏覽時無法確定網格顯示的位置。
爲了解決這個問題，使用 可以使用 .clearfix class和 響應式實用工具來解決
<div class="container">
<div class="row" >
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
</div>
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;
box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
</div>
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
</div>
</div>
</div>偏移列
爲了在大屏幕顯示器上使用偏移，請使用 .col-md-offset-* 類。這些類會把一個列的左外邊距（margin）增加 * 列，其中 * 範圍是從 1 到 11。
<div class="container">
<h1>Hello, world!</h1>
<div class="row" >
<div class="col-xs-6 col-md-offset-3"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit.
</p>
</div>
</div>
</div>
嵌套列
爲了在內容中嵌套默認的網格，請添加一個新的 .row，並在一個已有的 .col-md-* 列內添加一組 .col-md-* 列。被嵌套的行應包含一組列，這組列個數不能超過12（其實，沒有要求你必須佔滿12列）。
<div class="container">
<div class="row">
<div class="col-md-3" style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>第一列</h4>
</div>
<div class="col-md-9" style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>第二列 - 分爲四個盒子</h4>
<div class="row">
<div class="col-md-6" style="background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
</div>
<div class="col-md-6" style="background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
</div>
<div class="col-md-6" style="background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
</div>
</div>
</div>
</div>
</div>列排序
使用 .col-md-push-* 和 .col-md-pull-* 類來互換這兩列的順序
<div class="container">
<div class="row">
<p>排序前</p>
<div class="col-md-4" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我在左邊
</div>
<div class="col-md-8" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我在右邊
</div>
</div><br>
<div class="row">
<p>排序後</p>
<div class="col-md-4 col-md-push-8"
style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444,
inset -1px 1px 1px #444;">
我在左邊
</div>
<div class="col-md-8 col-md-pull-4"
style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444,
inset -1px 1px 1px #444;">
我在右邊
</div>
</div>
</div>