Bootstrap 5中需要注意的7个新功能

Bootstrap 5进行了重大更改,包括对Internet Explorer(IE)支持和jQuery依赖项的删除。 Bootstrap由Twitter开发,是世界上最受欢迎的CSS框架。开源用户界面框架正在寻找自己的未来定位,这已经在v5中做出了突破性的变化。

Bootstrap对于IE的支持使它成为第一个实现此目的的Web开发工具。此举是在Internet Explorer的市场份额持续萎缩之际,仅占所有Web浏览器的不到3%。

请继续阅读以了解对Bootstrap进行了哪些其他改进以及它们如何影响您。

1. jQuery支持

Bootstrap将不再使用jQuery库。开发团队改而改进了JavaScript库以实现此更改。 jQuery依赖关系在Bootstrap中不一定是一件坏事。

实际上,jQuery的引入从根本上改变了JavaScript的使用方式。它简化了用JavaScript编写代码的工作,否则这些代码将花费很多行代码。

相关:了解如何在jQuery中创建元素

尽管如此,团队还是决定放弃它。这具有较小的源文件和较长的页面加载时间的优点。这是一个急需的更改,它将使Bootstrap获得更具未来友好性的样式。

源文件的大小已减少了85KB的精简JavaScript,这是关键,因为Google认为移动网站的页面加载时间是排名因素。

尽管在Bootstrap 5中不再需要使用jQuery,但仍然可以根据需要使用它。还值得注意的是,所有JavaScript插件仍然可用。

2. CSS自定义属性

通过删除Internet Explorer支持,可以使用自定义CSS属性(变量)。 IE不支持自定义属性,这只是它长期阻碍Web开发人员的原因之一。

CSS自定义属性使CSS更加灵活和可编程。 CSS变量以-bs为前缀,以防止与第三方CSS冲突。

有两种类型的变量可用:根变量和组件变量。

可以在加载Bootstrap CSS的任何位置访问根变量。这些变量位于_root.scss文件中,并且是已编译dist文件的一部分。

组件变量用作特定组件中的局部变量。它们有助于避免在诸如嵌套表之类的组件中意外继承样式。

3.改进的网格系统

由于从版本3升级到版本4时存在一些问题,Bootstrap 5这次保留了系统的大部分内容,是在现有系统的基础上进行的,而不是完全对其进行更改。其中的一些更改是:

  • 装订线类( .gutter )已被替换为实用程序( .g * ),就像边距和填充
  • 垂直间距等级也已包括在内
  • 列不再默认为position:relative

4.改进的文档

文档增加了更多信息,尤其是有关自定义的信息。一个常见的问题是,对于许多使用Bootstrap的站点,您可以立即确定它正在使用Bootstrap。 Bootstrap 5现在具有新的外观和更好的定制性。

现在,可以更加灵活地自定义主题,以便并非每个站点或应用程序都具有相同的相似性。实际上,v4主题页面已扩展,包含更多内容和代码片段,可在Sass(流行的CSS预处理程序)文件之上构建。您还可以在GitHub平台上找到一个starter npm项目,该项目可用作模板存储库。

调色板在版本5中也进行了扩展。扩展的内置颜色系统意味着您可以轻松地设置颜色样式,而不必离开代码库。还进行了更多工作来改善颜色对比度,包括在Bootstrap颜色文档中添加颜色对比度指标。

5.改进的表单控件

Bootstrap改进了其表单控件,输入组等。

在第4版中,除了每个浏览器提供的默认设置外,Bootstrap还使用了自定义表单控件。在v5中,这些都已自定义。所有单选按钮,复选框,文件,范围等,使它们在不同浏览器中具有相同的外观和行为。

新的表单控件不再包含不必要的彩色标记,而是专注于标准和逻辑设计功能。

6. Bootstrap 5 Adds Utilities API

继Tailwind CSS之类的新CSS库之后,Bootstrap现在还添加了一个实用程序库。引导团队表示,他们很高兴看到其他开发人员如何“挑战过去十年来我们在网络上的构建方式。 ”

实用程序在开发社区中正获得发展势头,并且引导团队已注意到这一情况。该团队早先使用全局$ enable- *类在v4中增加了实用程序的配置。在v5中,它们已更改为API方法以及Sass中的新语言和语法。这将使您能够创建新的实用程序,同时仍然能够删除或修改给定的默认设置。

为了更好地组织工作,第4版中的某些实用程序已移至“帮助器”部分。

7.新的Bootstrap图标库

Bootstrap现在拥有自己的开源SVG图标库,其中包含1300多个图标。它是为框架的组件定制的,但是您仍然可以在任何项目中使用它们。

鉴于它们是SVG图像,因此它们可以快速缩放并可以以多种方式实现,并且还可以使用CSS设置样式。

您可以使用npm安装图标

 $ npm i bootstrap-icons

安装Bootstrap 5

如果要安装它,可以转到Bootstrap 5官方下载页面。如果您想及时了解最新的开发版本,可以使用npm将其拉出:

 $ npm i [email protected]

在撰写本文时,该框架处于Beta 3版本。这意味着该软件可以安全使用,但仍在开发中。随时向团队提供反馈并做出任何必要的贡献。