Bootstrap 网格系统
Bootstrap 网格系统
Bootstrap 的网格系统允许页面上最多12列。
如果不想单独使用所有 12 列，可以将这些列组合在一起以创建更宽的列:
| 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 |
| 跨度 4 | 跨度 4 | 跨度 4 | |||||||||
| 跨度 4 | 跨度 8 | ||||||||||
| 跨度 6 | 跨度 6 | ||||||||||
| 跨度 12 | |||||||||||
Bootstrap 的网格系统是响应式的，列会根据屏幕大小自动重新排列。在大屏幕上，将内容组织成三列可能会更好，在小屏幕上，内容项组织成一列效果会更好。
提示: 请确保每一行中列的总和等于或小于 12。
网格类
Bootstrap 网格系统有以下 4 个类:
xs适用于手机 - 屏幕宽度小于 768pxsm平板电脑 - 屏幕宽度等于或大于 768pxmd适用于小型笔记本电脑 - 屏幕宽度等于或大于 992pxlg适用于笔记本电脑和台式电脑 - 屏幕宽度等于或大于 1200px
可以将上面的类组合起来创建更具动态性和灵活性的布局。
提示: 每个类都会向上扩展，因此如果您想为 xs 和 sm 设置相同的宽度，只需指定 xs 即可。
网格系统规则
Bootstrap 一些网格系统规则:
- 网格每一行需要放在设置了
.container(固定宽度) 或.container-fluid(全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。 - 使用行来创建水平的列组。
- 内容需要放置在列中，并且只有列可以是行的直接子节点。
- 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
- 列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
- 网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用用三个.col-sm-4 来设置。
- 列宽以百分比为单位，因此它们始终是可变的，并且相对于其父元素自动调整大小
网格的基本结构
以下代码为 Bootstrap 网格的基本结构:
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
</div>
因此，要创建所需的布局，请创建一个容器 (<div
class="container">)。接下来，创建一行 (<div
class="row">)。然后，添加所需的列数 (带有适当
.col-*-* 类的标记)。请注意，数字在 .col-*-* 每行加起来应该是12。
网格选项
下表总结了 Bootstrap 网格系统如何跨多个设备工作:
| 手机 <768px |
平板电脑 >=768px |
小型笔记本电脑 >=992px |
笔记本电脑和台式电脑 >=1200px |
|
|---|---|---|---|---|
| Class 前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Suitable for | 手机 | 平板电脑 | 小型笔记本电脑 | 笔记本电脑和台式电脑 |
| 网格行为 | 始终保持水平 | 以折叠开始，断点以上是水平的 | 以折叠开始，断点以上是水平的 | 以折叠开始，断点以上是水平的 |
| 最大容器宽度 | None (auto) | 750px | 970px | 1170px |
| # 列数 | 12 | 12 | 12 | 12 |
| 最大列宽 | Auto | ~62px | ~81px | ~97px |
| 间隙宽度 | 30px（每列各 15px） | 30px（每列各 15px） | 30px（每列各 15px） | 30px（每列各 15px） |
| 可嵌套 | Yes | Yes | Yes | Yes |
| 偏移量 | Yes | Yes | Yes | Yes |
| 列排序 | Yes | Yes | Yes | Yes |
实例
下一章将展示不同设备的网格系统示例:
