這個布局提供了一套響應式布局解決方案。
一. 前提
被定義的元素內邊距和邊框不再會增加它的寬度。
*
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}@media (min-width: 768px)
}@media (min-width: 992px)
}@media (min-width: 1200px)
}.container-fluid
四, 列column
這個也很簡單，你看總共有那麼寬，bootstrap分別將他們分割成12份，意思是你可以隨意使用者12份，加起來要正好12。
.col-xs-* 針對超小螢幕 手機（<768px）
.col-sm-* 小螢幕 平板 (≥768px)
.col-md-* 中等螢幕 桌面顯示器 (≥992px)(柵格引數)
.col-lg-* 針對特大的（≥1200px）
這些是什麼意思？如何使用的呢？假設你寫如下**:
class="col-sm-10 col-md-8">div>
class="col-sm-3 col-md-4">div>
當這兩個div在row裡面之後。如果是這樣 這兩個div在小螢幕中會排2排 因為10+3>12 ,在中等螢幕中可以排同一排 8+4=12
說白了。就是在不同的寬度裡面bootstrap將幫助你選擇不同的類，你可以用這些類定義你想在不同寬度的介面排版。
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2,/*後面**省略，選擇了所有的列，所有不同的列型別全部都有這樣的有這樣*/
.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
.col-xs-12
.col-xs-11
.col-xs-10
.col-xs-9
.col-xs-8
.col-xs-7
.col-xs-6
.col-xs-5
.col-xs-4
.col-xs-3
.col-xs-2
.col-xs-1
1 @media (min-width: 768px)
5 .col-sm-12
8 .col-sm-11
11 .col-sm-10
14 .col-sm-9
17 .col-sm-8
20 .col-sm-7
23 .col-sm-6
26 .col-sm-5
29 .col-sm-4
32 .col-sm-3
35 .col-sm-2
38 .col-sm-1
41 .col-sm-pull-12
44 .col-sm-pull-11
47 .col-sm-pull-10
50 .col-sm-pull-9
53 .col-sm-pull-8
56 .col-sm-pull-7
59 .col-sm-pull-6
62 .col-sm-pull-5
65 .col-sm-pull-4
68 .col-sm-pull-3
71 .col-sm-pull-2
74 .col-sm-pull-1
77 .col-sm-pull-0
80 .col-sm-push-12
83 .col-sm-push-11
86 .col-sm-push-10
89 .col-sm-push-9
92 .col-sm-push-8
95 .col-sm-push-7
98 .col-sm-push-6
101 .col-sm-push-5
104 .col-sm-push-4
107 .col-sm-push-3
110 .col-sm-push-2
113 .col-sm-push-1
116 .col-sm-push-0
119 .col-sm-offset-12
122 .col-sm-offset-11
125 .col-sm-offset-10
128 .col-sm-offset-9
131 .col-sm-offset-8
134 .col-sm-offset-7
137 .col-sm-offset-6
140 .col-sm-offset-5
143 .col-sm-offset-4
146 .col-sm-offset-3
149 .col-sm-offset-2
152 .col-sm-offset-1
155 .col-sm-offset-0
158 }
移動web bootstrap布局
1.響應式布局原理 通過 查詢針對不同寬度裝置進行布局和樣式的設定 裝置螢幕劃分 768px,超小螢幕,手機 768 992 px,小螢幕,平板 992 1200 px,pc端中等螢幕 1200px,pc端大螢幕 2.bootstrap框架 1.gulp壓縮 小工具 2.柵格系統 把containe...
Bootstrap 柵格系統
目錄 1 簡介 2 柵格選項 3 列偏移 4 巢狀列 5 列排序 1 簡介 bootstrap內建了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕裝置或視口 viewport 尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義classe，還有強大的mixin用於生成更具語義的布局。2...
柵格系統總結
柵格設計系統，是一種平面設計的方法與風格。運用固定的格仔設計版面布局，其風格工整簡潔。柵格系統的設計原理 bootstrap 網格系統 bootstrap 包含了乙個響應式的 移動裝置優先的 不固定的網格系統，可以隨著裝置或視口大小的增加而適當地擴充套件到 12 列。它包含了用於簡單的布局選項的預定...