Web前端知識(shí)培訓(xùn)：柵格系統(tǒng)的行和列

　　Bootstrap柵格系統(tǒng)用于將頁(yè)面布局劃分為等寬的列，隨著屏幕或視口尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為1～12列。

　　柵格系統(tǒng)用于通過(guò)一系列的行(row)與列(column)的組合來(lái)創(chuàng)建頁(yè)面布局。開(kāi)發(fā)者可以將內(nèi)容放入這些創(chuàng)建好的布局中，然后通過(guò)列數(shù)的定義來(lái)模塊化頁(yè)面的布局。

　　與流式布局和彈性盒布局不同的是，柵格系統(tǒng)通過(guò)一系列的行(row)與列(column)的組合來(lái)創(chuàng)建頁(yè)面布局，頁(yè)面的內(nèi)容可以放入這些創(chuàng)建好的布局容器中，并且會(huì)根據(jù)父元素盒子(布局容器)尺寸的大小進(jìn)行適當(dāng)調(diào)節(jié)，從而達(dá)到響應(yīng)式頁(yè)面布局的效果。

　　Bootstrap柵格系統(tǒng)的基本使用方式如下。

　　(1)Bootstrap柵格系統(tǒng)為不同屏幕寬度定義了不同的類，使用非常方便，直接為元素添加類名即可。

　　(2)行(row)必須包含在布局容器.container類或.container-fluid類中，以便為其賦予合適的排列(alignment)和內(nèi)補(bǔ)(padding)。

　　(3)通過(guò)行(row)可以在水平方向創(chuàng)建一組列(column)，并且只有列(column)可以作為行(row)的直接子元素。例如，可以使用3個(gè)類名為col-xs-4的div元素來(lái)創(chuàng)建3個(gè)等寬的列。

　　(4)行(row)使用類名row定義，列(column)使用類名col-*-*定義，內(nèi)容應(yīng)當(dāng)放置于列內(nèi)，列大于12時(shí)，將會(huì)另起一行排列。

　　需要注意的是，Bootstrap柵格系統(tǒng)包含了易于使用的預(yù)定義類，還有強(qiáng)大的mixin用于生成更具語(yǔ)義的布局，讀者可以查看官方文檔進(jìn)行學(xué)習(xí)。