Bootstrap

Bootstrap 博客

关于 Bootstrap 的所有新闻和公告，包括新版本、Bootstrap 主题 和 Bootstrap 图标。

Bootstrap 5 Beta 1

@mdo 2020 年 12 月 7 日

随着 Bootstrap 5 的第一个 Beta 版本发布，我们宣布了新功能和重大更改。从现在开始，我们只会在通往稳定版 v5 的道路上对功能、错误和文档进行微调。太棒了！

与 v4 开发过程一样，我们为 v5 编写的文档暂时托管在子域上，用于下一个主要版本。从今天开始，这些文档将被迁移到主域，我们旧的 v5.getbootstrap.com 域将重定向。

此版本中添加了一些非常棒的新功能（RTL！），并且带来了一些重要的更改。继续阅读以了解详情，并告诉我们您的想法！

RTL

Bootstrap RTL docs

多年来我们对项目最大的贡献，我们终于在 Bootstrap 中添加了 RTL 支持！请和我一起感谢 @ffoodd——我们最新的贡献者之一，也是 RTL pull 请求的作者。Pull 请求 包含近 50 个对现有问题和 PR 的引用，这些问题和 PR 试图将该功能实现到我们的核心代码中。

从高层次来看，我们的 RTL 方法包含了一些更改

我们的方法建立在 RTLCSS 之上，这是一个很棒的项目，可以帮助重新处理现有的 LTR 样式表以用于 RTL。我们目前将其归类为实验性功能，预计我们会在这方面犯一些错误。我们希望社区能够帮助我们完善此功能，因为我们正在完成一些剩余的任务。

此问题 已经为我们团队计划了一些待办事项。看到我们可以改进的其他内容吗？请考虑打开一个问题或拉取请求。

在我们的文档中了解 Bootstrap 中的 RTL，包括所需的 HTML 更改、入门模板、我们方法的详细信息等等。

逻辑属性的重命名类

我们向 Bootstrap 添加 RTL 的方法的一部分是，以一种对我们自己和整个网络来说都感觉未来友好的方式添加它。因此，我们接受了 CSS 逻辑属性的精神，并对几个类和变量进行了重命名。这是一个冒险的改变，因为改变的规模和影响，但我们希望您总体上会喜欢它！

你们中的大多数人已经通过我们的弹性实用程序与逻辑属性交互过——它们用 start 和 end 替换了 left 和 right 等方向属性。像 align-items-end 这样的东西已经成为受欢迎的补充。这使得水平方向类名适合 LTR 和 RTL，而无需在将来进行任何额外的开销。

例如，在 LTR 上下文中，使用 .ms-3 代替 .ml-3 来表示 margin-left。请务必 阅读 RTL 迁移指南 以获取重命名类和变量的完整列表。

Popper.js v2

Popper.js

我们已将 Popper.js 从 v1.x 升级到 v2.x，这给我们的工具提示和弹出窗口带来了一些小的破坏性更改。这两个更改是为什么我们不能早点更新到 v2.x 的原因。

  • 从我们的工具提示/弹出窗口和下拉菜单插件中删除了 offset 选项；这仍然可以使用 popperConfig 参数来实现。
  • fallbackPlacement 选项已更名为 fallbackPlacements。

Popper.js v2 还带来了更小的主要依赖文件大小、更新的定位计算等等。除此之外，我们的工具提示和弹出框保持不变，功能依然强大。

命名空间数据属性

我们已将所有 data 属性重命名为包含 bs 作为中缀，从而为所有启用插件 JavaScript 行为的 HTML 属性创建命名空间。查看 #31827 获取详细信息。这有助于在整个项目中清晰地识别 Bootstrap 所需的 JavaScript 触发器。

进行此更改有点烦人，但可以通过查找和替换轻松解决。新属性的工作方式与旧属性相同，只是更具体。例如，以下是一个带有新重命名的 data-bs-toggle 属性的下拉按钮和菜单。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

新的吐司定位

Popper.js

在尝试了一些 JavaScript 解决方案来解决 吐司定位 问题后，我们借助 新的定位实用程序 找到了新的纯 CSS 方法。这带来了一些细微的重大更改，即对确切 CSS 属性和我们如何切换吐司可见性的更改，但总体上保持不变。

我们的文档已更新，包括一个 新的位置预览选择器，以便您可以看到它们在实际中的效果。查看拉取请求以了解更多详细信息。

JS 增强功能

除了命名空间之外，我们还一直在努力进行一些其他 JavaScript 改进和错误修复。以下是新功能的概述

更多 JavaScript 更新即将推出，从性能和文件大小改进到新功能。

实用程序 API 中的状态

Bootstrap 5 最大的新功能之一是我们的实用程序 API，这是一种可扩展的方式来自定义、添加或删除 Bootstrap 实用程序。我们一直在不断改进，最新的改进是能够使用 state 选项添加伪类变体。

使用 state 选项生成伪类变体。示例伪类是 :hover 和 :focus。当提供状态列表时，将为该伪类创建类名。例如，要更改悬停时的不透明度，请添加 state: hover，您将在编译的 CSS 中获得 .opacity-hover:hover。

需要多个伪类？使用空格分隔的列表：state: hover focus。

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

输出到

.opacity-0-hover:hover { opacity: 0; }
.opacity-25-hover:hover { opacity: .25; }
.opacity-50-hover:hover { opacity: .5; }
.opacity-75-hover:hover { opacity: .75; }
.opacity-100-hover:hover { opacity: 1; }

查看 #31643 获取更多关于更改的背景信息。

还有更多…

在其他地方，我们还进行了一些其他重大更改和改进。最值得注意的更新包括

  • 重大更改：将 scale-color() 函数重命名为 shift-color() 。 查看 #32149。

  • 重大更改：简化了 make-container() 混合器和 $container-padding-x。 查看 #31735。

  • 修复：垂直按钮组中的角现在保持圆角。 查看 #31303。

  • 修复：删除了一些表格行上的默认线性渐变，这些渐变会导致性能下降。请注意，这里还有更多工作要做。 查看 #32277。

  • 更新：面包屑现在具有简化的外观。使用实用程序恢复所需的 padding、background-color 和 border-radius。 查看 #32249。

  • 更新：最终确定了 browserslist 配置，以匹配我们支持的浏览器。 查看 #30986。

要查看更完整的更改列表，请查看 v5 Beta 项目看板 或 此 版本 中的问题和 PR 列表。

开始使用

前往 https://bootstrap.ac.cn 探索新版本。 我们还将此更新发布为 npm 的预发布版本，因此，如果您感觉大胆或对新功能感到好奇，您可以通过这种方式获取最新版本。

npm i bootstrap@next

支持团队

访问我们的 Open Collective 页面 或我们的 团队成员 的 GitHub 个人资料，以帮助支持为 Bootstrap 做出贡献的维护者。

相关帖子