码云前端开发 2021-08-26

Bootstrap 5新增哪些新功能？

文章目录隐藏

何时使用 Bootstrap?
从 Bootstrap 4 升级到 5
变化的内容

jQuery 不再是一个依赖项
浏览器支持更改
数据属性的更改
修复了一些 Bug
其他变化

有什么新东西？

响应式字体大小现在是默认启用
从右到左的支持
新组件

Accordion 手风琴
Offcanvas 重叠侧边栏
Floating Label 浮动标签

近日，知名前端工具包 Bootstrap 官博宣布十周年，其创始人 Mark Otto 回顾了这十年里取得的一些成就与里程碑数据：

文档浏览量超过 25 亿次，每天超过 685,000 次；
自 2015 年以来，npm 下载量为 3.94 亿，仅 2020 年就有超过 1.31 亿次下载。在过去的六年中，每天有 180,000 次。
5000 万次 RubyGems 下载
5700 万次 NuGet 下载
750 万次 Packagist 安装
被超过 22% 的网站使用
被 GitHub 上的 270 万个项目使用
在 GitHub 上超过 21,100 次提交，其中包含近 35,000 个问题和拉取请求

Bootstrap 是最流行的 CSS 库之一。它允许开发人员轻松使用漂亮的样式和组件并创建响应式网站。使用 Bootstrap 可以节省开发人员的时间，尤其是对于几乎每个项目中都使用的组件。

Bootstrap 5（当前的主要版本，于 2021 年 5 月发布）带来了大量的变化和改进，包括添加新组件、新类、旧组件的新样式、更新的浏览器支持、删除一些旧组件，以及更多。

在本文中，我们将介绍 Bootstrap 5 中的更改、删除的内容，以及最令人兴奋的新内容。

何时使用 Bootstrap?

Bootstrap 将自己标榜为“世界上最流行的用于构建响应式、移动优先站点的框架”，并且在 GitHub 上拥有 152k 颗星，我认为这种说法并不过分。特别是对于初学者来说，Bootstrap 是开始创建现代和干净网站的好方法。它可以轻松实现复杂的、移动优先的设计，并提供您在多个项目中可能需要的许多组件。

Bootstrap 的学习曲线很低，很适合不需要构建步骤的静态网站，因为你可以直接从 Bootstrap 的 CDN 引用库。这与其他一些流行的 CSS 框架形成鲜明对比，这些框架可能为使用捆绑器或任务运行器进行优化。

不过，你也应该知道，Bootstrap 并不是一颗银弹。对于没有经验的人来说，Bootstrap 很容易产生混乱和复杂的标记。就千字节而言，它也是一个相对较重的库（尽管每次发布都在改进），所以如果你只使用它的一两个功能，它可能不是最佳选择。就像任何抽象一样，如果你对底层技术有很好的掌握，并能对何时使用它做出明智的决定，那将会有很大的帮助。

从 Bootstrap 4 升级到 5

从 Bootstrap 4 升级到 5 一般来说是很容易的。Bootstrap 4 中的大部分组件、它们的类和实用类在 Bootstrap 5 中仍然可用。在迁移时，您应该关注的主要事情是您正在使用的类或组件是否已经被删除。如果它们被删除了，那么可以使用实用工具类替换它们，或者使用其他方法来实现相同的结果。你应该关注的第二件事是在组件中从 data- 属性转换到 data-bs-，这些组件需要 JavaScript 作为其功能的一部分。(我们将在下一节中详细介绍这一点。)

如果你使用 Bootstrap 的 Sass 文件，有一些变量和 mixin 被重命名。Bootstrap 5 有一个广泛和详细的部分，所有关于定制，以及关于每个组件的 Sass 变量和 mixin 的详细信息，在他们各自的文档页面。

变化的内容

Bootstrap 5 为作为库的 Bootstrap 带来了核心更改，包括所需依赖项、浏览器支持等方面的更改。它还对我们在以前版本中一直使用的组件和类进行了更改。

jQuery 不再是一个依赖项

与之前的版本相比，jQuery 不再是 Bootstrap 的依赖项。现在，你可以在没有它的情况下充分利用 Bootstrap，但你仍然需要 Popper.js。这一变化使得在不需要或使用 jQuery 的项目中使用 Bootstrap 变得更容易——例如在将 Bootstrap 与 React 结合使用时。

