bootstrap網(wǎng)格系統(tǒng)使用方法解析

更新時間：2017年01月13日 11:53:08 投稿：lijiao

這篇文章主要為大家詳細解析了bootstrap網(wǎng)絡系統(tǒng)使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

網(wǎng)格系統(tǒng)的實現(xiàn)原理非常簡單，僅僅是通過定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見的)，再調(diào)整內(nèi)外邊距，最后結(jié)合媒體查詢，就制作出了強大的響應式網(wǎng)格系統(tǒng)。Bootstrap框架中的網(wǎng)格系統(tǒng)就是將容器平分成12份。

工作原理

1、數(shù)據(jù)行(.row)必須包含在容器（.container）中，以便為其賦予合適的對齊方式和內(nèi)距(padding)。如：

<div class="container">
 <div class="row"></div>
</div>

2、在行(.row)中可以添加列(.column)，但列數(shù)之和不能超過平分的總列數(shù)，比如12。如：

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

3、具體內(nèi)容應當放置在列容器（column）之內(nèi)，而且只有列（column）才可以作為行容器(.row)的直接子元素

4、通過設置內(nèi)距（padding）從而創(chuàng)建列與列之間的間距。然后通過為第一列和最后一列設置負值的外距（margin）來抵消內(nèi)距(padding)的影響

能這媒體查詢實現(xiàn)：
針對不同的瀏覽器分辨率，其寬度也不一樣：自動、750px、970px和1170px
css源碼：

.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;
 }
 @media (min-width: 1200px) {
 .container {
 width: 1170px;
 }

基本用法

網(wǎng)格系統(tǒng)用來布局，其實就是列的組合，Bootstrap框架在不同屏幕尺寸使用了不同的網(wǎng)格樣式

1、列組合

列組合簡單理解就是更改數(shù)字來合并列（原則：列總和數(shù)不能超12）
實現(xiàn)列組合方式非常簡單，只涉及兩個CSS兩個特性：浮動與寬度百分比。

/*確保所有列左浮動*/
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
 float: left;
 }

---------------------------------------------------------------------------------
/*定義每個列組合的寬度（使用的百分比）*/
 .col-md-12 {
 width: 100%;
 }
 .col-md-11 {
 width: 91.66666667%;
 }
 .col-md-10 {
 width: 83.33333333%;
 }
 .col-md-9 {
 width: 75%;
 }
 .col-md-8 {
 width: 66.66666667%;
 }
 .col-md-7 {
 width: 58.33333333%;
 }
 .col-md-6 {
 width: 50%;
 }
 .col-md-5 {
 width: 41.66666667%;
 }
 .col-md-4 {
 width: 33.33333333%;
 }
 .col-md-3 {
 width: 25%;
 }
 .col-md-2 {
 width: 16.66666667%;
 }
 .col-md-1 {
 width: 8.33333333%;
 }

列偏移

我們不希望相鄰的兩個列緊靠在一起，但又不想使用margin或者其他的技術(shù)手段來。這個時候就可以使用列偏移（offset）功能來實現(xiàn)。使用列偏移也非常簡單，只需要在列元素上添加類名“col-md-offset-*”(其中星號代表要偏移的列組合數(shù))，那么具有這個類名的列就會向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示該列向右移動4個列的寬度。

<div class="container">
 <div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-2 col-md-offset-4">列向右移動四列的間距</div>
  <div class="col-md-2">.col-md-3</div>
 </div>
 <div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">列向右移動四列的間距</div>
 </div>
</div>

實現(xiàn)原理非常簡單，就是利用十二分之一（1/12）的margin-left。然后有多少個offset，就有多少個margin-left。

