Bootstrap 5 新特性

教程
Bootstrap

Bootstrap作为最流行的CSS库之一，使开发者能轻松运用美观的样式与组件，构建响应式网站。使用Bootstrap能节省开发者时间，尤其在几乎每个项目都会用到的组件上。

Bootstrap 5（当前主要版本，2021年5月发布）带来了众多变化与改进，包括新增组件、新类、旧组件的样式更新、浏览器支持更新、移除部分旧组件等。

本文将探讨Bootstrap 5中的变化、弃用内容以及最令人期待的新增功能。

何时使用Bootstrap（以及何时避免使用）

Bootstrap自称是“全球最受欢迎的响应式、移动优先网站构建框架”，其在GitHub上拥有15.2万星标，这一说法并不夸张。尤其对初学者而言，Bootstrap是创建现代、简洁网站的绝佳起点。它简化了复杂、移动优先设计的实现，并提供了多个项目中可能需要的多种组件。

Bootstrap学习曲线平缓，非常适合无需构建步骤的静态网站，只需通过Bootstrap的CDN引用库即可，这与某些优化用于打包工具或任务运行器的其他流行CSS框架形成对比。

你也应该意识到，尽管Bootstrap并非万能钥匙。对于初学者来说，Bootstrap可能会导致产生混乱和复杂的标记。此外，从文件大小上看，它是一个相对较重的库（尽管每次更新都在改进这一点），因此如果你只用到它的一两个特性，它可能不是最佳选择。与任何抽象层一样，如果你对底层技术有深入了解，并能明智地决定何时使用它，那么Bootstrap将极大地助力于你。

从Bootstrap 4升级到5

从Bootstrap 4升级到5通常相当简单。大多数在Bootstrap 4中可用的组件、类和实用类在Bootstrap 5中依然存在。迁移时的主要关注点是检查你使用的类或组件是否已被移除。如果被移除，通常有替代方案或通过实用类实现相同效果的方法。第二个需要注意的点是将组件中需要JavaScript功能的部分从data-*属性切换到data-bs-*。（我们将在下一节详细讨论这一点。）

如果你使用Bootstrap的Sass文件，一些变量和混合宏已被重新命名。Bootstrap 5在其文档中有一个关于定制的详尽章节，以及每个组件对应的Sass变量和混合宏的详细说明。

变化之处

Bootstrap 5 对作为库的Bootstrap进行了核心改动，包括所需的依赖项变更、浏览器支持等方面的调整。同时，它也对我们在先前版本中常用的组件和类进行了改动。

不再依赖jQuery

与前版本相比，jQuery不再是Bootstrap的依赖项。现在，你可以在不使用jQuery的情况下，完全发挥Bootstrap的功能，但仍需Popper.js。这一变化使得在不使用或不需要jQuery的项目中，如与React结合使用Bootstrap时，更为便捷。

如果你的网站中已包含jQuery，你仍可与Bootstrap结合使用。如果Bootstrap检测到window对象中的jQuery，它会自动将所有组件添加到jQuery的插件系统中。因此，从v4迁移到v5时，无需担心此变更，仍可根据需要使用jQuery与Bootstrap。

但若你的网站使用jQuery，却不希望Bootstrap使用它，该如何操作？你只需在文档的body元素上添加data-bs-no-jquery属性即可：

<body data-bs-no-jquery="true">
</body>

那么，Bootstrap如何在无jQuery的环境下运作？例如，在v4中，你可能会使用以下JavaScript代码来创建一个Toast元素：

$('.toast').toast()

在Bootstrap 5中，如果你的网站已使用jQuery，你仍可使用相同代码创建Toast元素。若不使用jQuery，则需改用如下代码创建Toast元素：

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

这里仅使用纯JavaScript查询文档中具有.toast类的元素，然后使用new bootstrap.Toast()在该元素上初始化一个Toast组件。

浏览器支持变更

在Bootstrap 4及之前版本中，一直支持Internet Explorer（IE）10和11。但从Bootstrap 5开始，已完全放弃对IE的支持。因此，如果你的网站需要兼容IE，那么在升级至v5时需格外小心。

