Bootstrap

Bootstrap 博客

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

Bootstrap 5.3.0-alpha2

@mdo 2023 年 3 月 24 日

我们发布了 v5.3.0 的第二个 alpha 版本，其中包含大量针对新颜色模式的增强功能和错误修复！ 还有更多内容即将推出，但我们一直等到解决足够多的问题才发布。 太棒了，我们做到了！

这个 v5.3.0 版本是 Bootstrap 5 的一个重大更新。 它足够大，可以单独成为 v6，但我们希望为社区做好事，并在没有进行大规模的重大版本升级的情况下发布颜色模式。 我们现在越来越接近了，所以请耐心等待，我们将继续努力完成它。

同时，以下是自第一个 Alpha 版本以来的更新概述。请阅读 迁移指南 以了解第一个 Alpha 版本的更新，或者阅读 发布公告的博客文章，如果您刚开始使用 v5.3.0。

CSS 变量

  • 删除了几个重复和未使用的根 CSS 变量。

颜色模式

  • 暗模式颜色现在从 Sass 中的主题颜色（例如，$primary）派生，而不是特定颜色的色调或阴影（例如，$blue-300）。这允许在自定义默认主题颜色时实现更自动化的暗模式。

  • 添加了 Sass 地图，用于生成暗模式文本、微妙背景和微妙边框的主题颜色。

  • 代码片段示例 现在已准备好使用更新的标记和减少的自定义样式来支持暗模式。

  • 将 color-scheme: dark 添加到暗模式 CSS 中，以更改操作系统级别的控件，例如滚动条。

  • 表单验证 border-color 和文本 color 状态现在可以响应暗模式，这得益于新的 Sass 和 CSS 变量。

  • 删除了最近添加的表单控件背景 CSS 变量，并将 Sass 变量重新分配为使用 CSS 变量。这简化了跨颜色模式的样式，并避免了暗模式下表单控件无法正确更新的问题。

  • 我们的 box-shadow 将再次始终保持黑暗，而不是在暗模式下反转为白色。

  • 改进了颜色模式切换脚本的 HTML 和 JavaScript。更改活动 SVG 的选择器已得到改进，并且标记通过 ARIA 属性变得更加易于访问。

  • 改进了文档代码语法颜色，并在明暗模式下进行了更多改进。

  • 删除了在暗模式中嵌套明模式组件的功能。不幸的是，这非常不完整，而且在没有将每个组件的选择器增加四倍的情况下，这并不实用。也许在 v6 中！

排版

  • 我们不再为暗模式设置 $headings-color-dark 或 --bs-heading-color 的颜色。为了避免组件内的标题出现错误颜色的几个问题，我们将 Sass 变量设置为 null，并添加了类似于默认明模式使用的 null 检查。

组件

  • 卡片现在设置了color属性，以改善跨颜色模式的渲染效果。

  • 添加了新的.nav-underline变体，用于我们的导航，在活动导航链接下方有一个更简单的底部边框。 查看文档以获取示例。

  • 导航现在具有新的:focus-visible样式，更符合我们的自定义按钮焦点样式。

辅助工具

  • 添加了新的.icon-link辅助工具，以便快速放置和对齐 Bootstrap 图标以及文本链接。图标链接也支持我们新的链接实用程序。

  • 添加了一个新的焦点环辅助工具，用于删除默认的outline并设置自定义的box-shadow焦点环。

实用程序

  • 将 Sass 和 CSS 变量${color}-text重命名为${color}-text-emphasis，以匹配其关联的实用程序。

  • 在我们的彩色链接旁边添加了新的.link-body-emphasis辅助工具。这将使用我们的颜色模式响应式强调颜色创建彩色链接。

  • 添加了新的链接实用程序，用于链接颜色不透明度、下划线偏移量、下划线颜色和下划线不透明度。 探索新的链接实用程序。

  • 基于 CSS 变量的border-width实用程序已恢复为直接设置其属性（如 v5.2.0 之前所做的那样）。这避免了嵌套元素（包括表格）之间的继承问题。

  • 添加了新的.border-black实用程序，以匹配我们的.text-black和.bg-black实用程序。

  • 已弃用 已弃用.text-muted实用程序和$text-muted Sass 变量。它已被.text-body-secondary和$body-secondary-color替换。

文档

  • 更新了文档页面目录，以使用 Scrollspy（向我们的 v3 文档致敬！）。
  • 重新设计了跨颜色模式的代码片段的语法高亮颜色。
  • 改进了几个文档调用内容和渲染。
  • 记录了更多颜色模式功能和使用建议。
  • 将主题切换添加到示例页面。
  • 更新了所有指南中的依赖项。

已知问题

虽然不是详尽无遗的列表，但以下是一些我们在将此版本称为稳定版本之前要处理的内容。您可以在GitHub 上的 v5.3.0-stable 项目中跟踪这些问题以及更多问题。

  • 使用 mixin 和函数为实用程序添加新功能。
  • 一些组件需要再次进行调整，以实现全色模式的响应性。请注意，一些组件（如按钮）在 v6 之前不会获得全色模式的适应性。
  • 禁用浮动表单中的标签渲染不正确。
  • 需要更新文档，以说明如何在不同颜色模式下修改主题颜色。
  • 示例需要再次进行调整，以支持深色模式，添加新的屏幕截图等等。
  • 改进范围输入的点击/轻触区域。

接下来将发布 v5.3.0 的稳定版本。最初计划将其作为测试版发布，但我认为我们已经接近最终版本，只需要再发布一次。

获取发布版本

前往 https://bootstrap.ac.cn 获取最新版本。 它也已推送到 npm

npm i bootstrap@v5.3.0-alpha2

阅读 GitHub v5.3.0-alpha2 变更日志，以获取此版本中所有更改的完整列表。

支持团队

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

相关帖子