bootstrap 柵格系統(tǒng)案例

柵格選項(xiàng)

通過下面的截圖可以比較清楚的來查看Bootstrap的柵格系統(tǒng)是如何在多種不同的移動(dòng)設(shè)備上面進(jìn)行工作的。

<div class="container">
<div class="row">
<div class="col-md-1"></div>
</div>
</div>

使用單一的一組.col-md-*柵格class，你就可以創(chuàng)建一個(gè)基本的柵格系統(tǒng)，在手機(jī)和平板設(shè)備上一開始是堆疊在一起的（超小屏幕到小屏幕這一范圍），在桌面（中等）屏幕設(shè)備上變?yōu)樗脚帕?。將?col-*-*)放置于任何.row內(nèi)即可。

代碼如下：

<div class="container"> 
<div class="page-header">
<h1>案例:從堆疊到水平排列</h1>
</div>
<div class="row">
<divclass="col-md-1">.col-md-1</div>
<divclass="col-md-1">.col-md-1</div>
<divclass="col-md-1">.col-md-1</div>
<divclass="col-md-1">.col-md-1</div>
<divclass="col-md-1">.col-md-1</div>
<divclass="col-md-1">.col-md-1</div>
<divclass="col-md-1">.col-md-1</div>
<divclass="col-md-1">.col-md-1</div>
<divclass="col-md-1">.col-md-1</div>
<divclass="col-md-1">.col-md-1</div>
<divclass="col-md-1">.col-md-1</div>
<divclass="col-md-1">.col-md-1</div>
</div>
<h1></h1>
<divclass="row">
<divclass="col-md-8">.col-md-8</div>
<divclass="col-md-4">.col-md-4</div>
</div>
<h1></h1>
<divclass="row">
<divclass="col-md-4">.col-md-4</div>
<divclass="col-md-4">.col-md-4</div>
<divclass="col-md-4">.col-md-4</div>
</div>
<h1></h1>
<divclass="row">
<divclass="col-md-6">.col-md-6</div>
<divclass="col-md-6">.col-md-6</div>
</div>
</div>

很明顯這就是堆疊的效果，就是將瀏覽器的寬度調(diào)為比較小的時(shí)候。

現(xiàn)在便是水平排列。將瀏覽器的寬度調(diào)為稍寬之后。你也可以使用其他三個(gè)類進(jìn)行測(cè)試效果。

移動(dòng)設(shè)備和桌面

從上面的案例我們可以發(fā)現(xiàn)，當(dāng)小尺寸的屏幕的時(shí)候使用.col-md-*的時(shí)候它會(huì)呈現(xiàn)堆疊的狀態(tài)，那么開發(fā)人員肯定有時(shí)候需要小尺寸的屏幕頁面展示也要是水平排列的。那么我們的.col-xs-*（小于768px屏幕的樣式類）就派上用場(chǎng)了。

代碼如下：

<div class="page-header">
<h1>案例:移動(dòng)設(shè)備和桌面</h1>
</div>
<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>
<h1></h1>
<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>
<h1></h1>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
<h1></h1>

通過代碼可以發(fā)現(xiàn)針對(duì)前兩個(gè)的.row樣式類中的div，我們?cè)诿總€(gè)元素上面都設(shè)置了兩個(gè)樣式類。

這是在稍大尺寸的屏幕上展示的效果，針對(duì)每個(gè)元素的兩個(gè)樣式會(huì)在不同尺寸下進(jìn)行合適的選擇，那么在稍大的情況下，選擇的樣式類就會(huì)是.col-md-*。

所以：

第一行：8和4的份比。

第二行：三個(gè)4平平均分成三份。

第三行：6和6雖然是大尺寸因?yàn)橹挥羞@一個(gè)樣式，也是平均分成兩份。

現(xiàn)在就是頁面屏幕小于一定程度的時(shí)候，針對(duì)每個(gè)元素進(jìn)行重新選擇樣式類?，F(xiàn)在真對(duì)前兩個(gè).row選擇的都是col-xs-*。

所以：

第一行：兩個(gè)元素分為12和6，而一行呢就是12份，所以第二個(gè)元素會(huì)進(jìn)行換行，然后占據(jù)6份一半的位置。

第二行：3個(gè)6份。而一行呢就是12份。所以第三個(gè)元素會(huì)進(jìn)行換行，然后占據(jù)6份一般的位置。

Responsive column resets

通過上面兩個(gè)案例的解析，可以通過這四個(gè)柵格class設(shè)計(jì)出比較輕松的設(shè)計(jì)出比較復(fù)雜的頁面布局了。但是還是會(huì)有一些情況中出現(xiàn)一行中的某一列比其他的列高的情況。可能現(xiàn)在你還不太清楚我說的意思，不過沒關(guān)系，我們直接上案例。

