Bootstrap 網格系統

本章節我們将講解 Bootstrap 的網格系統（Grid System）。

Bootstrap 提供了一套響應式、移動裝置優先的流式網格系統，随着螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。

摘自維基百科：

Bootstrap 網格系統
在平面設計中，網格是一種由一系列用于組織内容的相交的直線（垂直的、水準的）組成的結構（通常是二維的）。它廣泛應用于列印設計中的設計布局和内容結構。在網頁設計中，它是一種用于快速建立一緻的布局和有效地使用 HTML 和 CSS 的方法。

簡單地說，網頁設計中的網格用于組織内容，讓網站易于浏覽，并降低使用者端的負載。

Bootstrap 官方文檔中有關網格系統的描述：

Bootstrap 網格系統
Bootstrap 包含了一個響應式的、移動裝置優先的、不固定的網格系統，可以随着裝置或視口大小的增加而适當地擴充到 12 列。它包含了用于簡單的布局選項的預定義類，也包含了用于生成更多語義布局的功能強大的混合類。

讓我們來了解一下上面的語句。Bootstrap 3 是移動裝置優先的，在這個意義上，Bootstrap 代碼從小螢幕裝置（比如移動裝置、平闆電腦）開始，然後擴充到大螢幕裝置（比如筆記本電腦、台式電腦）上的元件和網格。

決定什麼是最重要的。

優先設計更小的寬度。

基礎的 CSS 是移動裝置優先，媒體查詢是針對于平闆電腦、台式電腦。

随着螢幕大小的增加而添加元素。

響應式網格系統随着螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。

網格系統通過一系列包含内容的行和列來建立頁面布局。下面列出了 Bootstrap 網格系統是如何工作的：

行必須放置在 <b>.container</b> class 内，以便獲得适當的對齊（alignment）和内邊距（padding）。

使用行來建立列的水準組。

内容應該放置在列内，且唯有列可以是行的直接子元素。

預定義的網格類，比如 <b>.row</b> 和 <b>.col-xs-4</b>，可用于快速建立網格布局。LESS 混合類可用于更多語義布局。

列通過内邊距（padding）來建立列内容之間的間隙。該内邊距是通過 <b>.rows</b> 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。

網格系統是通過指定您想要橫跨的十二個可用的列來建立的。例如，要建立三個相等的列，則使用三個 <b>.col-xs-4</b>。

媒體查詢是非常别緻的"有條件的 CSS 規則"。它隻适用于一些基于某些規定條件的 CSS。如果滿足那些條件，則應用相應的樣式。

Bootstrap 中的媒體查詢允許您基于視口大小移動、顯示并隐藏内容。下面的媒體查詢在 LESS 檔案中使用，用來建立 Bootstrap 網格系統中的關鍵的分界點門檻值。

我們有時候也會在媒體查詢代碼中包含 <b>max-width</b>，進而将 CSS 的影響限制在更小範圍的螢幕大小之内。

媒體查詢有兩個部分，先是一個裝置規範，然後是一個大小規則。在上面的案例中，設定了下列的規則：

讓我們來看下面這行代碼：

對于所有帶有 min-width: @screen-sm-min 的裝置，如果螢幕的寬度小于 @screen-sm-max，則會進行一些處理。

下表總結了 Bootstrap 網格系統如何跨多個裝置工作：

超小裝置手機（<768px）

小型裝置平闆電腦（≥768px）

中型裝置台式電腦（≥992px）

大型裝置台式電腦（≥1200px）

網格行為

一直是水準的

以折疊開始，斷點以上是水準的

最大容器寬度

None (auto)

750px

970px

1170px

Class 字首

列數量和

最大列寬

Auto

60px

78px

95px

間隙寬度

30px

（一個列的每邊分别 15px）

可嵌套

Yes

偏移量

列排序

下面是 Bootstrap 網格的基本結構：

讓我們來看幾個簡單的網格執行個體：

<b>執行個體：堆疊的水準</b>

<b>執行個體：中型和大型裝置</b>

以下執行個體包含了4個網格，但是我們在小裝置浏覽時無法确定網格顯示的位置。

為了解決這個問題，可以使用 <b>.clearfix</b> class和響應式實用工具來解決，如下面執行個體所示：

<div class="col-xs-6 col-sm-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>

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, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

enim ad minim veniam, quis nostrud exercitation ullamco laboris

nisi ut aliquip ex ea commodo consequat.

</p>

eiusmod tempor incididunt ut.

box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco

laboris nisi ut aliquip ex ea commodo consequat.

enim ad minim

浏覽器上調整視窗大小檢視變化，或在您手機上檢視效果。

偏移是一個用于更專業的布局的有用功能。它們可用來給列騰出更多的空間。例如，<b>.col-xs-*</b> 類不支援偏移，但是它們可以簡單地通過使用一個空的單元格來實作該效果。

為了在大螢幕顯示器上使用偏移，請使用 <b>.col-md-offset-*</b> 類。這些類會把一個列的左外邊距（margin）增加 <b>*</b> 列，其中 <b>*</b> 範圍是從 <b>1</b> 到 <b>11</b>。

在下面的執行個體中，我們有 <div class="col-md-6">..</div>，我們将使用 <b>.col-md-offset-3</b> class 來居中這個 div。

<h1>Hello, world!</h1>

<div class="col-md-6 col-md-offset-3"

<p>Lorem ipsum dolor sit amet, consectetur adipisicing

elit.

結果如下所示：

為了在内容中嵌套預設的網格，請添加一個新的 <b>.row</b>，并在一個已有的 <b>.col-md-*</b> 列内添加一組 <b>.col-md-*</b> 列。被嵌套的行應包含一組列，這組列個數不能超過12（其實，沒有要求你必須占滿12列）。

在下面的執行個體中，布局有兩個列，第二列被分為兩行四個盒子。

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<h4>第二列 - 分為四個盒子</h4>

Consectetur art party Tonx culpa semiotics. Pinterest

assumenda minim organic quis.

sed do eiusmod tempor incididunt ut labore et dolore magna

aliqua. Ut enim ad minim veniam, quis nostrud exercitation

ullamco laboris nisi ut aliquip ex ea commodo consequat.

quis nostrud exercitation ullamco laboris nisi ut

aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit,

aliqua. Ut enim ad minim.

Bootstrap 網格系統另一個完美的特性，就是您可以很容易地以一種順序編寫列，然後以另一種順序顯示列。

您可以很輕易地改變帶有 <b>.col-md-push-*</b> 和 <b>.col-md-pull-*</b> 類的内置網格列的順序，其中 <b>*</b> 範圍是從 <b>1</b> 到 <b>11</b>。

在下面的執行個體中，我們有兩列布局，左列很窄，作為側邊欄。我們将使用 <b>.col-md-push-*</b> 和 <b>.col-md-pull-*</b> 類來互換這兩列的順序。

排序前

我在左邊

我在右邊

<br>

排序後