Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)，網(wǎng)格系統(tǒng)類似一個(gè)表格。接下來通過本文給大家介紹Bootstrap網(wǎng)格基礎(chǔ)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧

Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動(dòng)分為最多12列。

網(wǎng)格系統(tǒng)類似一個(gè)表格,有行和列,它必須放置在一個(gè)類型設(shè)置為container的容器里，可以是div,內(nèi)容放置在列內(nèi)，網(wǎng)頁設(shè)計(jì)中的網(wǎng)格用于布局內(nèi)容，讓網(wǎng)站易于瀏覽，下面是一個(gè)用bootstrap網(wǎng)格布局的例子。

<div>
<div>col2</div>
<div>col10</div>
</div>

顯示效果如下:

加了Class=”row”的樣式表示行，加了class=”col-sm-2”的樣式表示列，系統(tǒng)將整個(gè)屏幕分為12份，col-sm-2表示該列跨2份，col-sm-10比表示該列跨10份。顯示的效果就會如上圖所示，表示一行兩列，第一列占2份，第二列占10份。

bootstrap是一個(gè)響應(yīng)式的前端框架，體現(xiàn)在網(wǎng)格系統(tǒng)中就是對應(yīng)于不同的顯示大小的設(shè)備,可以呈現(xiàn)出不同的顯示效果。如下所示：

<div class="row">   
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> 
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-個(gè)4</div> 
</div>

Col-md-8表示在中等屏幕比如普通臺式機(jī)和筆記本下該列占8份。Col-xs-12表示在小屏幕比如平板電腦下該列占12份。以上代碼表示在普通臺式機(jī)和筆記本下一行兩列，第一列占8份，第二列占4份，在平板電腦下一行兩列，第一列占12份，第二列占6份。通過此種方式達(dá)到在不同的顯示設(shè)備上展示不同效果?？梢酝ㄟ^調(diào)整瀏覽器的大小來模擬一下這兩種情況。

下圖表示Bootstrap 的網(wǎng)格系統(tǒng)是如何在多種屏幕設(shè)備上工作的