Bootstrap3.0柵格系統(tǒng)的方法教程

本篇內(nèi)容主要講解“Bootstrap3.0柵格系統(tǒng)的方法教程”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Bootstrap3.0柵格系統(tǒng)的方法教程”吧!

柵格選項(xiàng)

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

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

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

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

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

從堆疊到水平排列

　　柵格選項(xiàng)中的四個(gè)樣式類的使用都是依附于.row類的基礎(chǔ)上，而.row類通常都會(huì)在.container的里進(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è)備上一開(kāi)始是堆疊在一起的（超小屏幕到小屏幕這一范圍），在桌面（中等）屏幕設(shè)備上變?yōu)樗脚帕小⒘?col-*-*)放置于任何.row內(nèi)即可。

代碼如下:

 <div class="container">
  <div class="page-header">
   <h2>案例:從堆疊到水平排列</h2>
  </div>
  <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>
  <h2></h2>
  <div class="row">
   <div class="col-md-8">
    .col-md-8
   </div>
   <div class="col-md-4">
    .col-md-4
   </div>
  </div>
  <h2></h2>
  <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>
  <h2></h2>
  <div class="row">
   <div class="col-md-6">
    .col-md-6
   </div>
   <div class="col-md-6">
    .col-md-6
   </div>
  </div>
 </div>

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

很明顯這就是堆疊的效果，就是將瀏覽器的寬度調(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)，那么開(kāi)發(fā)人員肯定有時(shí)候需要小尺寸的屏幕頁(yè)面展示也要是水平排列的。那么我們的.col-xs-*（小于768px屏幕的樣式類）就派上用場(chǎng)了。

代碼如下:

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

通過(guò)代碼可以發(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)在就是頁(yè)面屏幕小于一定程度的時(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

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

代碼如下:

 <div class="page-header">
  <h2>案例:Responsive column resets</h2>
 </div>
 <div class="row">
  <div class="col-xs-6 col-sm-3">
   .col-xs-6 .col-sm-3(通過(guò)調(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>

首先來(lái)看一下大屏幕下的頁(yè)面展示效果

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

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

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

代碼如下:

 <div class="page-header">
  <h2>案例:Responsive column resets</h2>
 </div>
 <div class="row">
  <div class="col-xs-6 col-sm-3">
   .col-xs-6 .col-sm-3(通過(guò)調(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)然你也可以通過(guò)響應(yīng)式工具，這個(gè)會(huì)在以后進(jìn)行詳細(xì)說(shuō)明，這里暫時(shí)不進(jìn)行示例演示了。

列偏移

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

代碼如下:

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

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

嵌套列

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

代碼如下:

 <div class="page-header">
  <h2>案例:列嵌套</h2>
 </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>

通過(guò)上面的代碼可以發(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列沒(méi)有進(jìn)行填充。

列排序

中文網(wǎng)的解釋是：通過(guò)使用.col-md-push-*和.col-md-pull-*就可以很容易的改變列的順序。

通過(guò)代碼實(shí)現(xiàn)了，看到效果了，對(duì)于這句話的理解我還是沒(méi)有摸透。

代碼如下:

 <div class="page-header">
  <h2>案例:列嵌套</h2>
 </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ù)了第五列和第六列。）

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

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

到此，相信大家對(duì)“Bootstrap3.0柵格系統(tǒng)的方法教程”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！