bootstrap 的柵格系統(tǒng)是布局的一套基本工具。
相當(dāng)于文本編輯來說灿巧，柵格系統(tǒng)是對版面的處理赶袄，尤其是水平方向的布局
版面按平面設(shè)計(jì)來說，包括頁邊距抠藕、天地饿肺、頁腳、頁眉盾似，版塊也一樣敬辣。
按表現(xiàn)來說，排版分為層疊position(z序圖層重疊)颜说、堆疊stacking购岗、內(nèi)聯(lián)inline、柵格grid, 還有浮動float门粪、現(xiàn)代的彈性盒子flexbox，這些結(jié)構(gòu)都維護(hù)著內(nèi)容塊的間距烹困，大小玄妈，方向。
學(xué)習(xí)bootstrap的目地不僅僅在于使用bootstrap本身，而是熟悉掌握類似的css框架的組成拟蜻，對于其它的框架绎签，其構(gòu)成結(jié)構(gòu)與原理大致是差不多的，了解了一個酝锅，其它的就更容易上手诡必，保證我們在不同的css框架間游刃有余。
對于移動端來說搔扁，柵格系統(tǒng)的重要性被降低了爸舒，因?yàn)樗鼈兇蠖嗍嵌询B式排版，而且有了flexbox稿蹲，可以更加靈活的進(jìn)行全方位的對齊分割版面扭勉。
container與container-fluid是屏幕居中與兩側(cè)留白的工具類。row是對齊父內(nèi)容與約束子列浮動的工具類苛聘，它還是架構(gòu)嵌套的多列結(jié)構(gòu)的工具涂炎。col-*-*是創(chuàng)建組合單元列的工具類，起到不同設(shè)備間有不同的列數(shù)或者從堆疊轉(zhuǎn)換到水平排版的控制類设哗。
如果只有單列唱捣，則無須使用
.row>.col-*-*結(jié)構(gòu)， 直接一個block元素即可网梢。
col-*-offset-*讓當(dāng)前列向右偏移n個單位爷光，用來對齊上一行的某列，例如表單中有無前置標(biāo)簽的排版澎粟。col-*-pull-* 與 col-*-push-*可以使用列左右移動蛀序，因?yàn)閏ol本身就是相對定位的，脫離了文檔流的限制活烙，用來實(shí)現(xiàn)SEO語義與視覺上排版的沖突解決徐裸，也可以實(shí)現(xiàn)堆疊與水平排版兩種場景不同排序的功能。
默認(rèn)邊緣col會對齊父內(nèi)容啸盏，col之間間隔為15px*2, 有時(shí)候需要去掉間隔重贺，或者只想要15px間隔，這個時(shí)候就可以自定義兩個類來實(shí)現(xiàn)：
/*
remove gutter
*/
.no-gutter .row {
margin-left: 0;
margin-right: 0;
}
.no-gutter [class*='col-'] {
padding-right: 0;
padding-left: 0;
}
/*
gutter
*/
.half-gutter {
margin-right: 0 !important;
}
.half-gutter>[class*='col-'] {
padding-right:0;
}
不同的設(shè)備如果需要隱藏或者顯示某個元素回懦，可以使用
visible-*-*與hidden-*兩套響應(yīng)式工具類气笙。
常用于小屏把導(dǎo)航收起為一個菜單按鈕的場景。
-
在不定數(shù)內(nèi)容列的場景怯晕，如果列高不一致潜圃，因?yàn)閒loat的特性，會出現(xiàn)穿插卡位的bug, 這個時(shí)候就要對周期性的點(diǎn)進(jìn)行清浮操作舟茶。
- 可以使用
:nth-children(4n+5){clear:left}這樣的附加css進(jìn)行控制谭期，不過它不支持IE8堵第。 - 也可以添加插入額外的一個div來實(shí)現(xiàn)，比如
div.clearfix.visible-xs-block隧出。
- 可以使用
對于某一列想去除間隔踏志，我們可以使用
marign-left: -15px來消除間隔。
