Bootstrap 框架 柵格佈局系統設計原理

若是你是初次接觸Bootstrap，你必定會爲它的柵格佈局感到敬佩。事實上，這個佈局系統提供了一套響應式的佈局解決方案。

既然這麼好用，那他是如何用CSS來實現的呢？

我特地去Bootstrap官方下載了源代碼進行分析了一番，看完以後果真有了收穫，不過我只看了柵格佈局的那塊代碼，其實也很簡單，沒必要擔憂不懂，你只須要要基礎的CSS知識便可。

前提條件（Bootstrap 自帶）

---

 

首先使用這個佈局以前要定義一下代碼：

這行代碼若是不懂，能夠搜索一下，總之大體意思就是，被定義的元素的內邊距和邊框再也不會增長它的寬度，不加入的話排版會有問題。

不過，Bootstrap本身固然已經加入了，若是你是使用整個Bootstrap框架，那你能夠無視這裏，只是讓你明白鬚要一個這個。

我是將Bootstrap框架裏面的佈局代碼分割出來，造成一個小體積的僅有css文件的小框架（下載地址見最後），之後寫單頁小網站方便用。

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

 

容器 container

---

container 的設計大體以下：

代碼實現：

這裏實現了依據不一樣的寬度進行改變：

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {/*當寬度大於768px時觸發*/
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {/*當寬度大於992px時觸發*/
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {/*當寬度大於1200px時觸發*/
  .container {
    width: 1170px;
  }
}
.container-fluid { /*這個是寬度默認*/
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

 

 仔細研究一下CSS代碼，相信你會忽然明白。

爲何要Padding 15px呢？

我以爲應該是爲了若是你在容器 container 裏面寫其餘東西，不至於挨邊。影響美觀。

 

行 row

---

最簡單的莫過於的 row 了。

是否是感受不錯：

代碼實現：

沒錯就兩行

.row {
  margin-right: -15px;
  margin-left: -15px;
}

 

列 Column

---

 這個也很簡單，你看總共有那麼寬，Bootstrap分別將他們分割成12份，意思是你能夠隨意使用者12份，加起來要正好12。

不過要注意的一點是，Bootstrap實現了更好的響應式佈局，列的種類是有不少種的。

.col-xs-* 針對超小屏幕 手機（<768px）

.col-sm-* 小屏幕 平板 (≥768px)

.col-md-* 中等屏幕 桌面顯示器 (≥992px)(柵格參數)

.col-lg-* 針對特大的（≥1200px）

這些是什麼意思？如何使用的呢？假設你寫以下代碼: 

<div class="col-sm-10 col-md-8"></div>
<div class="col-sm-3 col-md-4"></div>

 

當這兩個div在row裏面以後。若是是這樣 這兩個div在小屏幕中會排2排 由於10+3>12 ,在中等屏幕中能夠排同一排 8+4=12

說白了。就是在不一樣的寬度裏面Bootstrap將幫助你選擇不一樣的類，你能夠用這些類定義你想在不一樣寬度的界面排版。

代碼實現：

col-xs-*的：

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2,/*後面代碼省略，選擇了全部的列，全部不一樣的列類型所有都有這樣的有這樣*/
{
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}
.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}

 其餘元素則使用

@media (min-width: 1200px){
 /*各自列的實現*/       
}

 

這些來判斷，而後各自實現本身的類便可了。

不過方便你研究，代碼也順便貼上。

---

 

.col-sm-* 小屏幕 平板 (≥768px)：

  1 @media (min-width: 768px) {
  2   .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
  3     float: left;
  4   }
  5   .col-sm-12 {
  6     width: 100%;
  7   }
  8   .col-sm-11 {
  9     width: 91.66666667%;
 10   }
 11   .col-sm-10 {
 12     width: 83.33333333%;
 13   }
 14   .col-sm-9 {
 15     width: 75%;
 16   }
 17   .col-sm-8 {
 18     width: 66.66666667%;
 19   }
 20   .col-sm-7 {
 21     width: 58.33333333%;
 22   }
 23   .col-sm-6 {
 24     width: 50%;
 25   }
 26   .col-sm-5 {
 27     width: 41.66666667%;
 28   }
 29   .col-sm-4 {
 30     width: 33.33333333%;
 31   }
 32   .col-sm-3 {
 33     width: 25%;
 34   }
 35   .col-sm-2 {
 36     width: 16.66666667%;
 37   }
 38   .col-sm-1 {
 39     width: 8.33333333%;
 40   }
 41   .col-sm-pull-12 {
 42     right: 100%;
 43   }
 44   .col-sm-pull-11 {
 45     right: 91.66666667%;
 46   }
 47   .col-sm-pull-10 {
 48     right: 83.33333333%;
 49   }
 50   .col-sm-pull-9 {
 51     right: 75%;
 52   }
 53   .col-sm-pull-8 {
 54     right: 66.66666667%;
 55   }
 56   .col-sm-pull-7 {
 57     right: 58.33333333%;
 58   }
 59   .col-sm-pull-6 {
 60     right: 50%;
 61   }
 62   .col-sm-pull-5 {
 63     right: 41.66666667%;
 64   }
 65   .col-sm-pull-4 {
 66     right: 33.33333333%;
 67   }
 68   .col-sm-pull-3 {
 69     right: 25%;
 70   }
 71   .col-sm-pull-2 {
 72     right: 16.66666667%;
 73   }
 74   .col-sm-pull-1 {
 75     right: 8.33333333%;
 76   }
 77   .col-sm-pull-0 {
 78     right: auto;
 79   }
 80   .col-sm-push-12 {
 81     left: 100%;
 82   }
 83   .col-sm-push-11 {
 84     left: 91.66666667%;
 85   }
 86   .col-sm-push-10 {
 87     left: 83.33333333%;
 88   }
 89   .col-sm-push-9 {
 90     left: 75%;
 91   }
 92   .col-sm-push-8 {
 93     left: 66.66666667%;
 94   }
 95   .col-sm-push-7 {
 96     left: 58.33333333%;
 97   }
 98   .col-sm-push-6 {
 99     left: 50%;
100   }
101   .col-sm-push-5 {
102     left: 41.66666667%;
103   }
104   .col-sm-push-4 {
105     left: 33.33333333%;
106   }
107   .col-sm-push-3 {
108     left: 25%;
109   }
110   .col-sm-push-2 {
111     left: 16.66666667%;
112   }
113   .col-sm-push-1 {
114     left: 8.33333333%;
115   }
116   .col-sm-push-0 {
117     left: auto;
118   }
119   .col-sm-offset-12 {
120     margin-left: 100%;
121   }
122   .col-sm-offset-11 {
123     margin-left: 91.66666667%;
124   }
125   .col-sm-offset-10 {
126     margin-left: 83.33333333%;
127   }
128   .col-sm-offset-9 {
129     margin-left: 75%;
130   }
131   .col-sm-offset-8 {
132     margin-left: 66.66666667%;
133   }
134   .col-sm-offset-7 {
135     margin-left: 58.33333333%;
136   }
137   .col-sm-offset-6 {
138     margin-left: 50%;
139   }
140   .col-sm-offset-5 {
141     margin-left: 41.66666667%;
142   }
143   .col-sm-offset-4 {
144     margin-left: 33.33333333%;
145   }
146   .col-sm-offset-3 {
147     margin-left: 25%;
148   }
149   .col-sm-offset-2 {
150     margin-left: 16.66666667%;
151   }
152   .col-sm-offset-1 {
153     margin-left: 8.33333333%;
154   }
155   .col-sm-offset-0 {
156     margin-left: 0;
157   }
158 }

col-sm

.col-md-* 中等屏幕 桌面顯示器 (≥992px)(柵格參數)：

  1 @media (min-width: 992px) {
  2   .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 {
  3     float: left;
  4   }
  5   .col-md-12 {
  6     width: 100%;
  7   }
  8   .col-md-11 {
  9     width: 91.66666667%;
 10   }
 11   .col-md-10 {
 12     width: 83.33333333%;
 13   }
 14   .col-md-9 {
 15     width: 75%;
 16   }
 17   .col-md-8 {
 18     width: 66.66666667%;
 19   }
 20   .col-md-7 {
 21     width: 58.33333333%;
 22   }
 23   .col-md-6 {
 24     width: 50%;
 25   }
 26   .col-md-5 {
 27     width: 41.66666667%;
 28   }
 29   .col-md-4 {
 30     width: 33.33333333%;
 31   }
 32   .col-md-3 {
 33     width: 25%;
 34   }
 35   .col-md-2 {
 36     width: 16.66666667%;
 37   }
 38   .col-md-1 {
 39     width: 8.33333333%;
 40   }
 41   .col-md-pull-12 {
 42     right: 100%;
 43   }
 44   .col-md-pull-11 {
 45     right: 91.66666667%;
 46   }
 47   .col-md-pull-10 {
 48     right: 83.33333333%;
 49   }
 50   .col-md-pull-9 {
 51     right: 75%;
 52   }
 53   .col-md-pull-8 {
 54     right: 66.66666667%;
 55   }
 56   .col-md-pull-7 {
 57     right: 58.33333333%;
 58   }
 59   .col-md-pull-6 {
 60     right: 50%;
 61   }
 62   .col-md-pull-5 {
 63     right: 41.66666667%;
 64   }
 65   .col-md-pull-4 {
 66     right: 33.33333333%;
 67   }
 68   .col-md-pull-3 {
 69     right: 25%;
 70   }
 71   .col-md-pull-2 {
 72     right: 16.66666667%;
 73   }
 74   .col-md-pull-1 {
 75     right: 8.33333333%;
 76   }
 77   .col-md-pull-0 {
 78     right: auto;
 79   }
 80   .col-md-push-12 {
 81     left: 100%;
 82   }
 83   .col-md-push-11 {
 84     left: 91.66666667%;
 85   }
 86   .col-md-push-10 {
 87     left: 83.33333333%;
 88   }
 89   .col-md-push-9 {
 90     left: 75%;
 91   }
 92   .col-md-push-8 {
 93     left: 66.66666667%;
 94   }
 95   .col-md-push-7 {
 96     left: 58.33333333%;
 97   }
 98   .col-md-push-6 {
 99     left: 50%;
100   }
101   .col-md-push-5 {
102     left: 41.66666667%;
103   }
104   .col-md-push-4 {
105     left: 33.33333333%;
106   }
107   .col-md-push-3 {
108     left: 25%;
109   }
110   .col-md-push-2 {
111     left: 16.66666667%;
112   }
113   .col-md-push-1 {
114     left: 8.33333333%;
115   }
116   .col-md-push-0 {
117     left: auto;
118   }
119   .col-md-offset-12 {
120     margin-left: 100%;
121   }
122   .col-md-offset-11 {
123     margin-left: 91.66666667%;
124   }
125   .col-md-offset-10 {
126     margin-left: 83.33333333%;
127   }
128   .col-md-offset-9 {
129     margin-left: 75%;
130   }
131   .col-md-offset-8 {
132     margin-left: 66.66666667%;
133   }
134   .col-md-offset-7 {
135     margin-left: 58.33333333%;
136   }
137   .col-md-offset-6 {
138     margin-left: 50%;
139   }
140   .col-md-offset-5 {
141     margin-left: 41.66666667%;
142   }
143   .col-md-offset-4 {
144     margin-left: 33.33333333%;
145   }
146   .col-md-offset-3 {
147     margin-left: 25%;
148   }
149   .col-md-offset-2 {
150     margin-left: 16.66666667%;
151   }
152   .col-md-offset-1 {
153     margin-left: 8.33333333%;
154   }
155   .col-md-offset-0 {
156     margin-left: 0;
157   }
158 }

col-md

 .col-lg就不貼了，差很少都是。

實踐圖

---

效果圖：

 

最後

---

 雖說介紹了佈局的基本原理，講得應該算是很詳細了。至少能寫出這麼多東西來。

不過 Bootstrap 的佈局可不止這些，你有沒有發現  .col-md-offset-* .col-md-push-* 這些類。用這些能夠進行很好的細節的排版，不過在這裏就不講了，畢竟這篇文章不是寫如何使用 Bootstrap 的，而是讓你理解 Bootstrap 佈局的實現原理。

 

相關下載地址：

提取出的 Bootstrap 佈局代碼下載，可獨立使用，就一個css，體積小並且實現了佈局系統，當用不着Bootstrap這麼100多K的文件的時候，能夠考慮這個：

連接: http://pan.baidu.com/s/1dEM0pXJ 密碼: ywd9

 

 

不論對您是否有幫助，謝謝你的耐心閱讀。