学习 Bootstrap 5 之 Containers

Posted 2022-02-06 _DiMinisH

学习 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%