如果 Bootstrap 是你网站的一部分，你仍然可以使用 jQuery。如果 Bootstrap 在 window 对象中检测到 jQuery，它会自动将所有组件添加到 jQuery 的插件系统中。因此，如果您从 v4 迁移到 v5，就不需要担心这个更改，并且仍然可以在必要时使用 jQuery 和 Bootstrap。

但如果你在网站中使用 jQuery，但你不希望 Bootstrap 使用 jQuery 呢?你可以通过在文档的 body 元素中添加属性 data-bs-no-jquery 来实现：

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

没有 jQuery，Bootstrap 是如何工作的？例如，在 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 组件。

浏览器支持更改

在 v4 之前，Bootstrap 曾经支持 Internet Explorer (IE) 10 和 11。从 Bootstrap 5 开始，对 IE 的支持已完全取消。因此，如果您的网站需要支持 IE，则在迁移到 v5 时可能应该小心。

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

Firefox 和 Chrome 现在从 60 版开始支持
Safari 和 iOS 支持现在从版本 12 开始
Android 浏览器和 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。如果你在 Bootstrap 中使用 JavaScript 来创建组件，可能不需要做任何改变。但是，如果你的组件只依靠数据属性来运作，你需要将所有以 data 开头的数据属性改为以 data-bs 开头。

修复了一些 Bug

在 Bootstrap 4 的“浏览器和设备”下的文档中，列出了一些浏览器上发生的 Bug。这些 Bug 不再列在 Bootstrap 5 的同一列表中。该列表包括以下内容：

在 iOS 上，鼠标悬停样式被应用到触摸事件的元素上，这是不可取的，因为它被认为是一个意外的行为。
在 Safari 8 及以上版本中使用 .container 会导致打印时字体变小。
Border radius 被验证反馈所覆盖（但可以通过增加一个额外的 .has-validation 类来解决）。

Bootstrap 4 文档中的 bug 和问题列表还详细说明了在不再支持的浏览器版本中出现的 bug。

其他变化

还有更多的变化，要么是微小的，要么不会引起剧烈的、值得注意的变化。这些变化是：

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。
以前，为了使一个元素隐藏，但又能让辅助技术发现它，可以使用 .sr-only 类。现在这个类被替换为 .visually-hidden。
以前，为了使一个交互式元素隐藏起来，但又能让辅助技术发现它，你需要同时使用 .sr-only 和 .sr-only-focusable 类。在 Bootstrap 5 中，你只需要使用 .visually-hidden-focusable 而不需要 .visually-hidden。
具有命名来源的 Blockquotes 现在由 <figure> 元素包裹。以下是 Bootstrap 5 中 Blockquotes 现在的示例：
在以前的版本中，表的样式是继承的。这意味着，如果一个表嵌套在另一个表中，嵌套的表将继承父表。在 Bootstrap 5 中，表格样式是相互独立的，即使它们是嵌套的。
Border utilities现在支持表格。这意味着你现在可以使用边框颜色工具改变表格的边框颜色。下面是一个在 Bootstrap 5 中使用表格的 border utilities 的例子。
面包屑的默认样式已经更改，删除了在以前版本中默认的灰色背景、填充和边框半径。下面是 Bootstrap 5 中面包屑样式的示例：
使用 left 和 right 来引用使用 start 和 end 的位置的类的命名已更改。例如，下拉列表中的 .dropleft 和 .dropright 分别替换为 .dropstart 和 .dropend 。
与前一点类似，使用 l 表示左和 r 表示右的实用程序类现在分别使用 s 表示开始和 e 表示结束。例如，.mr-* 现在是 .me-*。
用于范围输入的 .form-control-range 类现在是 .form-range。
Gutters 现在设置为 rem，而不是以前的 px。
.no-gutters 已经被改名为 .g-0，作为新添加的 Gutters 类的一部分（在后面的章节中会有更多介绍）。
链接现在默认下划线，即使没有悬停。
自定义表单元素类的名称已经从 .custom-* 变成了表单组件类的一部分。例如，.custom-check 被 .form-check 所取代，.custom-select 被 .form-select 所取代，以此类推。
现在需要在标签中添加 .form-label。
Alert、面包屑、卡片、下拉菜单、列表组、模态、弹出窗口和工具提示现在使用相同的填充值，使用 $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> Checked
  </label>
