您好,登錄后才能下訂單哦!
這篇文章主要介紹Bootstrap的柵格系統(tǒng)有什么用,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
什么是柵格系統(tǒng)?
Bootstrap內(nèi)置了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng),隨著屏幕設(shè)備或視口(viewport)尺寸的增加,系統(tǒng)會(huì)自動(dòng)分為最多12列。
柵格系統(tǒng)用于通過一系列的行(row)與列(col)的組合來創(chuàng)建頁(yè)面布局,內(nèi)容就可以放入這些創(chuàng)建好的布局中
注意:
”行(row)“ 必須包含在 .container (固定寬度) 或 .container-fluid(100%寬度)中。
<p class="container"> <p class="row"> <p class="col-md-3">我是文本</p> <p class="col-md-3">我是文本</p> <p class="col-md-3">我是文本</p> <p class="col-md-3">我是文本</p> </p> </p>
表示一個(gè) p 占3列。
柵格參數(shù)
超小屏幕 手機(jī) (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面顯示器 (≥992px) | 大屏幕 大桌面顯示器 (≥1200px) | |
---|---|---|---|---|
柵格系統(tǒng)行為 | 總是水平排列 | 開始是堆疊在一起的,當(dāng)大于這些閾值時(shí)將變?yōu)樗脚帕蠧 | ||
.container 最大寬度 | None (自動(dòng)) | 750px | 970px | 1170px |
類前綴 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列(column)數(shù) | 12 | |||
最大列(column)寬 | 自動(dòng) | ~62px | ~81px | ~97px |
槽(gutter)寬 | 30px (每列左右均有 15px) | |||
可嵌套 | 是 | |||
偏移(Offsets) | 是 | |||
列排序 | 是 |
現(xiàn)在有一個(gè)需求:
如果是大屏幕,一行顯示6列
如果是中屏幕,一行顯示4列
如果是小屏幕,一行顯示3列
如果是超小屏幕,一行顯2列
<p class="container"> <p class="row"> <p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p> <p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p> <p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p> <p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p> <p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p> <p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p> </p> </p>
列偏移
.col-lg-offset-*
" * " 偏移幾個(gè)位置
<p class="container"> <p class="row"> <p class="col-lg-2 col-lg-2">我是文本</p> </p> </p>
在大屏幕的頁(yè)面下偏移兩個(gè)格子
列嵌套
<p class="container"> <p class="row"> <p class="col-lg-5"> <p class="row"> <p class="col-lg-2">我是文本</p> <p class="col-lg-2">我是文本</p> </p> </p> </p> </p>
在列里面再進(jìn)行一次嵌套,會(huì)把列的大小平均分成12份再計(jì)算。
以上是“Bootstrap的柵格系統(tǒng)有什么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。