Bootstrap3.0柵格系統(tǒng)的方法教程-創(chuàng)新互聯(lián)

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

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、平壩ssl等。為成百上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的平壩網(wǎng)站制作公司

柵格選項(xiàng)

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

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

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

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

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

從堆疊到水平排列

柵格選項(xiàng)中的四個(gè)樣式類的使用都是依附于.row類的基礎(chǔ)上，而.row類通常都會在.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è)備上一開始是堆疊在一起的（超小屏幕到小屏幕這一范圍），在桌面（中等）屏幕設(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>

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

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

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

移動設(shè)備和桌面

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

代碼如下:

 <div class="page-header">
  <h2>案例:移動設(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>

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

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

所以：

第一行：8和4的份比。

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

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

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

所以：

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

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

Responsive column resets

通過上面兩個(gè)案例的解析，可以通過這四個(gè)柵格class設(shè)計(jì)出比較輕松的設(shè)計(jì)出比較復(fù)雜的頁面布局了。但是還是會有一些情況中出現(xiàn)一行中的某一列比其他的列高的情況?？赡墁F(xiàn)在你還不太清楚我說的意思，不過沒關(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(通過調(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è)元素呢？

接下來我們將上面的代碼稍微改動一下，其實(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(通過調(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è)會在以后進(jìn)行詳細(xì)說明，這里暫時(shí)不進(jìn)行示例演示了。

列偏移

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

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

嵌套列

為了使用內(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">
  <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>

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

代碼如下:

 <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)行對照的。

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

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

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

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

網(wǎng)站題目：Bootstrap3.0柵格系統(tǒng)的方法教程-創(chuàng)新互聯(lián)
URL地址：http://bm7419.com/article30/didjso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、軟件開發(fā)、建站公司、網(wǎng)站設(shè)計(jì)公司、移動網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)