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