前言

在前面的一篇文章當(dāng)中，我們主要學(xué)習(xí)了柵格系統(tǒng)的基本原理，以及通過簡單案例進(jìn)行對(duì)原理的實(shí)踐。

那么本文的主要內(nèi)容將主要分為以下幾個(gè)部分

1.柵格選項(xiàng)

2.從堆疊到水平排列

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

4.Responsive column resets

5.列偏移

6.嵌套列

7.列排序

8.總結(jié)

柵格選項(xiàng)

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

從上面的截圖可以看出來，Bootstrap針對(duì)不同尺寸的屏幕（包括手機(jī)、平板、PC等等）設(shè)置了不同的樣式類，這樣讓開發(fā)人員在開發(fā)時(shí)可以有更多的選擇。根據(jù)我的理解：如果在一個(gè)元素上使用多個(gè)不同的上面的樣式類，那么元素會(huì)根據(jù)在不同尺寸選擇最合適（匹配最理想的）的樣式類。簡單的舉例進(jìn)行說明：比如在一個(gè)元素上我們使用了兩個(gè)樣式類：.col-md-和.col-lg?？梢詫?duì)照上面的截圖來看

第一種情況：尺寸》=1200px;那么會(huì)選擇.col-lg。

第二種情況：尺寸》=992px 并且尺寸《=1200px;那么會(huì)選擇.col-md。

第三種情況如果尺寸《992px;那么這兩個(gè)樣式類都將不會(huì)作用于元素上。

從堆疊到水平排列

　　柵格選項(xiàng)中的四個(gè)樣式類的使用都是依附于.row類的基礎(chǔ)上，而.row類通常都會(huì)在.container的里進(jìn)行。

就是在合適的容器中使用合適的樣式類。

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

可以通過控制瀏覽器的寬度查看堆疊和水平排列的效果

很明顯這就是堆疊的效果，就是將瀏覽器的寬度調(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屏幕的樣式類）就派上用場了。

通過代碼可以發(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)一行中的某一列比其他的列高的情況?？赡墁F(xiàn)在你還不太清楚我說的意思，不過沒關(guān)系，我們直接上案例。

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

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

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

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

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

列偏移

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

通過閱讀上面的代碼大概可以想象出它的排版布局了吧。

嵌套列

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

通過上面的代碼可以發(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ì)于這句話的理解我還是沒有摸透。

可以看出，我定義了三行。

第一行被平均分成三份，每份占有四列。這一行主要是為了與下面兩行進(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)在來看一下效果展示

總結(jié)

本文都是通過最簡單的案例，來剖析案例中涉及到的布局要點(diǎn)。這一篇下來，自己感覺學(xué)到的還是蠻多的，感覺需要從頭再看一遍。其中對(duì)有些地方的理解可能不是很到位，希望有理解的、并且看到的前輩大?？梢詭托〉苤刚幌拢〉茉诖讼戎x過你們了。寫完這一篇感覺很不錯(cuò)，學(xué)到了好多，當(dāng)然也希望對(duì)各位看官能有點(diǎn)兒幫助。