3

Bootstrap 发布十周年，Bootstrap 5都有什么新功能？

 3 years ago
source link: https://segmentfault.com/a/1190000040572563
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Bootstrap 发布十周年，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中，表格样式是相互独立的，即使它们是嵌套的。
  • Border utilities现在支持表格。这意味着你现在可以使用边框颜色工具改变表格的边框颜色。下面是一个在Bootstrap 5中使用表格的border utilities的例子。
  • 面包屑的默认样式已经更改，删除了在以前版本中默认的灰色背景、填充和边框半径。下面是 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://cdn.jsdelivr.net/npm/[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组件的一个例子。

Offcanvas 重叠侧边栏

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

Floating Label 浮动标签

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

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

更多信息：https://www.sitepoint.com/bootstrap-5-new-features-examples


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK