實(shí)現(xiàn)原理

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

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

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

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

有著如下策略：

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

工作原理

數(shù)據(jù)行（ .row ）必須包含在容器 .container （固定寬度）或 .container-fluid （100%寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)填充（padding）。如：

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

在數(shù)據(jù)行（ .row )中可以添加列（column），但列數(shù)之和不能超過平分的總列數(shù)（在超過時(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>

頁面上的 具體內(nèi)容 應(yīng)當(dāng)放置于列（column）內(nèi)，并且 只有列 （column）可以作為數(shù)據(jù)行 .row 容器的 直接子元素 。

預(yù)定義的網(wǎng)格類，比如 .row 和 .col-xs-4 ，可用于快速創(chuàng)建網(wǎng)格布局。

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

注意事項(xiàng)：

正如上面在注釋部分所展現(xiàn)的一樣的 .container （固定寬度）是固定寬度的布局方式。通過查看源碼，在查看 .container 類的時(shí)候我們會(huì)發(fā)現(xiàn)，它的寬度是響應(yīng)式的：（如下）

.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
/*........*/

從上面的css代碼可以看到，該類默認(rèn)為整個(gè)父元素的寬度（最小屏幕），但是在大屏幕下有著不同的寬度，并且在不同寬度下左右margin會(huì)同時(shí)增加或減少（水平居中）。

.container-fluid 類就和 .container 的默認(rèn)情況一樣，為100%寬度。 （CSS代碼一樣）

除此之外

從源碼中我們還可以發(fā)現(xiàn)，除了有左右margin外，還可以看到該類是有著左右填充（padding）存在的。

如果我們繼續(xù)查看源碼，可以發(fā)現(xiàn)數(shù)據(jù)行 .row 中的每一個(gè)列也有著左右填充（padding）的存在，如下：

.col-md-1, .col-lg-12 /*......*/{
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

看到這里，大家應(yīng)該都能想到會(huì)有什么樣的情況出現(xiàn)！我們?cè)诘谝粋€(gè)和最后一個(gè)列因?yàn)?雙填充 的存在， 實(shí)際上對(duì)于內(nèi)容的隔離 已經(jīng)到了 30px 。我們需要怎么消除影響呢？

Bootstrap是通過 .rows 上的外邊距（margin）取負(fù) margin-left: -15px;margin-right: -15px; ，表示第一列和最后一列的行偏移，用來抵消第一個(gè)列的左內(nèi)距和最后一列的右內(nèi)距。

基本用法

bootstrap3.x使用了四種柵格選項(xiàng)來形成柵格系統(tǒng)，這四種選項(xiàng)在官網(wǎng)上的介紹如下圖，很多人不理解，這里跟大家詳解一下四種柵格選項(xiàng)之間的區(qū)別，其實(shí)區(qū)別只有一條就是適合不同尺寸的屏幕設(shè)備。我們看class前綴這一項(xiàng)，我們姑且以前綴命名這四種柵格選項(xiàng)，他們分別是col-xs、col-sm、col-md、col-lg，我們懂英文的就知道，lg是large的縮寫，md是mid的縮寫，sm是small的縮寫，xs是***的縮寫。這樣命名就體現(xiàn)了這幾種class適應(yīng)的屏幕寬度不同。下面我們分別介紹這幾種class的特點(diǎn)。

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

通過源碼可以發(fā)現(xiàn)，如下：

.col-md-1/*......*/{ float: left;}/*所有的列都是默認(rèn)向左浮動(dòng)的*/
.col-md-1 {
width: 8.33333333%;
}
.col-md-2 {
width: 16.66666667%;
}
/*.....*/
.col-md-12 {
width: 100%;
}

從這些CSS代碼也就不難發(fā)現(xiàn)，Bootstrap中每一列所占的寬度，以及為何在列數(shù)設(shè)置超過12時(shí)，超過部分會(huì)換行顯示了。

在下面所有的示例中每一列的背景顏色與邊框的效果由如下CSS代碼控制：

[class *= col-]{
background-color: #eee;
border: 1px solid #ccc;
}

基礎(chǔ)

那么我們就來看看一些示例吧，下面這種方式是最基本的用法：

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

實(shí)現(xiàn)的效果如下：

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

列偏移

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

只需要給需要偏移的列元素上添加類名 col-md-offset-* ( 星號(hào)代表要偏移的列組合數(shù) )，那么具有這個(gè)類名的列就會(huì)向右偏移。

