襄阳网站建设|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 |
[声明]原创不易，请转发者备注下文章来源（hbsjsd.cn）【速建时代】。