共计 7300 个字符，预计需要花费 19 分钟才能阅读完成。
近日，出名前端工具包 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 图标而不是×。 - 下拉分割线当初更暗，以更好的比照。
-
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 手风琴
以前，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 组件的应用示例：
Floating Label 浮动标签
Floating Label 是 Form 组件的一个新组件。它容许你创立一个输出，其标签一开始看起来像一个占位符，而后当输出收到焦点时，标签会浮动到输出的顶部，高于数值。它也实用于 <select> 元素和 <textarea> 元素。以下是应用浮动标签的示例：
除了新的组件，还有现有组件的新类、新的实用类、新的辅助类，以及更多。
更多信息：https://www.sitepoint.com/bootstrap-5-new-features-examples