.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的柵格系統基本就是這些，所以也沒什麼神祕的，你自己也完全可以寫出自己的柵格系統來。
本篇博文首發於本人個人部落格，檢視更多點這裡