首頁技術(shù)文章正文

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

更新時間:2022-08-05 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

  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ù)父元素盒子(布局容器)尺寸的大小進行適當(dāng)調(diào)節(jié),從而達到響應(yīng)式頁面布局的效果。

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

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

  (2)行(row)必須包含在布局容器.container類或.container-fluid類中,以便為其賦予合適的排列(alignment)和內(nèi)補(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ù)定義類,還有強大的mixin用于生成更具語義的布局,讀者可以查看官方文檔進行學(xué)習(xí)。

分享到:
在線咨詢 我要報名
和我們在線交談!