柵格系統(tǒng)的實(shí)現(xiàn)原理非常簡(jiǎn)單，僅僅是通過(guò)定義容器大小萎馅，平分12份，再調(diào)整內(nèi)外邊距虹蒋，最后再結(jié)合媒體查詢糜芳，就制作出了強(qiáng)大的響應(yīng)式的柵格系統(tǒng)。Bootstrap默認(rèn)的柵格系統(tǒng)平分為12份魄衅。
柵格系統(tǒng)的主要工作原理：
一行數(shù)據(jù)（row）必須包含在.container中峭竣，以便為其賦予合適的對(duì)齊方式和內(nèi)邊距（padding）。
使用行（row）在水平方向創(chuàng)建一組列（column）徐绑。
具體內(nèi)容應(yīng)當(dāng)放置于列（column）內(nèi)邪驮，而且只有列（column）可以作為行（row）的直接子元素。
內(nèi)置一大堆樣式傲茄，可以使用像.row和.col-xs-4（占4列寬度）這樣的樣式來(lái)快速創(chuàng)建柵格布局毅访。Bootstrap源碼中定義的mixin也可以用來(lái)創(chuàng)建語(yǔ)義化的布局。
通過(guò)設(shè)置padding從而創(chuàng)建列（column）之間的間隔盘榨。然后通過(guò)為第一列和最后一列設(shè)置負(fù)值的margin從而抵消掉padding的影響喻粹。
柵格系統(tǒng)中的列是通過(guò)指定1到12的值來(lái)表示其跨越的范圍的。例如草巡，要讓屏幕分為3個(gè)等寬的部分守呜，可以使用3個(gè).col-xs-4來(lái)創(chuàng)建。
舉個(gè)栗子：
<body>
<div class="container">
<div class="row" style="background-color: green;height: 50px;">
<div class="col-xs-3" style="background-color: grey;height: 50px;">
</div>
</div>
</div>
<div class="container-fluid">
</div>
</body>
一般的網(wǎng)格布局山憨，查看css源碼1585行
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
bs .container定好了在不同屏幕下面的寬度查乒，750px->970px->1170px，每個(gè)容器左右內(nèi)邊距15px郁竟；
再看.row的樣式
.row {
margin-right: -15px;
margin-left: -15px;
}
.row放在.container中消除了.container15px內(nèi)邊距帶來(lái)的影響
然后再來(lái)看每一列的定義col-xx-xx
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
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-列都帶有15px的左右內(nèi)邊距玛迄，左浮動(dòng)排列~
.col-xx-xx使用width設(shè)置百分比寬度
col-xx-offset-xx使用margin-left進(jìn)行向右偏移
col-xx-pull-xx使用right進(jìn)行向左偏移
col-xx-push-xx使用left進(jìn)行向右偏移
.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%;
}
.col-xs-pull-12 {
right: 100%;
}
.col-xs-pull-11 {
right: 91.66666667%;
}
.col-xs-pull-10 {
right: 83.33333333%;
}
.col-xs-pull-9 {
right: 75%;
}
.col-xs-pull-8 {
right: 66.66666667%;
}
.col-xs-pull-7 {
right: 58.33333333%;
}
.col-xs-pull-6 {
right: 50%;
}
.col-xs-pull-5 {
right: 41.66666667%;
}
.col-xs-pull-4 {
right: 33.33333333%;
}
.col-xs-pull-3 {
right: 25%;
}
.col-xs-pull-2 {
right: 16.66666667%;
}
.col-xs-pull-1 {
right: 8.33333333%;
}
.col-xs-pull-0 {
right: auto;
}
.col-xs-push-12 {
left: 100%;
}
.col-xs-push-11 {
left: 91.66666667%;
}
.col-xs-push-10 {
left: 83.33333333%;
}
.col-xs-push-9 {
left: 75%;
}
.col-xs-push-8 {
left: 66.66666667%;
}
.col-xs-push-7 {
left: 58.33333333%;
}
.col-xs-push-6 {
left: 50%;
}
.col-xs-push-5 {
left: 41.66666667%;
}
.col-xs-push-4 {
left: 33.33333333%;
}
.col-xs-push-3 {
left: 25%;
}
.col-xs-push-2 {
left: 16.66666667%;
}
.col-xs-push-1 {
left: 8.33333333%;
}
.col-xs-push-0 {
left: auto;
}
.col-xs-offset-12 {
margin-left: 100%;
}
.col-xs-offset-11 {
margin-left: 91.66666667%;
}
.col-xs-offset-10 {
margin-left: 83.33333333%;
}
.col-xs-offset-9 {
margin-left: 75%;
}
.col-xs-offset-8 {
margin-left: 66.66666667%;
}
.col-xs-offset-7 {
margin-left: 58.33333333%;
}
.col-xs-offset-6 {
margin-left: 50%;
}
.col-xs-offset-5 {
margin-left: 41.66666667%;
}
.col-xs-offset-4 {
margin-left: 33.33333333%;
}
.col-xs-offset-3 {
margin-left: 25%;
}
.col-xs-offset-2 {
margin-left: 16.66666667%;
}
.col-xs-offset-1 {
margin-left: 8.33333333%;
}
.col-xs-offset-0 {
margin-left: 0;
}
對(duì)重復(fù)代碼的處理
縱觀整個(gè)柵格系統(tǒng)的源碼，從854行到1635行絕大部分代碼都是重復(fù)性的棚亩。比如給4種不同的類型設(shè)置width的時(shí)候蓖议，給pull和push設(shè)置left和right的時(shí)候，以及給offset設(shè)置的margin-left時(shí)候讥蟆，設(shè)置的值都一樣勒虾。只是樣式名稱不一樣。除此之外不一樣的地方就只有container樣式的寬度設(shè)置了瘸彤。那為什么不能這樣設(shè)置呢修然？
所有重復(fù)性的內(nèi)容都放一起（在媒體查詢之外），那么和媒體查詢有關(guān)的就只有這一項(xiàng)內(nèi)容了，也就是如下代碼中所列的width寬度愕宋。
.col-xs-12
.col-sm-12
.col-md-12
.col-lg-12 {
width: 100%;
}
總結(jié)：這得節(jié)約多少行代碼~婆翔！
