bootstrap解析-柵格系統

.container(佈局容器)

屏幕寬1200px以上（col-lg）

1. 默認width爲1170px
2. padding,lefet和right各爲15px,因此內容width爲1140px;

屏幕寬992px以上(col-md)

1. 默認width爲970px
2. padding,lefet和right各爲15px,因此內容width爲940px;

屏幕寬768px以上(col-sm)

1. 默認width爲750px
2. padding,lefet和right各爲15px,因此內容width爲720px;

屏幕寬768px如下(col-xs)

1. 默認width爲100%
2. padding,lefet和right各爲15px,因此內容width爲100%-30px;

.container-fluid(流式佈局容器)

1. width爲100%
2. 其餘和.container同樣

.row(行)

1. 默認margin-left和margin-right爲-15px;
2. 這樣就抵消掉了.container的padding,row的顯示區域width就爲.container的width了
3. 利用::after清楚浮動

.col-(列)

1. 用@media來設置width對應百分比
2. padding,lefet和right各爲15px
3. float:left
4. position:relative
5. min-height:1px

.col-*-offset-(移動)

1. 利用@media來設置margin-left相應的百分比

.col--push-和.col--pull-(列排序)

1. 因爲col-設置了posistion:relative因此經過設置left(push)和righ(pull)來改變節點的位置。

其餘狀況

列的高度不一樣時

解決 .clearfix(清除浮動)

1. 因爲列都浮動了，因此閾值時會產生一些問題，所須要配合清除相應位置的浮動來解決

列大於12時

1. 因爲列浮動了，因此超出的列會自動換行排列

嵌套

1. 因爲以上屬性設置，因此嵌套寫.row和.col-就能夠

bootstrap的柵格系統基本就是這些，因此也沒什麼神祕的，你本身也徹底能夠寫出本身的柵格系統來。
本篇博文首發於本人我的博客，查看更多點這裏