前  言

　Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開(kāi)發(fā)更加快捷。

　而柵格系統(tǒng)是Bootstrap中的核心，正是因?yàn)闁鸥裣到y(tǒng)的存在，Bootstrap才能有著如此強(qiáng)大的響應(yīng)式布局方案。

一、什么是柵格系統(tǒng)

官方文檔中是這樣說(shuō)的：

Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。包含了用于簡(jiǎn)單的布局選項(xiàng)的預(yù)定義類，也包含了用于生成更多語(yǔ)義布局的功能強(qiáng)大的混合類。

我們來(lái)理解一下這一段話，可以發(fā)現(xiàn)其中最重要的部分就是移動(dòng)設(shè)備優(yōu)先，那么什么是移動(dòng)設(shè)備優(yōu)先呢？

　　Bootstrap的基礎(chǔ)CSS代碼默認(rèn)從小屏幕設(shè)備（比如移動(dòng)設(shè)備、平板電腦）開(kāi)始，然后使用媒體查詢擴(kuò)展到大屏幕設(shè)備（比如筆記本電腦、臺(tái)式電腦）上的組件和網(wǎng)格。

有著如下策略：

內(nèi)容：決定什么是最重要的。
布局：優(yōu)先設(shè)計(jì)更小的寬度。
漸進(jìn)增強(qiáng)：隨著屏幕大小增加而添加元素。

二、 工作原理

 柵格系統(tǒng)用于通過(guò)一系列的行（row）與列（column）的組合來(lái)創(chuàng)建頁(yè)面布局，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中。

工作原理如下：

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

<div class="container"><!-- 水平居中，兩邊有margin，最小屏幕時(shí)，充滿父元素 -->
 <div class="row"></div>
</div>
<!-- 或者 -->
<div class="container-fluid"><!-- 默認(rèn)一直充滿整個(gè)父元素 -->
 <div class="row"></div>
</div>

通過(guò)“行（row）”在水平方向創(chuàng)建一組“列（column）”。但列數(shù)之和不能超過(guò)平分的總列數(shù)（在超過(guò)時(shí)，多余部分會(huì)換行顯示），默認(rèn)12。（使用Less或者Sass可以進(jìn)行自定義設(shè)置）,如下：

<div class="container">
 <div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-6"></div>
  <div class="col-md-4"></div>
 </div>
</div>

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

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

通過(guò)為“列（column）”設(shè)置 padding 屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過(guò)為 .row 元素設(shè)置負(fù)值 margin 從而抵消掉為 .container 元素設(shè)置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
負(fù)值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內(nèi)容排成一行。

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

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

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

2.1媒體查詢

 在柵格系統(tǒng)中，我們?cè)?Less 文件中使用以下媒體查詢（media query）來(lái)創(chuàng)建關(guān)鍵的分界點(diǎn)閾值。

/* 超小屏幕（手機(jī)，小于 768px） */
/* 沒(méi)有任何媒體查詢相關(guān)的代碼，因?yàn)檫@在 Bootstrap 中是默認(rèn)的（還記得 Bootstrap 是移動(dòng)設(shè)備優(yōu)先的嗎？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面顯示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面顯示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

 我們偶爾也會(huì)在媒體查詢代碼中包含 max-width 從而將 CSS 的影響限制在更小范圍的屏幕大小之內(nèi)。

@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) { ... } 

2.2基本用法

 千言萬(wàn)語(yǔ)，不如直接上圖：

一圖勝千言，通過(guò)下表可以詳細(xì)查看 Bootstrap 的柵格系統(tǒng)是如何在多種屏幕設(shè)備上工作的。使用方法我想應(yīng)該不用再多說(shuō)了，下面我們看一些實(shí)例吧。

這個(gè)方式是最基本的用法：

<div class="container">
 <div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</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-2">.col-md-2</div>
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-4">.col-md-4</div>
 </div>
</div>

Bootstrap作為一個(gè)響應(yīng)式框架當(dāng)然不會(huì)只有那么簡(jiǎn)單的功能，我們繼續(xù)吧

2.3響應(yīng)式列重置

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

<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>

除了列在分界點(diǎn)清除響應(yīng)， 您可能需要 重置偏移, 后推或前拉某個(gè)列。請(qǐng)看此柵格實(shí)例。

<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>

2.4列偏移 

在某些情況下，我們不希望相鄰的列緊靠在一起，如果你希望不通過(guò)額外的margin或其他的手段來(lái)實(shí)現(xiàn)的話，Bootstrap內(nèi)置為我們提供了列偏移（offset），這一系列的類來(lái)幫助我們實(shí)現(xiàn)想要的效果。

只需要給需要偏移的列元素上添加類名col-md-offset-*(星號(hào)代表要偏移的列組合數(shù))，那么具有這個(gè)類名的列就會(huì)向右偏移。
這些類實(shí)際是通過(guò)使用 * 選擇器為當(dāng)前元素增加了左側(cè)的邊距（margin）。例如：在列元素中添加.col-md-offset-6 類將 .col-md-6元素向右側(cè)偏移了6個(gè)列（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>

2.5列嵌套

 Bootstrap框架的網(wǎng)格系統(tǒng)還支持列的嵌套。你可以在一個(gè)列中添加一個(gè)或者多個(gè)行（.row）容器，然后在這個(gè)行容器中插入列（像前面介紹的一樣使用列）。但在列容器中的行容器（.row），寬度為100%時(shí)，就是當(dāng)前外部列的寬度。

<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>

2.6列排序

 列排序其實(shí)就是改變列的方向（順序），就是改變左右浮動(dòng)，并且設(shè)置浮動(dòng)的距離。在Bootstrap框架的網(wǎng)格系統(tǒng)中是通過(guò)添加類名col-md-push-*和col-md-pull-*

<div class="row">
 <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
 <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

總結(jié)

以上所述是小編給大家介紹的Bootstrap柵格系統(tǒng)的使用，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論