柵格系統(tǒng)用于通過(guò)行（row）和列（column）組合創(chuàng)建頁(yè)面布局，內(nèi)容可以放入創(chuàng)建好的布局中。

Bootstrap柵格系統(tǒng)的工作原理：

“行（row）”必須包含在 .container中，以便為其賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding）通過(guò)    點(diǎn)container可以將界面放入瀏覽器的中間位置。

使用“行（row）”在水平方向創(chuàng)建一組“列（column）”。

你的內(nèi)容應(yīng)當(dāng)放置于“列（column）”內(nèi)，而且，只有“列（column）”可以作為行（row）”的直接子元素。

類似Predefined grid classes like .row and .col-xs-4 這些預(yù)定義的柵格class可以用來(lái)快速創(chuàng)建柵格布局。Bootstrap源碼中定義的mixin也可以用來(lái)創(chuàng)建語(yǔ)義化的布局。

通過(guò)設(shè)置padding從而創(chuàng)建“列（column）”之間的間隔（gutter）。然后通過(guò)為第一和最后一樣設(shè)置負(fù)值的margin從而抵消掉padding的影響。

柵格系統(tǒng)中的列是通過(guò)指定1到12的值來(lái)表示其跨越的范圍。例如，三個(gè)等寬的列可以使用三個(gè).col-xs-4來(lái)創(chuàng)建。

根據(jù)不同的屏幕情況選擇不同的前綴  小屏幕設(shè)備 (<768px)使用.col-xs- 格式大小  

小屏幕設(shè)備 平板 (≥768px)  .col-sm-

中等屏幕設(shè)備 桌面 (≥992px)   .col-md- 

大屏幕設(shè)備 桌面 (≥1200px)   .col-lg-

12列式：每格60PX間距為20PX（最常用）一般為336或者363等等

16列式：每格40PX 間距為20PX

24列式：每格30PX 間距為20PX

32列式：每格20PX 間距為20PX

不同的內(nèi)容使用相應(yīng)的格式，在同樣的列中使用不同的前綴效果不同大的相對(duì)小的是堆疊的而小的相對(duì)大的是平面的并排的如果在使用小屏幕的時(shí)候堆疊在一起了么可以使用超小屏幕來(lái)實(shí)現(xiàn)那么他就不會(huì)堆疊了

列偏移：使用.col-md-offset-大小 可以將列偏移到右側(cè)。使用*選擇器將所有列增加了列的左側(cè)margin

例如 .A .col-md-offset-3  將A 向左側(cè)偏移3格

同樣在這里面也可以使用嵌套方式去完成不同的格式