1、柵格系統(tǒng)

Bootstrap 提供了一套響應式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。它包含了易于使用的預定義類，還有強大的mixin 用于生成更具語義的布局。

2、簡介

柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中。下面就介紹一下 Bootstrap 柵格系統(tǒng)的工作原理：

• “行（row）”必須包含在?.container?（固定寬度）或?.container-fluid?（100% 寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)補（padding）。

• 通過“行（row）”在水平方向創(chuàng)建一組“列（column）”。

• 你的內(nèi)容應當放置于“列（column）”內(nèi)，并且，只有“列（column）”可以作為行（row）”的直接子元素。

• 類似?.row?和?.col-xs-4?這種預定義的類，可以用來快速創(chuàng)建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創(chuàng)建語義化的布局。

• 通過為“列（column）”設(shè)置?padding?屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過為?.row?元素設(shè)置負值?margin?從而抵消掉為?.container?元素設(shè)置的?padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。

• 負值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內(nèi)容排成一行。

• 柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個?.col-xs-4?來創(chuàng)建。

• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。

• 柵格類適用于與屏幕寬度大于或等于分界點大小的設(shè)備 ， 并且針對小屏幕設(shè)備覆蓋柵格類。 因此，在元素上應用任何?.col-md-*?柵格類適用于與屏幕寬度大于或等于分界點大小的設(shè)備 ， 并且針對小屏幕設(shè)備覆蓋柵格類。 因此，在元素上應用任何?.col-lg-*?不存在， 也影響大屏幕設(shè)備。

通過研究后面的實例，可以將這些原理應用到你的代碼中。

3、柵格參數(shù)

通過下表可以詳細查看 Bootstrap 的柵格系統(tǒng)是如何在多種屏幕設(shè)備上工作的。

bootstrap4版本中

之前版本

4、實例：從堆疊到水平排列

使用單一的一組?.col-md-*?柵格類，就可以創(chuàng)建一個基本的柵格系統(tǒng)，在手機和平板設(shè)備上一開始是堆疊在一起的（超小屏幕到小屏幕這一范圍），在桌面（中等）屏幕設(shè)備上變?yōu)樗脚帕小Ｋ小傲校╟olumn）必須放在 ”?.row?內(nèi)。

<div class="row"> ?<div class="col-md-1">.col-md-1</div> ?<div class="col-md-1">.col-md-1</div> ?<div class="col-md-1">.col-md-1</div> ?<div class="col-md-1">.col-md-1</div> ?<div class="col-md-1">.col-md-1</div> ?<div class="col-md-1">.col-md-1</div> ?<div class="col-md-1">.col-md-1</div> ?<div class="col-md-1">.col-md-1</div> ?<div class="col-md-1">.col-md-1</div> ?<div class="col-md-1">.col-md-1</div> ?<div class="col-md-1">.col-md-1</div> ?<div class="col-md-1">.col-md-1</div> </div> <div class="row"> ?<div class="col-md-8">.col-md-8</div> ?<div class="col-md-4">.col-md-4</div> </div> <div class="row"> ?<div class="col-md-4">.col-md-4</div> ?<div class="col-md-4">.col-md-4</div> ?<div class="col-md-4">.col-md-4</div> </div> <div class="row"> ?<div class="col-md-6">.col-md-6</div> ?<div class="col-md-6">.col-md-6</div> </div>

5、實例：流式布局容器

將最外面的布局元素?.container?修改為?.container-fluid，就可以將固定寬度的柵格布局轉(zhuǎn)換為 100% 寬度的布局。

<div class="container-fluid"> ?<div class="row"> ? ?... ?</div> </div>

6、實例：移動設(shè)備和桌面屏幕

是否不希望在小屏幕設(shè)備上所有列都堆疊在一起？那就使用針對超小屏幕和中等屏幕設(shè)備所定義的類吧，即?.col-xs-*?和?.col-md-*。請看下面的實例，研究一下這些是如何工作的。

<!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> ?<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> ?<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> ?<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> ?<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> ?<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> ?<div class="col-xs-6">.col-xs-6</div> ?<div class="col-xs-6">.col-xs-6</div> </div>