代碼如下：

<div class="page-header">
<h1>案例:Responsive column resets</h1>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3(通過調(diào)整瀏覽器的寬度或在手機(jī)上即可查看這些案例的實(shí)際效果。)</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 class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

首先來看一下大屏幕下的頁面展示效果

第一個(gè)元素的高度的確不太一樣。然后看一下小屏幕的。

看現(xiàn)在是這樣進(jìn)行排列的，因?yàn)樾∑聊幌逻x擇的都是.col-xs-*的樣式類，而且都是占用6份的。不知道這樣的效果是不是你想要的。原來是不是想在小屏幕下看到這四個(gè)元素在兩行然后每行兩個(gè)元素呢？

接下來我們將上面的代碼稍微改動(dòng)一下，其實(shí)也就是添加了一行代碼

代碼如下：

<div class="page-header">
<h1>案例:Responsive column resets</h1>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3(通過調(diào)整瀏覽器的寬度或在手機(jī)上即可查看這些案例的實(shí)際效果。)</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="clearfix visible-xs"></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>

這樣的效果還是達(dá)到了兩行兩列的。當(dāng)然你也可以通過響應(yīng)式工具，這個(gè)會(huì)在以后進(jìn)行詳細(xì)說明，這里暫時(shí)不進(jìn)行示例演示了。

列偏移

這個(gè)其實(shí)很簡(jiǎn)單就是通過一個(gè)樣式類，通過.col-md-offset-*可以將列偏移到右側(cè)。這些class通過使用*選擇器將所有列增加了列的左側(cè)margin。例如，.col-md-offset-4將.col-md-4向右移動(dòng)了4個(gè)列的寬度。

代碼如下：

<div class="page-header">
<h1>案例:列偏移</h1>
</div>
<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

為了使用內(nèi)置的柵格進(jìn)行內(nèi)容的嵌套，通過添加一個(gè)新的.row和一系列的.col-md-*列到已經(jīng)存在的.col-md-*列內(nèi)即可實(shí)現(xiàn)。嵌套列所包含的列加起來應(yīng)該等于12。

代碼如下：

<div class="page-header">
<h1>案例:列嵌套</h1>
</div>
<div class="row">
<div class="col-md-9">
Level 1: .col-md-9
<div class="row">
<div class="col-md-6">
Level 2: .col-md-6
</div>
<div class="col-md-6">
Level 2: .col-md-6
</div>
</div>
<div class="row">
<div class="col-md-3">
Level 3: .col-md-3
</div>
<div class="col-md-6">
Level 3: .col-md-6
</div>
</div>
</div> 
</div>

通過上面的代碼可以發(fā)現(xiàn)，首先定義了一個(gè)row,然后在此row中添加了一個(gè).col-md-9的列，代表這個(gè)元素占有9列。

然后在這個(gè)占有9列的元素里面添加了兩個(gè)不同的row。

即第一個(gè)row:將第一個(gè)row分成了兩份，每份占有的6列，這12列，但是其總寬度和它外面的占有9列的元素的寬度是一樣的。

第二個(gè)row:將第二個(gè)row分成了兩份，第一份占有3列，第二份占有6列，然后剩余的3列沒有進(jìn)行填充。

中文網(wǎng)的解釋是：通過使用.col-md-push-*和.col-md-pull-*就可以很容易的改變列的順序。
通過代碼實(shí)現(xiàn)了，看到效果了，對(duì)于這句話的理解我還是沒有摸透。

代碼如下：

<div class="page-header">
<h1>案例:列嵌套</h1>
</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-push-4">.col-md-2 .col-md-push-4</div> 
</div>
<div class="row">
<div class="col-md-7"></div>
<div class="col-md-5 col-md-pull-4">.col-md-5 .col-md-push-4</div> 
</div>

可以看出，定義了三行。

第一行被平均分成三份，每份占有四列。這一行主要是為了與下面兩行進(jìn)行對(duì)照的。

第二行里只有一個(gè)元素且是占有兩列，然后對(duì)此元素也添加了.col-md-push-4的樣式類。（讓占有兩個(gè)列的元素又向右移動(dòng)了4列那么現(xiàn)在就是占據(jù)了第五列和第六列。）

第三列被分為兩份，第一份占有七列，不過是空的，然后第二份占有五列，并且對(duì)此元素也添加了一個(gè).col-md-pull-4的樣式類，當(dāng)然此類和上一行附加的類應(yīng)該正好有相反的效果。（讓占有5列的元素又向左移動(dòng)了四列，原來是從第八列開始的，那么現(xiàn)在是從第四列開始的。）

現(xiàn)在來看一下效果展示