浏览器支持的其他变化包括：

  • Firefox和Chrome的支持起始版本现为60
  • Safari和iOS的支持起始版本现为12
  • Android Browser和WebView的支持起始版本现为6

数据属性变更

Bootstrap 5更改了通常用于其JavaScript功能组件的数据属性命名。以往，依赖JavaScript功能的组件大多以data-开头的数据属性。例如，在Bootstrap 4中创建Tooltip组件：

<button 
  type="button" 
  class="btn btn-secondary" 
  data-toggle="tooltip" 
  data-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

注意使用了data-toggle和data-placement。在Bootstrap 5中，这些组件的数据属性现以data-bs开头，以便于为Bootstrap属性命名空间。例如，在Bootstrap 5中创建Tooltip组件：

<button 
  type="button" 
  class="btn btn-secondary" 
  data-bs-toggle="tooltip" 
  data-bs-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

我们不再使用 `data-toggle` 和 `data-placement`，而是采用 `data-bs-toggle` 和 `data-bs-placement`。如果你使用 JavaScript 在 Bootstrap 中创建组件，可能无需做任何改动。但若你的组件仅依赖数据属性来运作，则需将所有以 `data` 开头的数据属性更改为以 `data-bs` 开头。

修复的错误

在 Bootstrap 4 的文档中，浏览器和设备部分列出了某些浏览器上出现的错误。这些错误在 Bootstrap 5 的同一列表中已不再提及。该列表包含以下内容：

  • 在 iOS 上，触摸事件的元素被应用了悬停样式，这种行为被视为不期望的意外行为。
  • 在 Safari 8 及以上版本中使用 `.container` 会导致打印时字体大小过小。
  • 边框半径被验证反馈覆盖（但可以通过添加额外的 `.has-validation` 类来修复）。

Bootstrap 4 文档中列出的错误和问题还包括那些在不再受支持的浏览器版本上发生的问题。

其他变化

还有许多其他变化，这些变化或是微小的，或是不会造成显著的、可察觉的改变。这些变化包括：

  • Bootstrap 5 现采用 Popper v2，请确保升级您的 Popper 版本。Popper v1 已不再适用，因为 Bootstrap 5 需要 @popperjs/core 而非先前的 popper.js。

  • Bootstrap 5 现可作为浏览器模块使用，采用 构建为 ECMAScript 模块 的 Bootstrap 版本。

  • 由于 Libsass 和 Node Sass（Bootstrap 4 中使用）现已废弃，Bootstrap 5 采用 Dart Sass 将源 Sass 文件编译为 CSS。

  • 部分Sass变量值有所变动，例如$zindex-modal从1050调整为1060，$zindex-popover从1060调整为1070，等等。因此，建议查阅Bootstrap 5文档中每个组件或工具类的Sass变量。

  • 以往，为了隐藏元素同时保持其对辅助技术可访问，使用了.sr-only类。现在该类已被.visually-hidden取代。

  • 以往，为了使交互元素隐藏但仍可被辅助技术发现，需要同时使用.sr-only和.sr-only-focusable两个类。而在Bootstrap 5中，只需使用.visually-hidden-focusable，无需再添加.visually-hidden。

  • 带有命名来源的引用块现在由<figure>元素包裹。

    以下是Bootstrap 5中引用块的示例：

  • 在之前的版本中，表格样式是继承的。这意味着如果一个表格嵌套在另一个表格内，嵌套的表格将继承父表格的样式。而在Bootstrap 5中，即使表格嵌套，各自的表格样式也是相互独立的。

  • 边框工具现在支持表格。这意味着你可以使用边框颜色工具来改变表格的边框颜色。

    以下是Bootstrap 5中使用边框工具与表格的一个示例：

  • 面包屑的默认样式已更改，移除了先前版本中的默认灰色背景、内边距和边框半径。

    这是Bootstrap 5中面包屑样式的示例：

  • 已更改使用left和right来指代位置的类名，改为使用start和end。例如，下拉菜单中的.dropleft和.dropright分别被替换为.dropstart和.dropend。

  • 类似地，使用l代表left和r代表right的工具类现在分别使用s代表start和e代表end。例如，.mr-*现在变为.me-*。

  • 用于范围输入的.form-control-range类现已更名为.form-range。

  • 间距现在以rems设置，而非之前的px。

  • .no-gutters已重命名为.g-0，作为新增间距类的一部分（后续章节将详细介绍）。

  • 链接现默认带下划线，即便未悬停也是如此。

  • 自定义表单元素类名已从`.custom-*`改为融入表单组件类名。例如，`.custom-check`替换为`.form-check`，`.custom-select`替换为`.form-select`，以此类推。

  • 现在需要在标签上添加`.form-label`。

  • 警告框、面包屑、卡片、下拉菜单、列表组、模态框、弹出框和工具提示现在都采用了相同的内边距值，使用`$spacer`变量定义。

  • 徽章元素的默认内边距已由`.25em/.5em`调整为`.35em/.65em`。

  • 切换按钮的包装器通常与复选框和单选按钮一起使用。在Bootstrap 4中，通过以下标记实现了一个切换按钮复选框：

    <div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> 已选中
  </label>
</div>

    而在Bootstrap 5中，这一过程可以更加简化：

    <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">已选中</label>

  • 按钮的active和hover状态现在颜色对比度有所提高。

  • 轮播图的右箭头图标现在采用来自Bootstrap Icons的SVG。

  • 关闭按钮的类名已从.close更名为.btn-close，并使用SVG图标替代了&times;。

  • 下拉菜单的分隔线现在颜色更深，以增强对比度。

  • 导航栏内容现在应包裹在一个容器元素内。例如，在Bootstrap 4中：

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">导航栏</a>
  ...
</nav>

    而在Bootstrap 5中变为：

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">导航栏</a>
    ...
  </div>
</nav>

  • 弹出框组件中的.arrow类现已被.popover-arrow替换，而工具提示组件中的.arrow类则被.tooltip-arrow取代。

  • 弹出框选项whiteList已重命名为allowList。

  • 默认的Toast显示时长已更改为5秒。

  • 工具提示、下拉菜单和弹出框组件中fallbackPlacements的默认值已更改为数组['top', 'right', 'bottom', 'left']。

  • .text-monospace已重命名为.font-monospace。

  • .font-weight-*已重命名为.fw-*，.font-style-*重命名为.fst-*。

  • .rounded-sm和.rounded-lg现已被一系列从0到3的圆角类.rounded-*所取代。

哪些功能已被移除

变革总是伴随着代价。随着新版本的发布，带来了变化与增强，同时也移除了之前支持的一些旧特性。在此新版本中，Bootstrap的一些组件、工具类或其他特性已被移除。

大多数从Bootstrap 5中移除的项，是因为可以通过使用工具类而非独立组件来实现相同效果。此外，一些被移除的项目已证实未被使用或不必要。

以下是从Bootstrap 5中移除的内容列表：

  • 如前一节所述，已完全取消对IE的支持。

  • 徽章颜色类（例如，.badge-primary）已被弃用，转而使用颜色工具类（例如，.bg-primary）。

  • .badge-pill徽章类，赋予徽章药丸样式，已被弃用，转而使用.rounded-pill，实现相同效果。

  • 已移除.btn-block按钮类，因为使用显示工具类如.d-block可以达到相同效果。

  • 之前可用的Masonry.card-columns卡片布局已被弃用，因为它存在许多副作用。

  • 下拉组件的flip选项已被移除，转而采用Popper的配置。

  • Jumbotron组件已被移除，因为通过使用工具类同样可以实现相同效果。

  • 部分排序工具类（.order-*）已被移除，这些类之前范围从1到12，现在则调整为1到5。

  • 媒体组件已被移除，因为同样的效果可以通过工具类实现。

  • 已移除.thead-light和.thead-dark类，因为.table-*变体类可以应用于所有表格元素。

  • 已移除.pre-scrollable类，因其使用频率不高。

  • 已移除.text-justify类，原因是响应性问题，同时.text-hide类也因方法过时不应再使用。此外，.text-*类不再为链接添加悬停或焦点状态。这些.text-*类应替换为.link-*类。

  • 含有多个输入或组件的输入组无需再使用.input-group-append和.input-group-prepend。应纳入组的元素可直接作为.input-group的子元素添加。

    以下是一个使用包含多个输入的输入组的示例：

  • .form-group、.form-row 和 .form-inline 已被布局类取代。

  • .form-text 不再设置 display 属性。元素的显示将取决于其本身是块级还是行内元素。

  • 对带有 multiple 属性的 <select> 元素，验证图标已被移除。

  • .card-deck 类已被网格类取代。

  • 默认情况下，负边距已被禁用。

  • .embed-responsive-item 元素已被移除，取而代之的是对所有比例子元素应用样式，这在之前是响应式嵌入（更多信息见下一节）。

新特性

最终，Bootstrap 5 带来了许多令人振奋的新增功能到其库中。这些变化包括新特性、新支持的概念、新组件、新实用工具类等。

响应式字体大小现默认启用

响应式字体大小（RFS）在之前的 Bootstrap 版本中存在，但默认是禁用的。Bootstrap 5 默认启用 RFS，使得 Bootstrap 中的字体更具响应性。RFS 是 Bootstrap 创建的一个辅助项目，最初用于响应式地缩放和调整字体大小。如今，它还能对边距、填充、阴影等属性进行同样的处理。

其基本原理是根据浏览器尺寸计算出最合适的值，并在编译时将这些计算转化为 calc 函数。使用 RFS 还摒弃了以往使用 px 的做法，转而采用 rem，这有助于更好地实现响应性。

如果你正在使用 Bootstrap 的 Sass 文件，你现在可以使用 RFS 提供的混合宏，包括 font-size、margin、padding 等，这确保了你的组件和样式能够响应式调整。

从右至左支持

Bootstrap 5 通过集成RTLCSS实现了对从右到左（RTL）布局的支持。鉴于Bootstrap在全球范围内的广泛应用，这一新增的RTL支持无疑是一个重大且意义深远的改进。为此，Bootstrap 5 摒弃了传统的方向性命名（如使用left和right），转而采用start和end，使得框架能够灵活适应从左到右（LTR）和RTL两种网页布局。例如，.dropleft现已更名为.dropstart，.ml-*变为.ms-*等。

要在网站上启用Bootstrap的RTL样式，需将<html>的dir属性设置为rtl，并添加与网站RTL语言对应的lang属性，例如lang="ar"。

最后，还需引入Bootstrap的RTL CSS文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

完成以上步骤后，您的网站便能支持RTL布局。

新增断点

Bootstrap 5 新增了xxl断点，针对屏幕宽度大于等于1400px的设备。此前，最高断点为xl，适用于屏幕宽度大于等于1200px的设备。这一更新提升了对大屏幕设备的响应性，因为原有的xl断点已不足以满足需求。

使用新的断点与所有其他断点相似。例如，要为宽度大于或等于1400px的设备应用内边距，可以通过类.p-xxl-2实现。

改进的文档

虽然这并非库本身的一部分，但值得注意的是Bootstrap文档的改进。Bootstrap 5的文档内容组织得更好，详细内容较多的组件现在拥有自己的部分。例如，Bootstrap 4中的表单组件仅是一页，包含了所有组件。而在Bootstrap 5中，表单组件的文档独立成章，包含表单控件、选择框、输入组等不同子组件的子部分。

此外，通过侧边栏，文档的导航现在更加简便，尤其对于小屏幕设备。在Bootstrap 4中，小设备上看不到内容目录侧边栏，使得查找页面上的所需部分变得困难。而在Bootstrap 5中，内容目录在所有屏幕尺寸上始终可见。

再者，在Bootstrap 5中，你可以在每个组件的页面上找到所有Sass变量、混合宏和函数。以往，仅有一个主题页面，其中包含了一些关于如何更改Bootstrap主题变量的细节。现在，有一个自定义部分专门详细介绍如何定制Bootstrap的主题。

新组件

Bootstrap 5引入了一些新的组件到库中。其中一些组件原本是其他组件的一部分，现在成为了独立的组件。

折叠面板

之前，折叠面板是可折叠组件的一部分，并非独立组件。在Bootstrap 5中，折叠面板是一个新组件。伴随折叠面板而来的是一个新类，.accordion，它内部包含一系列折叠项。此外，与Bootstrap 4相比，折叠面板拥有了新的样式。以下是折叠面板组件的一个示例：

Bootstrap 5还增加了一些类来改变折叠面板的样式。例如，.accordion-flush移除了默认折叠面板的一些样式，如背景或边框颜色。你还可以通过从其.accordion-collapse元素中移除data-bs-parent属性，使折叠项始终处于展开状态。

Offcanvas

另一个新组件是Offcanvas，它允许你创建一个覆盖式的侧边栏。这是通常用于网站上，在较小设备上显示菜单的侧边栏。你可以通过使用.offcanvas-start（对于从左至右的语言，如英语，表示左侧），.offcanvas-top表示顶部，.offcanvas-end（对于从左至右的语言表示右侧），以及.offcanvas-bottom表示底部，来指定Offcanvas的位置。你还可以指定Offcanvas是否应带有背景。以下是使用Offcanvas组件的一个示例：

浮动标签

浮动标签是表单组件中的一个新构件。它使得输入框的标签在初始状态时看起来像占位符，一旦输入框获得焦点，标签便会浮动至输入框顶部，位于输入值之上。此功能同样适用于<select>元素和<textarea>元素。以下是一个使用浮动标签的示例：

其他新增内容

除了新的组件，Bootstrap 5还为现有组件引入了新的类，增加了实用类、辅助类等。以下是Bootstrap 5中所有其他新增内容的列表：

  • 新增了类.row-cols-auto，使列能够采用其自然宽度。

  • A new utility class has been added to justify content called .justify-content-evenly.

  • 以往，列间距是通过间距工具类实现的。现在，您可以使用新的间距布局工具来设置列间距。要设置水平间距，请使用.gx-*。要设置垂直间距，请使用.gy-*。要同时设置水平和垂直间距，请使用.g-*。

  • A start script has been added to the Bootstrap package when installed with npm or Yarn. The start script compiles the CSS and JavaScript files, builds the documentation, then starts a local server.

  • 垂直对齐工具类现在可用于表格。

  • A new class .caption-top has been added, which allows placing the caption of a table at the top rather than at the bottom.

  • 现在可以通过CSS变量--bs-breadcrumb-divider更改面包屑中的分隔符。

    以下是将分隔符更改为>>的示例：

  • 新增了适用于轮播图的深色变体样式类.carousel-dark，以及适用于下拉菜单的深色变体样式类.dropdown-menu-dark。

  • 下拉菜单新增了自动关闭选项，可改变默认的关闭行为。默认情况下，点击下拉菜单外部或下拉菜单项时，菜单会关闭。通过将data-bs-auto-close数据属性设置为inside，可以使菜单在点击下拉菜单项时关闭，而点击外部时不关闭。若设置为outside，则仅在点击下拉菜单外部时关闭。设置为false则仅在再次点击下拉按钮时关闭。若通过JavaScript初始化下拉菜单，可使用autoClose选项代替数据属性。以下是其使用示例：

  • 表单中的文件输入样式现已优化。

  • A new color input has been added, using the class .form-control-color.

  • A new datalists input type has been added, which simulates a typeahead select field. Here’s an example:

  • Sass变量中新增了多种颜色色调和阴影。

  • 新增了两个显示标题尺寸.display-5和.display-6。

  • 新增了.btn-close-white白色关闭按钮变体。

  • 下拉菜单现在可以包含包装在<li>元素中的.dropdown-items。

  • 列表组中的项现可通过新增的.list-group-numbered类进行编号。

  • 分页组件中的链接新增了transition属性，提升了其样式效果。

  • 新增了.bg-body类，用于将页面背景色设为白色。

  • 引入了新的定位工具类，用于设置元素的top、left、right或bottom属性，例如.top-0。

  • 新增了.translate-middle-x和.translate-middle-y类，分别用于轻松地将绝对定位元素水平和垂直居中。

  • 新增了从1到5的边框宽度工具类.border-*。

  • 新增了显示工具类.d-grid和间距工具类.gap。

  • 新增了行高工具类.lh-1、.lh-sm、.lh-base和.lh-lg。

  • 新增了比例辅助类，取代了之前的响应式嵌入辅助类。类名通过将embed-responsive替换为ratio，将by替换为x来重命名。例如，之前的.embed-responsive-16by9现在变为.ratio-16x9。

  • A new option popperConfig has been added to Dropdowns, Popovers and Tooltips. This option can be used to make changes to Popper’s configurations.

  • 新增了.fs-*字体大小工具类，因为RFS默认已启用。