這些類實(shí)際是通過使用 * 選擇器為當(dāng)前元素增加了左側(cè)的邊距（margin）。例如：在列元素中添加 .col-md-offset-6 類將 .col-md-6 元素向右側(cè)偏移了6個(gè)列（column）的寬度。

現(xiàn)在我們的代碼是這樣的：

<div class="container">
<div class="row">
<div class="col-md-2 ">col-md-8 </div>
<div class="col-md-3 col-md-offset-2">col-md-4 col-md-offset-2</div>
<div class="col-md-4 col-md-offset-1">col-md-4 col-md-offset-1</div>
</div>
<p><br></p>
<div class="row">
<div class="col-md-4 ">col-md-4 </div>
<div class="col-md-3 col-md-offset-4">col-md-3 col-md-offset-4</div>
<div class="col-md-4 col-md-offset-4">col-md-4 col-md-offset-4</div>
</div>
</div>

可以實(shí)現(xiàn)的效果如下：

從實(shí)現(xiàn)的效果我們就能發(fā)現(xiàn)一些東西，注意 第二段的顯示效果與代碼 ，從那里我們可以發(fā)現(xiàn)：使用 col-md-offset-* 對(duì)列進(jìn)行向右偏移時(shí)，要保證列與偏移列的總數(shù)不超過12，不然會(huì)致列斷行顯示。

其實(shí)原因也很簡單：因?yàn)樵擃愂菍?duì)于列設(shè)置 margin-left ，并且我們?cè)谏厦娴脑创a展示中，也可以看有每一列都有著 float:left 的屬性，從這些地方我們就不難發(fā)現(xiàn)在（偏移+列寬）超過12時(shí)，為何會(huì)換行顯示了

列排序

列排序其實(shí)就是改變列的方向（順序），就是改變左右浮動(dòng)，并且設(shè)置浮動(dòng)的距離。在Bootstrap框架的網(wǎng)格系統(tǒng)中是通過添加類名 col-md-push-* 和 col-md-pull-* (和上面一樣，星號(hào)代表移動(dòng)的列組合數(shù))。

Bootstrap僅通過設(shè)置left和right來實(shí)現(xiàn)定位效果。通過查看源碼，我們可以看到基本設(shè)置比較簡單，如下：

.col-md-pull-12 {
right: 100%;
}
/*...*/
.col-md-push-1 {
left: 8.33333333%;
}
.col-md-push-0 {
left: auto;
}

還是繼續(xù)看看我們的實(shí)際效果吧！代碼如下

<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">.col-md-4 col-md-push-8 </div>
<div class="col-md-8 col-md-pull-4">.col-md-8 col-md-pull-4 </div>
</div>
<div class="row">
<div class="col-md-4 ">.col-md-4 默認(rèn)</div>
<div class="col-md-8 ">.col-md-8 默認(rèn)</div>
</div>
</div>

我們可以發(fā)現(xiàn)列的位置已經(jīng)發(fā)生了改變

列嵌套

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

注意：被嵌套的行（ .row ）所包含的列（column）的個(gè)數(shù)不能超過12（其實(shí)，沒有要求你必須占滿12列 -_- ）。

我們現(xiàn)在有這樣一個(gè)需求：

創(chuàng)建一個(gè)8-4列網(wǎng)格。（備注：以中屏md（970px）為例）。
在第一個(gè)8列網(wǎng)格中插入8-4列網(wǎng)格。
在第二個(gè)4列網(wǎng)格中插入9-3列網(wǎng)格。

效果如下：

該如何實(shí)現(xiàn)呢？

<div class="container">
<div class="row">
<div class="col-md-8">
我的里面嵌套了一個(gè)網(wǎng)格
<div class="row">
<div class="col-md-8">col-md-8</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
<div class="col-md-4">
我的里面嵌套了一個(gè)網(wǎng)格
<div class="row">
<div class="col-md-9">col-md-9</div>
<div class="col-md-3">col-md-3</div>
</div>
</div>
</div>
</div>

是不是很簡單呢？當(dāng)然為了完全實(shí)現(xiàn)和效果圖一樣的展示，我們還需要對(duì)CSS進(jìn)行一些添加：

[class *= col-] [class *= col-] {
background-color: #f36;
border:1px dashed #fff;
color: #fff;
}

以上所述是小編給大家分享的Bootstrap入門書籍之（三）柵格系統(tǒng)，希望對(duì)大家有所幫助！

最新評(píng)論