关于bootstrap:Bootstrap-发布十周年Bootstrap-5都有什么新功能

近日，出名前端工具包 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 将本人标榜为“世界上最风行的用于构建响应式、挪动优先站点的框架”，并且在 GitHub 上领有 152k 颗星，我认为这种说法并不过分。特地是对于初学者来说，Bootstrap 是开始创立古代和洁净网站的好办法。它能够轻松实现简单的、挪动优先的设计，并提供您在多个我的项目中可能须要的许多组件。

Bootstrap 的学习曲线很低，很适宜不须要构建步骤的动态网站，因为你能够间接从 Bootstrap 的 CDN 援用库。这与其余一些风行的 CSS 框架造成鲜明对比，这些框架可能为应用捆绑器或工作运行器进行优化。

不过，你也应该晓得，Bootstrap 并不是一颗银弹。对于没有教训的人来说，Bootstrap 很容易产生凌乱和简单的标记。就千字节而言，它也是一个绝对较重的库（只管每次公布都在改良），所以如果你只应用它的一两个性能，它可能不是最佳抉择。就像任何形象一样，如果你对底层技术有很好的把握，并能对何时应用它做出理智的决定，那将会有很大的帮忙。

从 Bootstrap 4 降级到 5 一般来说是很容易的。Bootstrap 4 中的大部分组件、它们的类和实用类在 Bootstrap 5 中依然可用。在迁徙时，您应该关注的次要事件是您正在应用的类或组件是否曾经被删除。如果它们被删除了，那么能够应用实用工具类替换它们，或者应用其余办法来实现雷同的后果。你应该关注的第二件事是在组件中从 data- 属性转换到 data-bs-，这些组件须要 JavaScript 作为其性能的一部分。(咱们将在下一节中具体介绍这一点。)

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

Bootstrap 5 为作为库的 Bootstrap 带来了外围更改，包含所需依赖项、浏览器反对等方面的更改。它还对咱们在以前版本中始终应用的组件和类进行了更改。

与之前的版本相比，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 结尾。

在 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" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

这样，你的网站就能够反对 RTL 了。

Bootstrap 5 为库带来了一些新组件。其中一些组件是其余组件的一部分，当初是独立组件。

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

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

Floating Label 是 Form 组件的一个新组件。它容许你创立一个输出，其标签一开始看起来像一个占位符，而后当输出收到焦点时，标签会浮动到输出的顶部，高于数值。它也实用于 <select> 元素和 <textarea> 元素。以下是应用浮动标签的示例：

除了新的组件，还有现有组件的新类、新的实用类、新的辅助类，以及更多。

更多信息：https://www.sitepoint.com/bootstrap-5-new-features-examples

关于bootstrap:Bootstrap-发布十周年Bootstrap-5都有什么新功能

何时应用 Bootstrap（何时不应用）

从 Bootstrap 4 降级到 5

变动的内容

jQuery 不再是一个依赖项

浏览器反对更改

数据属性的更改

修复了一些 Bug

其余变动

有什么新货色？

响应式字体大小当初是默认启用

从右到左的反对

新组件

Accordion 手风琴

Offcanvas 重叠侧边栏

Floating Label 浮动标签