摘自維基百科：
在平面設計中，網格是一種由一系列用于組織内容的相交的直線（垂直的、水準的）組成的結構（通常是二維的）。它廣泛應用于列印設計中的設計布局和内容結構。在網頁設計中，它是一種用于快速建立一緻的布局和有效地使用 HTML 和 CSS 的方法。
Bootstrap<基礎二> 網格系統Bootstrap 提供了一套響應式、移動裝置優先的流式網格系統，随着螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。
簡單地說，網頁設計中的網格用于組織内容，讓網站易于浏覽，并降低使用者端的負載。
Bootstrap 官方文檔中有關網格系統的描述：
Bootstrap 包含了一個響應式的、移動裝置優先的、不固定的網格系統，可以随着裝置或視口大小的增加而适當地擴充到 12 列。它包含了用于簡單的布局選項的預定義類，也包含了用于生成更多語義布局的功能強大的混合類。Bootstrap<基礎二> 網格系統Bootstrap 提供了一套響應式、移動裝置優先的流式網格系統，随着螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。
讓我們來了解一下上面的語句。Bootstrap 3 是移動裝置優先的，在這個意義上，Bootstrap 代碼從小螢幕裝置（比如移動裝置、平闆電腦）開始，然後擴充到大螢幕裝置（比如筆記本電腦、台式電腦）上的元件和網格。
内容
決定什麼是最重要的。
布局
優先設計更小的寬度。
基礎的 CSS 是移動裝置優先，媒體查詢是針對于平闆電腦、台式電腦。
漸進增強
随着螢幕大小的增加而添加元素。
相應式的網格系統随着螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。
1
4
8
6
12
網格系統通過一系列包含内容的行和列來建立頁面布局。下面列出了 Bootstrap 網格系統是如何工作的：
行必須放置在 .container class 内，以便獲得适當的對齊（alignment）和内邊距（padding）。
使用行來建立列的水準組。
内容應該放置在列内，且唯有列可以是行的直接子元素。
預定義的網格類，比如 .row 和 .col-xs-4，可用于快速建立網格布局。LESS 混合類可用于更多語義布局。
列通過内邊距（padding）來建立列内容之間的間隙。該内邊距是通過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。
網格系統是通過指定您想要橫跨的十二個可用的列來建立的。例如，要建立三個相等的列，則使用三個 .col-xs-4。
媒體查詢是非常别緻的"有條件的 CSS 規則"。它隻适用于一些基于某些規定條件的 CSS。如果滿足那些條件，則應用相應的樣式。
Bootstrap 中的媒體查詢允許您基于視口大小移動、顯示并隐藏内容。下面的媒體查詢在 LESS 檔案中使用，用來建立 Bootstrap 網格系統中的關鍵的分界點門檻值。
我們有時候也會在媒體查詢代碼中包含 max-width，進而将 CSS 的影響限制在更小範圍的螢幕大小之内。
媒體查詢有兩個部分，先是一個裝置規範，然後是一個大小規則。在上面的案例中，設定了下列的規則：
讓我們來看下面這行代碼：
對于所有帶有 min-width: @screen-sm-min 的裝置，如果螢幕的寬度小于 @screen-sm-max，則會進行一些處理。
下表總結了 Bootstrap 網格系統如何跨多個裝置工作：
超小裝置手機（<768px）
小型裝置平闆電腦（≥768px）
中型裝置台式電腦（≥992px）
大型裝置台式電腦（≥1200px）
網格行為
一直是水準的
以折疊開始，斷點以上是水準的
最大容器寬度
None (auto)
750px
970px
1170px
Class 字首
.col-xs-
.col-sm-
.col-md-
.col-lg-
列 #
最大列寬
Auto
60px
78px
95px
間隙寬度
30px
（一個列的每邊分别 15px）
可嵌套
Yes
偏移量
列排序
下面是 Bootstrap 網格的基本結構：
以下執行個體包含了4個網格，但是我們在小裝置浏覽時無法确定網格顯示的位置。
浏覽器上調整視窗大小檢視變化，或在您手機上檢視效果。
偏移是一個用于更專業的布局的有用功能。它們可用來給列騰出更多的空間。例如，.col-xs=* 類不支援偏移，但是它們可以簡單地通過使用一個空的單元格來實作該效果。
為了在大螢幕顯示器上使用偏移，請使用 .col-md-offset-* 類。這些類會把一個列的左外邊距（margin）增加 * 列，其中 * 範圍是從 1到 11。
在下面的執行個體中，我們有 <div class="col-md-6">..</div>，我們将使用 .col-md-offset-3 class 來居中這個 div。
結果如下所示：
為了在内容中嵌套預設的網格，請添加一個新的 .row，并在一個已有的 .col-md-* 列内添加一組 .col-md-* 列。被嵌套的行應包含一組列，這組列個數不能超過12（其實，沒有要求你必須占滿12列）。
在下面的執行個體中，布局有兩個列，第二列被分為兩行四個盒子。
Bootstrap 網格系統另一個完美的特性，就是您可以很容易地以一種順序編寫列，然後以另一種順序顯示列。
您可以很輕易地改變帶有 .col-md-push-* 和 .col-md-pull-* 類的内置網格列的順序，其中 * 範圍是從 1 到 11。
在下面的執行個體中，我們有兩列布局，左列很窄，作為側邊欄。我們将使用 .col-md-push-* 和 .col-md-pull-* 類來互換這兩列的順序。
系列文章：
<a href="http://www.cnblogs.com/lansy/p/4334611.html%20" target="_blank">Bootstrap <基礎一> css 概覽</a>
<a href="http://www.cnblogs.com/lansy/p/4337381.html%20" target="_blank">Bootstrap<基礎二>網絡系統</a>
<a href="http://www.cnblogs.com/lansy/p/4339002.html%20" target="_blank">Bootstrap<基礎三>排版</a>
<a href="http://www.cnblogs.com/lansy/p/4341498.html%20" target="_blank">Bootstrap<基礎四> 代碼</a>
<a href="http://www.cnblogs.com/lansy/p/4343823.html%20" target="_blank">Bootstrap <基礎五>表格</a>
<a href="http://www.cnblogs.com/lansy/p/4346492.html">Bootstrap<基礎六> 表單</a>
<a href="http://www.cnblogs.com/lansy/p/4355913.html%20" target="_blank">Bootstrap <基礎七>按鈕</a>
<a href="http://www.cnblogs.com/lansy/p/4380536.html%20" target="_blank">Bootstrap <基礎八>圖檔</a>
<a href="http://www.cnblogs.com/lansy/p/4395706.html" target="_blank">Bootstrap<基礎九>輔助類</a>
<a href="http://www.cnblogs.com/lansy/p/4397409.html%20" target="_blank">Bootstrap<基礎十> 響應式實用工具</a>
<a href="http://www.cnblogs.com/lansy/p/4401476.html%20" target="_blank">Bootstrap<基礎十一>字型圖示(Glyphicons)</a>
<a href="http://www.cnblogs.com/lansy/p/4408654.html%20" target="_blank">Bootstrap <基礎十二>下拉菜單（Dropdowns）</a>
<a href="http://www.cnblogs.com/lansy/p/4413528.html%20" target="_blank">Bootstrap<基礎十三> 按鈕組</a>
<a href="http://www.cnblogs.com/lansy/p/4423945.html%20" target="_blank">Bootstrap<基礎十四> 按鈕下拉菜單</a>
<a href="http://www.cnblogs.com/lansy/p/4427558.html%20" target="_blank">Bootstrap<基礎十五> 輸入框組</a>
<a href="http://www.cnblogs.com/lansy/p/4430985.html%20" target="_blank">Bootstrap<基礎十六> 導航元素</a>
<a href="http://www.cnblogs.com/lansy/p/4433938.html%20" target="_blank">Bootstrap<基礎十七>導航欄</a>
<a href="http://www.cnblogs.com/lansy/p/4440639.html%20" target="_blank">Bootstrap <基礎十八>面包屑導航（Breadcrumbs）</a>
<a href="http://www.cnblogs.com/lansy/p/4440639.html%20" target="_blank">Bootstrap <基礎十九>分頁</a>
<a href="http://www.cnblogs.com/lansy/p/4446365.html%20" target="_blank">Bootstrap<基礎二十> 标簽</a>
<a href="http://www.cnblogs.com/lansy/p/4449345.html%20" target="_blank">Bootstrap <基礎二十一>徽章（Badges）</a>
<a href="http://www.cnblogs.com/lansy/p/4452409.html%20" target="_blank">Bootstrap <基礎二十二>超大螢幕（Jumbotron）</a>
<a href="http://www.cnblogs.com/lansy/p/4458972.html%20" target="_blank">Bootstrap <基礎二十三>頁面标題（Page Header）</a>
<a href="http://www.cnblogs.com/lansy/p/4462048.html%20" target="_blank">Bootstrap<基礎二十四> 縮略圖</a>
<a href="http://www.cnblogs.com/lansy/p/4475377.html%20" target="_blank">Bootstrap <基礎二十五>警告（Alerts）</a>
<a href="http://www.cnblogs.com/lansy/p/4478334.html%20" target="_blank">Bootstrap <基礎二十六>進度條</a>