更新時間:2022-08-05 來源:黑馬程序員 瀏覽量:
Bootstrap柵格系統(tǒng)用于將頁面布局劃分為等寬的列,隨著屏幕或視口尺寸的增加,系統(tǒng)會自動分為1~12列。
柵格系統(tǒng)用于通過一系列的行(row)與列(column)的組合來創(chuàng)建頁面布局。開發(fā)者可以將內容放入這些創(chuàng)建好的布局中,然后通過列數的定義來模塊化頁面的布局。
與流式布局和彈性盒布局不同的是,柵格系統(tǒng)通過一系列的行(row)與列(column)的組合來創(chuàng)建頁面布局,頁面的內容可以放入這些創(chuàng)建好的布局容器中,并且會根據父元素盒子(布局容器)尺寸的大小進行適當調節(jié),從而達到響應式頁面布局的效果。
Bootstrap柵格系統(tǒng)的基本使用方式如下。
(1)Bootstrap柵格系統(tǒng)為不同屏幕寬度定義了不同的類,使用非常方便,直接為元素添加類名即可。
(2)行(row)必須包含在布局容器.container類或.container-fluid類中,以便為其賦予合適的排列(alignment)和內補(padding)。
(3)通過行(row)可以在水平方向創(chuàng)建一組列(column),并且只有列(column)可以作為行(row)的直接子元素。例如,可以使用3個類名為col-xs-4的div元素來創(chuàng)建3個等寬的列。
(4)行(row)使用類名row定義,列(column)使用類名col-*-*定義,內容應當放置于列內,列大于12時,將會另起一行排列。
需要注意的是,Bootstrap柵格系統(tǒng)包含了易于使用的預定義類,還有強大的mixin用于生成更具語義的布局,讀者可以查看官方文檔進行學習。