</div>

在 Bootstrap 5 中，可以用一种更简单的方式来完成：

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

按钮的 active 和 hover 状态在颜色上增加了对比。
关闭按钮类现在从 .close 重命名为 .btn-close，并使用 SVG 图标而不是 &times。
下拉分割线现在更暗，以更好的对比。

Navbar 内容现在应该被包装在容器元素中。例如在 Bootstrap 4 中：

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

在 Bootstrap 5 中变成：

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

popover 组件中的 .arrow 类现在被 .popover-arrow 替换，Tooltip 组件中的 .arrow 类现在被 .tooltip-arrow 替换。
默认 Toast 持续时间更改为 5 秒。
工具提示、下拉菜单和弹出窗口组件中 fallbackPlacements 的默认值已更改为数组 ['top', 'right', 'bottom', 'left']。
.text-monospace 已重命名为 .font-monospace。
.font-weight-* 已重命名为 .fw-*，.font-style-* 已重命名为 .fst-*。
.rounded-sm 和 .rounded-lg 现在已被一系列从 0 到 3 的四舍五入类 .rounded-* 所取代。

有什么新东西？

最后，在版本 5 中，Bootstrap 为它的库添加了许多令人兴奋的新功能。其中一些变化包括新的特性、新的受支持的概念、新的组件、新的实用程序类等等。

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

响应性字体大小（RFS）在以前的 Bootstrap 版本中出现过，但默认是禁用的。Bootstrap 5 默认启用了 RFS，使 Bootstrap 中的字体更具响应性。RFS 是 Bootstrap 创建的一个辅助项目，最初是为了响应地缩放和调整字体大小。现在，它也能为 margin、padding、box-shadow 等属性做同样的事情。

它所做的基本上是根据浏览器的尺寸计算出最合适的数值，这些计算在编译时被翻译成计算函数。使用 RFS 也抛弃了以前使用 px 的做法，而使用 rem，因为它有助于实现更好的响应性。

如果你在 Bootstrap 中使用 Sass 文件，你现在可以使用由 RFS 制作的 mixins，包括字体大小、边距、填充等等，这允许你确保你的组件和样式是响应的。

从右到左的支持

Bootstrap 5 使用 RTLCSS 增加了从左到右（RTL）的支持。由于 Bootstrap 在全世界范围内使用，因此，开箱即提供 RTL 支持是一个重要的步骤。出于这个原因，Bootstrap 5 放弃了特定的方向命名（例如，使用 left 和 right），转而使用 start 和 end。这使得 Bootstrap 足够灵活，可以同时处理从左到右 (LTR) 和 RTL 的网站。例如，.dropleft 现在是 .dropstart，.ml-* 现在是 .ms-*，等等。

为了让 Bootstrap 识别并在你的网站上应用 RTL 风格，你需要将 <html> 的 dir 设置为 rtl，并添加一个带有网站 RTL 语言的 lang 属性。例如，lang="ar"。

最后，你需要包含 Bootstrap 的 RTL CSS 文件：

<link rel="stylesheet" rel="nofollow" href="https://mybj123.com/links?url=aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4wLjIvZGlzdC9jc3MvYm9vdHN0cmFwLnJ0bC5taW4uY3Nz" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

这样，你的网站就可以支持 RTL 了。

新组件

Bootstrap 5 为库带来了一些新组件。其中一些组件是其他组件的一部分，现在是独立组件。

Accordion 手风琴

以前，Accordion 是 Collapsible 组件的一部分，而不是它自己的组件。在 Bootstrap 5 中，Accordion 是一个新的组件。Accordion 有一个新的类，即 .accordion，它里面有一个 accordion 项目的列表。此外，与之前 Bootstrap 4 中的风格相比，Accordion 有一个新的风格。下面是 accordion 组件的一个例子。

Offcanvas 重叠侧边栏

另一个新组件是 Offcanvas，它允许您创建一个重叠的侧边栏。这个侧边栏通常用于在小型设备上显示菜单。你可以通过在 LTR 中使用 .offcanvas-start 代表左边，.offcanvas-top 代表上面，.offcanvas-end 代表 LTR 中的右边，以及 .offcanvas-bottom 代表下面，将其放置在页面的任何一边。你也可以指定 Offcanvas 是否应该有背景。下面是 Offcanvas 组件的使用示例：