css源碼：

 .col-md-offset-12 {
 margin-left: 100%;
}
 .col-md-offset-11 {
 margin-left: 91.66666667%;
 }
 .col-md-offset-10 {
 margin-left: 83.33333333%;
 }
 .col-md-offset-9 {
 margin-left: 75%;
 }
 .col-md-offset-8 {
 margin-left: 66.66666667%;
 }
 .col-md-offset-7 {
 margin-left: 58.33333333%;
 }
 .col-md-offset-6 {
 margin-left: 50%;
 }
 .col-md-offset-5 {
 margin-left: 41.66666667%;
 }
 .col-md-offset-4 {
 margin-left: 33.33333333%;
 }
 .col-md-offset-3 {
 margin-left: 25%;
 }
 .col-md-offset-2 {
 margin-left: 16.66666667%;
 }
 .col-md-offset-1 {
 margin-left: 8.33333333%;
 }
 .col-md-offset-0 {
 margin-left: 0;
 }

不過有一個細節(jié)需要注意，使用”col-md-offset-*”對列進行向右偏移時，要保證列與偏移列的總數(shù)不超過12，不然會致列斷行顯示

列排序

列排序其實就是改變列的方向，就是改變左右浮動，并且設置浮動的距離。在Bootstrap框架的網(wǎng)格系統(tǒng)中是通過添加類名“col-md-push-”和“col-md-pull-” (其中星號代表移動的列組合數(shù))。

左邊占4列寬，右側(cè)占8列寬；

<div class="container">
 <div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-8">.col-md-8</div>
 </div>
</div>
-----------------------將這兩個互換位置--------------------------------------------------
<div class="container">
 <div class="row">
 <div class="col-md-4 col-md-push-8">.col-md-4</div>
 <div class="col-md-8 col-md-pull-4">.col-md-8</div>
 </div>
</div>

// 實現(xiàn)原理：
.col-md-pull-12 {
 right: 100%;
 }
 .col-md-pull-11 {
 right: 91.66666667%;
 }
 .col-md-pull-10 {
 right: 83.33333333%;
 }
 .col-md-pull-9 {
 right: 75%;
 }
 .col-md-pull-8 {
 right: 66.66666667%;
 }
 .col-md-pull-7 {
 right: 58.33333333%;
 }
 .col-md-pull-6 {
 right: 50%;
 }
 .col-md-pull-5 {
 right: 41.66666667%;
 }

 .col-md-pull-4 {
 right: 33.33333333%;
 }

 .col-md-pull-3 {
 right: 25%;
 }

 .col-md-pull-2 {
 right: 16.66666667%;
 }
 .col-md-pull-1 {
 right: 8.33333333%;
 }
 .col-md-pull-0 {
 right: 0;
 }

 .col-md-push-12 {
 left: 100%;
 }
 .col-md-push-11 {
 left: 91.66666667%;
 }
 .col-md-push-10 {
 left: 83.33333333%;
 }
 .col-md-push-9 {
 left: 75%;
 }
 .col-md-push-8 {
 left: 66.66666667%;
 }
 .col-md-push-7 {
 left: 58.33333333%;
 }
 .col-md-push-6 {
 left: 50%;
 }
 .col-md-push-5 {
 left: 41.66666667%;
 }
 .col-md-push-4 {
 left: 33.33333333%;
 }
 .col-md-push-3 {
 left: 25%;
 }
 .col-md-push-2 {
 left: 16.66666667%;
 }
 .col-md-push-1 {
 left: 8.33333333%;
 }
 .col-md-push-0 {
 left: 0;
 }

列的嵌套

可以在一個列中添加一個或者多個行（row）容器，然后在這個行容器中插入列（像前面介紹的一樣使用列）。但在列容器中的行容器（row），寬度為100%時，就是當前外部列的寬度。

<div class="container">
 <div class="row">
  <div class="col-md-8">    

   我的里面嵌套了一個網(wǎng)格
   <div class="row">
    <div class="col-md-6">col-md-6</div>
    <div class="col-md-6">col-md-6</div>
   </div>

  </div>
  <div class="col-md-4">col-md-4</div>
 </div> 
</div>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: