近日,知名前端工具包Bootstrap官博宣布成立10周年。其创始人马克·奥托回顾了过去十年的一些成就和里程碑:文档浏览量超过25亿次,每天超过685,000次;自2015年2010年以来,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可以节省开发人员的时间,尤其是对于几乎每个项目都会用到的组件。Bootstrap5(当前主要版本,2021年5月发布)带来了大量的变化和改进,包括添加新组件、新类、旧组件的新样式、更新浏览器支持、移除一些旧组件等等。在本文中,我们将介绍Bootstrap5中的更改、删除的内容以及最令人兴奋的新内容。何时使用Bootstrap(何时不使用)Bootstrap自称是“世界上最流行的构建响应式、移动优先网站的框架”,并且在GitHub上有152,000颗星,我认为这是一个不错的主张。特别是对于初学者来说,Bootstrap是开始创建现代和干净的网站的好方法。它可以轻松实现复杂的、移动优先的设计,并提供您在多个项目中可能需要的许多组件。Bootstrap的学习曲线很低,非常适合不需要构建步骤的静态网站,因为您可以直接从Bootstrap的CDN引用库。这与其他一些流行的CSS框架形成鲜明对比,这些框架可能经过优化以与捆绑器或任务运行器一起使用。但是,您还应该知道Bootstrap不是灵丹妙药。对于外行来说,Bootstrap可以轻松生成令人困惑和复杂的标记。就千字节而言,它也是一个相对较重的库(尽管每个版本都在改进),因此如果您只使用它的一个或两个功能,它可能不是最佳选择。与任何抽象一样,如果您对底层技术有很好的了解并且可以就何时使用它做出明智的决定,它会有很大帮助。从Bootstrap4升级到5从Bootstrap4升级到5通常很容易。Bootstrap4中的大多数组件、它们的类和实用程序类在Bootstrap5中仍然可用。迁移时您应该关心的主要事情是您使用的类或组件是否已被删除。如果去掉了,可以用实用类来代替,或者用其他方法也可以达到同样的效果。您应该关注的第二件事是将需要JavaScript作为其功能一部分的组件中的data-属性转换为data-bs-。(我们将在下一节中更详细地介绍这一点。)如果您使用的是Bootstrap的Sass文件,一些变量和混入将被重命名。Bootstrap5在它们各自的文档页面上有一个广泛而详细的部分,所有内容都是关于定制的,以及关于每个组件的Sass变量和混合的详细信息。更改内容Bootstrap5为作为库的Bootstrap带来了核心更改,包括对所需依赖项、浏览器支持等的更改。它还对我们在以前版本中使用的组件和类进行了更改。jQuery不再是依赖与之前的版本相比,jQuery不再是Bootstrap的依赖。现在,您可以在没有它的情况下充分利用Bootstrap,但您仍然需要Popper.js。此更改使得在不需要或不使用jQuery的项目中使用Bootstrap变得更加容易——例如在将Bootstrap与React结合使用时。如果Bootstrap是您网站的一部分,您仍然可以使用jQuery。如果Bootstrap在window对象中检测到jQuery,它会自动将所有组件添加到jQuery的插件系统中。因此,如果您要从v4迁移到v5,则无需担心此更改,并且在必要时仍然可以使用jQuery和Bootstrap。但是,如果您在网站中使用jQuery,但又不想让Bootstrap使用jQuery怎么办?您可以通过将属性data-bs-no-jquery添加到文档的body元素来做到这一点:
