襄陽(yáng)網(wǎng)站建設(shè)|Bootstrap 網(wǎng)格系統(tǒng)
Bootstrap 是一個(gè)響應(yīng)式的、移動(dòng)設(shè)備優(yōu)先的、不固定系統(tǒng),可以隨著設(shè)備或視口大小的增加到 12 列。它包含了用于簡(jiǎn)單的布局選項(xiàng)的預(yù)定義類,也包含了用于生成更多語(yǔ)義布局的功能強(qiáng)大的混合類。
/* 超小設(shè)備(手機(jī),小于 768px) *//* Bootstrap 中默認(rèn)情況下沒有媒體查詢 *//* 小型設(shè)備(平板電腦,768px 起) */@media (min-width: @screen-sm-min) { ... }/* 中型設(shè)備(臺(tái)式電腦,992px 起) */@media (min-width: @screen-md-min) { ... }/* 大型設(shè)備(大臺(tái)式電腦,1200px 起) */@media (min-width: @screen-lg-min) { ... }
網(wǎng)格選項(xiàng)
Bootstrap 網(wǎng)格系統(tǒng)如何跨多個(gè)設(shè)備工作:
超小設(shè)備手機(jī)(<768px) | 小型設(shè)備平板電腦(≥768px) | 中型設(shè)備臺(tái)式電腦(≥992px) | 大型設(shè)備臺(tái)式電腦(≥1200px) | |
---|---|---|---|---|
網(wǎng)格行為 | 一直是水平的 | 以折疊開始,斷點(diǎn)以上是水平的 | 以折疊開始,斷點(diǎn)以上是水平的 | 以折疊開始,斷點(diǎn)以上是水平的 |
最大容器寬度 | None (auto) | 750px | 970px | 1170px |
Class 前綴 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列數(shù)量和 | 12 | 12 | 12 | 12 |
最大列寬 | Auto | 60px | 78px | 95px |
間隙寬度 | 30px (一個(gè)列的每邊分別 15px) | 30px (一個(gè)列的每邊分別 15px) | 30px (一個(gè)列的每邊分別 15px) | 30px (一個(gè)列的每邊分別 15px) |
可嵌套 | Yes | Yes | Yes | Yes |
偏移量 | Yes | Yes | Yes | Yes |
列排序 | Yes | Yes | Yes | Yes |