Bootstrap5容器
本文最后更新于:1 年前
在上一节中,已经介绍到了Bootstrap5的容器中一部分内容,本节将详细介绍Bootstrap5的容器中的其他部分。
两个容器类
- .container 类用于固定宽度并支持响应式布局的容器。
- .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
创建固定宽度的响应式页面
.container用于创建固定宽度的响应式页面。响应式宽度规则如下所示。
注意:超级大屏幕 (≥1400px) 是 Bootstrap 5 新增加的, Bootstrap 4 最大的是特大屏幕 (≥1200px)。
1 |
|
创建全屏幕尺寸的容器
.container-fluid类用于创建一个全屏幕尺寸的容器,容器始终跨越整个屏幕宽度(width 始终为 100%):
1 |
|
设置容器内边距
默认情况下,容器都有填充左右内边距,顶部和底部没有填充内边距。 Bootstrap 提供了一些间距类用于填充边距。 比如 .pt-5 就是用于填充顶部内边距:
1 |
|
Bootstrap 也提供了一些边框(border)和颜色(bg-dark、bg-primary等)类用于设置容器的样式:
1 |
|
创建响应式容器
使用 .container-sm|md|lg|xl 类来创建响应式容器。容器的 max-width 属性值会根据屏幕的大小来改变。
响应式容器变化规则为:
1 |
|
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!