Bootstrap 5新增哪些新功能?

Bootstrap 5新增哪些新功能?

近日,知名前端工具包 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 中 Blockquotes
  • 在以前的版本中,表的样式是继承的。这意味着,如果一个表嵌套在另一个表中,嵌套的表将继承父表。在Bootstrap 5中,表格样式是相互独立的,即使它们是嵌套的。
  • Border utilities现在支持表格。这意味着你现在可以使用边框颜色工具改变表格的边框颜色。下面是一个在Bootstrap 5中使用表格的border utilities的例子。Bootstrap 5中使用表格的border utilities的例子
  • 面包屑的默认样式已经更改,删除了在以前版本中默认的灰色背景、填充和边框半径。下面是 Bootstrap 5 中 面包屑样式的示例: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图标而不是 &times
  • 下拉分割线现在更暗,以更好的对比。
  • 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:[email protected]/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组件的一个例子。

Accordion 手风琴

Offcanvas 重叠侧边栏

另一个新组件是 Offcanvas,它允许您创建一个重叠的侧边栏。这个侧边栏通常用于在小型设备上显示菜单。你可以通过在LTR中使用 .offcanvas-start 代表左边,.offcanvas-top 代表上面,.offcanvas-end 代表LTR中的右边,以及 .offcanvas-bottom 代表下面,将其放置在页面的任何一边。你也可以指定Offcanvas是否应该有背景。下面是Offcanvas组件的使用示例:

Offcanvas 重叠侧边栏

Floating Label 浮动标签

Floating Label 是 Form 组件的一个新组件。它允许你创建一个输入,其标签一开始看起来像一个占位符,然后当输入收到焦点时,标签会浮动到输入的顶部,高于数值。它也适用于 <select> 元素和 <textarea> 元素。以下是使用浮动标签的示例:

Floating Label 浮动标签

除了新的组件,还有现有组件的新类、新的实用类、新的辅助类,以及更多。

更多信息:bootstrap-5-new-features-examples

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » Bootstrap 5新增哪些新功能?

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们