柵格系統(tǒng)
Bootstrap 提供了一套響應(yīng)式拉庵、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)冈涧，隨著屏幕或?yàn)g覽器窗口（viewport）尺寸的增加碰煌，系統(tǒng)會(huì)自動(dòng)分為最多 12 列叹卷。它包含了易于使用的預(yù)定義類撼港，還有強(qiáng)大的mixin 用于生成更具語(yǔ)義的布局。
柵格系統(tǒng)用于通過(guò)一系列的行（row）與列（column）的組合來(lái)創(chuàng)建頁(yè)面布局骤竹，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中帝牡。
- “行（row）”必須包含在<code> .container</code> （固定寬度）或<code> .container-fluid</code> （100% 寬度）中
- 你的內(nèi)容應(yīng)當(dāng)放置于“列（column）”內(nèi)，并且蒙揣，只有“列（column）”可以作為行（row）”的直接子元素靶溜。
- 類似 <code>.row</code> 和 <code>.col-xs-4</code> 這種預(yù)定義的類，可以用來(lái)快速創(chuàng)建柵格布局懒震。Bootstrap 源碼中定義的 mixin 也可以用來(lái)創(chuàng)建語(yǔ)義化的布局罩息。
- 通過(guò)為“列（column）”設(shè)置 padding 屬性，從而創(chuàng)建列與列之間的間隔挎狸。通過(guò)為 .row 元素設(shè)置負(fù)值 margin 從而抵消掉為 .container 元素設(shè)置的 padding扣汪，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
- 柵格系統(tǒng)中的列是通過(guò)指定1到12的值來(lái)表示其跨越的范圍锨匆。例如崭别，三個(gè)等寬的列可以使用三個(gè) <code>.col-xs-4</code> 來(lái)創(chuàng)建。
- 如果一“行（row）”中包含了的“列（column）”大于 12恐锣，多余的“列（column）”所在的元素將被作為一個(gè)整體另起一行排列茅主。
布局容器
Bootstrap 需要為頁(yè)面內(nèi)容和柵格系統(tǒng)包裹一個(gè)容器。bootstrap提供了兩個(gè)此用處的類<code>.container</code>和<code>.container-fluid</code>土榴。
也就是上面說(shuō)的柵格以及頁(yè)面內(nèi)容必須全部放在行(row)內(nèi)诀姚，而行必須放在容器內(nèi)。
注意玷禽，由于 padding 等屬性的原因赫段，這兩種容器類不能互相嵌套呀打。
- .container 類用于固定寬度并支持響應(yīng)式布局的容器。
<div class="container">
...
</div> - .container-fluid 類用于 100% 寬度糯笙，占據(jù)全部視口（viewport）的容器贬丛。
<div class="container-fluid">
...
</div>
例子
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