结论

Bootstrap在过去十年中一直是领先的CSS库之一。它使开发者能够轻松构建响应式网站并提供良好的用户体验。随着Bootstrap 5的添加和改动，这一过程将变得更加简单，并有助于改进网站设计，提供优质用户体验。如果你正在使用Bootstrap 4并考虑迁移到Bootstrap 5，迁移过程简单，可能不需要做太多改动。

关于Bootstrap 5的常见问题（FAQs）

Bootstrap 4和Bootstrap 5之间有哪些主要区别？

Bootstrap 4和Bootstrap 5之间最显著的区别是后者移除了jQuery。Bootstrap 5现在使用原生JavaScript，使其更轻量、更快速。另一个重大变化是将文档静态站点生成器从Jekyll切换到Hugo。Bootstrap 5还引入了一个新的工具类API，扩展了颜色调色板，并更新了表单控件。

如何从Bootstrap 4迁移到Bootstrap 5？

从Bootstrap 4迁移到Bootstrap 5需要经过几个步骤。首先，你需要移除jQuery并将其替换为纯JavaScript。接着，更新你的Bootstrap CSS和JS链接至最新版本。同时，需要将旧的类替换为Bootstrap 5中引入的新类。最后，更新你的表单控件，并查看官方的Bootstrap迁移指南以了解任何其他必要的更改。

Bootstrap 5有哪些新特性？

Bootstrap 5引入了多项新特性。它现在使用纯JavaScript替代了jQuery，使其更轻量和快速。此外，它还引入了一个新的实用工具API，提供了更灵活的定制选项，扩展了颜色调色板，更新了表单控件，并新增了一个SVG图标库。文档方面也有所改进，从Jekyll切换到了Hugo。

Bootstrap 5中的新实用工具API是如何工作的？

Bootstrap 5中的新实用工具API允许进行更灵活的定制。它允许你创建自己的实用工具类，控制生成哪些实用工具，甚至修改现有的实用工具。这使得根据你的具体需求和偏好定制Bootstrap变得更加容易。

Bootstrap 5中扩展的颜色调色板有什么作用？

Bootstrap 5中扩展的颜色调色板提供了更多的定制选项。它包含了一个更广泛的颜色范围，使你能够创造出更多样化和视觉上吸引人的设计。这有助于更容易地将你的网站或应用程序的颜色方案与你的品牌颜色相匹配。

Bootstrap 5中的表单控件有哪些更新？

在Bootstrap 5中，表单控件已更新为使用CSS而非JavaScript，以提升性能和简化操作。同时，它们采用了更现代、更简洁的设计风格。此外，自定义表单已被新的表单控件取代，以增强一致性。

Bootstrap 5中的新SVG图标库是什么？

Bootstrap 5引入的新SVG图标库提供了超过1,000个免费、高质量的图标。这些图标可定制，适用于网站或应用的多个部分，如按钮、菜单和警告。它们还针对可访问性进行了优化。

Bootstrap 5的文档有哪些改进？

在Bootstrap 5中，文档通过从Jekyll切换到Hugo静态网站生成器得到了改进，使得文档更快速、更易于使用。同时，增加了更多示例和解释，帮助用户有效理解如何使用Bootstrap。

Bootstrap 5是否兼容所有浏览器？

Bootstrap 5兼容所有主流浏览器的最新版本，包括Chrome、Firefox、Safari和Edge。但它不再支持Internet Explorer，因为该浏览器已过时，不支持许多现代网络技术。

如何开始使用Bootstrap 5？

要开始使用Bootstrap 5，可以从官方Bootstrap网站下载。也可以通过CDN将Bootstrap包含到项目中。获得Bootstrap后，即可在HTML文件中使用其类和组件。务必查阅官方Bootstrap文档以获取更多信息和示例。

Source:
https://www.sitepoint.com/bootstrap-5-new-features-examples/