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 |
实例
下一章将展示不同设备的网格系统示例: