学习 Bootstrap 5 之 容器
- 容器 (Containers)
-
- 1. 什么是容器?
- 2. 三种容器
-
- (1). .container
- (2). .container-fluid
- (3). .container-{断点}
- (4). 容器宽度表格
容器 (Containers)
Bootstrap 5 官方文档
1. 什么是容器?
??容器是Bootstrap一个基本的构建块, 它包含、填充和对齐给定设备或视口中的内容。
??可以简单理解为人家写好的样式, 只需要我们在class种加入这些容器对应的名字, 就可以使用这些已经写好的样式了, 但是, 要想使用他们, 需要先了解他们
2. 三种容器
??Bootstrap有三种容器
(1). .container
??这种容器在每一个响应式的断点中都设置了一个最大宽度值, 即当视口宽度达到这些指定的值, 则使用了这个容器的标签显示出来的东西宽度会发生改变
(2). .container-fluid
??这种容器的宽度是父元素宽度的100%, 即无论视口宽度是多少, 这种容器中的标签显示出来的宽度都是父元素宽度的100%
(3). .container-{断点}
??这种容器的宽度取决于设置的断点的值, 如果大于断点的宽度, 则按照断点宽度的值, 否则就是父元素宽度的100%
(4). 容器宽度表格
| 类名 | Extra small < 576px |
Small ≥ 576px |
Medium ≥ 768px |
Large ≥ 992px |
Extra Large ≥ 1200px |
Extra extra Large ≥ 1400px |
|---|---|---|---|---|---|---|
| .container | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .container-md | 100% | 100% | 720px | 960px | 1140px | 1320px |
| .container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
| .container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
| .container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
| .container-fluid | 100% | 100% | 100% | 100% | 100% | 100% |
例如 ≥ 1400px的意思是, 当视口宽度大于1400像素时, 如果容器使用了container, 则宽度1320像素, 如果容器使用了container-fluid, 则宽度是父元素宽度的100%