Bootstrap 5的新内容

热门技术勘探工
538 阅读6分钟

What's New in Bootstrap 5

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中仍然可用。迁移时，你应该关注的主要问题是你正在使用的类或组件是否已经被放弃。如果它们被放弃了，有一些替代物或使用实用类的方法可以达到同样的效果。你应该关注的第二件事是在需要JavaScript作为其功能一部分的组件中从data-* 属性切换到data-bs-* 。(我们将在下一节中详细介绍）。

如果你使用Bootstrap的Sass文件，有一些变量和混合元素已经被重新命名。Bootstrap 5有一个广泛而详细的关于定制的部分，以及每个组件的Sass变量和混合器的细节，都在各自的文档页面中。

改变了什么

Bootstrap 5给作为库的Bootstrap带来了核心变化，改变了所需的依赖性、浏览器支持等。它也给我们在以前版本中一直使用的组件和类带来了变化。

jQuery不再是一个依赖项

作为与以前版本的一个重大变化，jQuery不再是Bootstrap的一个依赖项。现在，你可以在没有它的情况下完整地使用Bootstrap，但你仍然需要Popper.js。这一变化使得在不需要或不使用jQuery的项目中使用Bootstrap更加容易--比如在Bootstrap与React一起使用时。

如果jQuery是你网站的一部分，你仍然可以在Bootstrap中使用它。如果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)
})

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

浏览器支持变化

直到第四版，Bootstrap一直支持Internet Explorer（IE）10和11。从Bootstrap 5开始，对IE的支持已经完全放弃。因此，如果你的网站需要支持IE，在迁移到v5时可能要小心。

浏览器支持方面的其他变化包括。

  • Firefox和Chrome的支持现在从60版本开始
  • Safari和iOS的支持现在从12版开始
  • 安卓浏览器和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的浏览器和设备的文档中，有一个在某些浏览器上出现的错误列表。对于Bootstrap 5来说，这些bug不再列在同一个列表中了。该列表包括以下内容。

  • 在iOS上，悬停造型被应用于触摸事件中的元素，这并不可取，因为这被认为是一种意外的行为。
  • 在Safari 8及以上浏览器中使用.container ，导致打印时字体过小。
  • 边框半径被验证反馈所覆盖（但可以通过添加一个额外的.has-validation 类来修复）。

Bootstrap 4文档中的错误和问题列表也详细说明了在不再支持的浏览器版本上发生的错误。

继续阅读SitePoint上的Bootstrap 5的新内容。

avatar
文章
阅读
粉丝