1.1开启篇章Bootstrap5、容器、网格系统

概述：Bootstrap5 与 Bootstrap 3 & 4

1、Bootstrap5 支持所有主要的最新稳定版本浏览器，但不支持 Internet Explorer 11 及以下版本。

2、Bootstrap5 和 Bootstrap 3 & 4 的主要区别在于 Bootstrap5 不再依赖 jQuery，使用了原生的 JavaScript，当然我们如果要想用也可以引入 jQuery。

创建第一个 Bootstrap 5 页面

移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签

 width=device-width 表示宽度是设备屏幕的宽度。

initial-scale=1 表示初始的缩放比例。

容器类

需要一个容器元素来包裹网站的内容。

使用以下两个容器类： 

• .container 类用于固定宽度并支持响应式布局的容器。
• .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器

固定宽度

.container 类用于创建固定宽度的响应式页面。

注意：宽度 (max-width) 会根据屏幕宽度同比例放大或缩小。

注意：超级大屏幕 (≥1400px) 是 Bootstrap 5 新增加的， Bootstrap 4 最大的是特大屏幕 (≥1200px)。 

100% 宽度

.container-fluid 类用于创建一个全屏幕尺寸的容器，容器始终跨越整个屏幕宽度（width 始终为 100%）：

容器内边距

默认情况下，容器都有填充左右内边距，顶部和底部没有填充内边距。 Bootstrap 提供了一些间距类用于填充边距。 比如 .pt-5 就是用于填充顶部内边距：

容器的边框和颜色

边框（border）和颜色（bg-dark、bg-primary等）类用于设置容器的样式

响应式容器

你可以使用 .container-sm|md|lg|xl 类来创建响应式容器。

容器的 max-width 属性值会根据屏幕的大小来改变。

---

Bootstrap5 网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

网格类

网格系统规则

• 需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器，这样就可以自动设置一些外边距与内边距。
• 网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用三个 .col-sm-4 来设置。
• Bootstrap 5 和 Bootstrap 4 使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。

 Bootstrap 5 网格的基本结构

( .col-*-* 类中设置)。 第一个星号 (*) 表示响应的设备: sm, md, lg 或 xl, 第二个星号 (*) 表示一个数字, 同一行的数字相加为 12。

不在每个 col 上添加数字，让 bootstrap 自动处理布局，同一行的每个列宽度相等

两个 "col" ，每个就为 50% 的宽度。三个 "col"每个就为 33.33% 的宽度，四个 "col"每个就为 25% 的宽度

等宽响应式列

在移动设备上，即屏幕宽度小于 576px 【sm大于等于576】时，四个列将会上下堆叠排版: 

 

不等宽响应式列

 

平板和桌面端

在桌面设备的显示器上两个列的宽度各占 50%，如果在平板端则左边的宽度为 25%，右边的宽度为 75%, 在移动手机等小型设备上会堆叠显示。

 

嵌套列

创建两列布局，其中一列内嵌套着另外两列：

偏移列

偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。

为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

例如：.offset-md-4 是把.col-md-4 往右移了四列格。