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

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

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

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

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

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

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

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

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

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