7、實例：手機、平板、桌面

在上面案例的基礎(chǔ)上，通過使用針對平板設(shè)備的?.col-sm-*?類，我們來創(chuàng)建更加動態(tài)和強大的布局吧。

<div class="row"> ?<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> ?<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> ?<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> ?<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> ?<!-- Optional: clear the XS cols if their content doesn't match in height --> ?<div class="clearfix visible-xs-block"></div> ?<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div>

8、實例：多余的列（column）將另起一行排列

如果在一個?.row?內(nèi)包含的列（column）大于12個，包含多余列（column）的元素將作為一個整體單元被另起一行排列。

<div class="row"> ?<div class="col-xs-9">.col-xs-9</div> ?<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div> ?<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div> </div>

9、響應式列重置

即便有上面給出的四組柵格class，你也不免會碰到一些問題，例如，在某些閾值時，某些列可能會出現(xiàn)比別的列高的情況。為了克服這一問題，建議聯(lián)合使用?.clearfix?和 響應式工具類。

<div class="row"> ?<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> ?<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> ?<!-- Add the extra clearfix for only the required viewport --> ?<div class="clearfix visible-xs-block"></div> ?<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> ?<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> </div>

除了列在分界點清除響應， 您可能需要?重置偏移, 后推或前拉某個列。請看此柵格實例。

<div class="row"> ?<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> ?<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div> </div> <div class="row"> ?<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div> ?<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div> </div>

10、列偏移

使用?.col-md-offset-*?類可以將列向右側(cè)偏移。這些類實際是通過使用?*?選擇器為當前元素增加了左側(cè)的邊距（margin）。例如，.col-md-offset-4?類將?.col-md-4?元素向右側(cè)偏移了4個列（column）的寬度。

<div class="row"> ?<div class="col-md-4">.col-md-4</div> ?<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> ?<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> ?<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> ?<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>

You can also override offsets from lower grid tiers with?.col-*-offset-0?classes.

<div class="row"> ?<div class="col-xs-6 col-sm-4"> ?</div> ?<div class="col-xs-6 col-sm-4"> ?</div> ?<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0"> ?</div> </div>

11、嵌套列

為了使用內(nèi)置的柵格系統(tǒng)將內(nèi)容再次嵌套，可以通過添加一個新的?.row?元素和一系列?.col-sm-*?元素到已經(jīng)存在的?.col-sm-*?元素內(nèi)。被嵌套的行（row）所包含的列（column）的個數(shù)不能超過12（其實，沒有要求你必須占滿12列）。

<div class="row"> ?<div class="col-sm-9"> ? ?Level 1: .col-sm-9 ? ?<div class="row"> ? ? ?<div class="col-xs-8 col-sm-6"> ? ? ? ?Level 2: .col-xs-8 .col-sm-6 ? ? ?</div> ? ? ?<div class="col-xs-4 col-sm-6"> ? ? ? ?Level 2: .col-xs-4 .col-sm-6 ? ? ?</div> ? ?</div> ?</div> </div>

12、總結(jié)

響應式工具有哪些呢

為了加快對移動設(shè)備友好的網(wǎng)頁開發(fā)工作，利用媒體查詢功能，并將這些工具類可以方便的針對不同設(shè)備展示或隱藏頁面內(nèi)容。

通過單獨或聯(lián)合使用以下列出的類，可以針對不同屏幕尺寸隱藏或顯示頁面內(nèi)容。

從 v3.2.0 版本起，形如?.visible-*-*?的類針對每種屏幕大小都有了三種變體，每個針對 CSS 中不同的?display?屬性，列表如下：

因此，以超小屏幕（xs）為例，可用的?.visible-*-*?類是：.visible-xs-block、.visible-xs-inline?和?.visible-xs-inline-block。

.visible-xs、.visible-sm、.visible-md?和?.visible-lg?類也同時存在。但是從 v3.2.0 版本開始不再建議使用。除了?` 相關(guān)的元素的特殊情況外，它們與.visible-*-block` 大體相同。

與之相反的，是visible-xs、visible-sm、visible-md、visible-lg?是顯示某個頁面內(nèi)容