【轉】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-md-* 中等屏幕 桌面顯示器 (≥992px)(柵格參數)：
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
【原文】http://www.cnblogs.com/suwings/p/6079178.html
可參考：http://get.ftqq.com/6195.get
【轉】Bootstrap 框架 柵格布局系統底層設計原理