Bootstrap 5都有什么新功能 bootstrap

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 来实现：

没有jQuery，Bootstrap是如何工作的？例如，在v4中，你可以在JavaScript中使用以下代码来创建一个Toast元素。
$('.toast').toast()
在Bootstrap 5中，如果你的网站已经使用了jQuery，你可以使用同样的代码来创建一个Toast元素。如果没有jQuery，你需要使用类似下面的代码来创建一个Toast元素：
const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
returnnew 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组件：

请注意 data-toggle 和 data-placement 的用法。在Bootstrap 5中，这些组件的数据属性现在以 data-bs 开头，以方便命名Bootstrap属性。例如，要在Bootstrap 5中创建一个Tooltip组件：
我们不使用 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现在由