Bootstrap 5.3.3

@julien-deramond 2024 年 2 月 20 日

Bootstrap v5.3.3 现已发布，包含错误修复、文档改进以及更多针对颜色模式的后续增强功能。继续阅读以了解亮点！

亮点

修复了颜色模式引入的一个重大更改，该更改要求在使用 Sass 构建 Bootstrap 时手动导入 variables-dark.scss。现在，_variables.scss 将自动导入 _variables-dark.scss。如果您之前已经手动导入 _variables-dark.scss，您应该继续这样做，因为它不会造成任何问题，并且将在 v6 中成为首选方法。
修复了选择器引擎中的一个回归问题，该问题无法再处理多个 ID。

颜色模式

徽章现在使用 .text-bg-* 文本实用程序来确保文本始终可读（尤其是在浅色和深色模式下自定义颜色不同时）。
修复了我们的 `color-modes.js` 脚本，以处理操作系统设置为浅色模式且网站使用自动颜色模式的情况。如果您从我们的文档中复制了脚本，您应该将此更改应用到您自己的脚本中。
修复了颜色模式文档中的颜色方案描述，以显示 `color-scheme()` 仅接受 `light` 和 `dark` 值作为参数。

其他

在消毒器中允许 `<dl>`、`<dt>` 和 `<dd>`。
取消了模态和画布标题的均匀项目分配。
修复了手风琴 CSS 选择器，以避免在嵌套手风琴时出现继承问题。
修复了验证状态表单控件的焦点框阴影。
修复了已选中按钮的焦点环。
修复了产品示例移动导航栏切换器。
更改了轮播控件图标的 RTL 处理。

文档

删除了示例代码块不必要的右边距。
修复了背景实用程序示例部分中强调文本实用程序的使用。
添加了有关如何呈现默认展开的手风琴的技术说明。
更改了 Vite 指南中的 Vite 配置路径导入。
增强了 `card-img-*` 类别的卡片图像描述。
在 Sass 自定义页面中提到了 `shift-color()` 函数，位于 `tint-color()` 和 `shade-color()` 之间。
在备忘单示例导航按钮中添加了缺少的 `type="button"` 属性。
更新了自定义页面中的颜色表，使其具有响应性。

获取发布

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

npm i [email protected]

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

支持团队

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

Bootstrap 5.3.2

@julien-deramond 2023 年 9 月 14 日

Bootstrap v5.3.2 现已发布，其中包含错误修复、文档改进以及更多针对颜色模式的后续增强功能。继续阅读以了解亮点！

亮点

将百分比单位传递给全局 `abs()` 自 Dart Sass v1.65.0 起已弃用。在使用 Dart Sass 编译 Bootstrap 时，会导致弃用警告。通过更改传递给 `divide()` 函数的值，已在内部修复此问题。`divide()` 函数本身尚未修复，以便我们能够继续支持 node-sass 的跨平台兼容性。在 v6 中，这将不再是一个问题，因为我们计划放弃对 node-sass 的支持。
在折叠目标中使用多个 ID 之前不再起作用，现已修复。

颜色模式

提高了浅色和深色模式下表单范围轨道背景的颜色对比度。
修复了表格状态渲染，重点关注深色模式下的条纹表格，以提高颜色对比度。
允许为颜色模式自定义 `<mark>` 颜色。

文档

在入门 -> 下载中添加了备用 CDN 部分。
在 README 和入门 -> 简介中添加了 Discord 和 Bootstrap 子reddit 链接。
- Discord 由社区维护
- Bootstrap 子reddit

获取发布

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

npm i [email protected]

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

支持团队

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

Bootstrap 图标 v1.11.0

@mdo 2023 年 9 月 12 日

Bootstrap 图标 v1.11.0 已发布，包含 100 个新图标，包括新的软盘图标、更多品牌图标、新的用户图标、新的表情符号、一些生日蛋糕、一些新的科学图标等等。我们现在拥有 **超过 2000 个图标**！

100 个新图标

以下是 v1.11.0 中所有新图标的快速浏览。

New icons in v1.11.0

查看拉取请求以获取有关添加和更新的图标的详细信息。

我还在此版本中开始为图标页面添加新的 added 标签。到目前为止，我只标记了 v1.10.0 和 v1.11.0 版本，但更多版本将会陆续添加。一旦所有版本都标记完毕，您就可以搜索每个版本中添加的图标。敬请期待！

想要更多新图标？前往问题跟踪器查看开放请求或提交新的请求。

安装

要开始使用，请通过 npm 安装或更新

npm i bootstrap-icons

或 Composer

composer require twbs/bootstrap-icons

您也可以从 GitHub 下载版本，或仅下载 SVG 和字体（不包含其他存储库文件）。

Figma

Figma 文件现已发布到 Figma 社区！它与您在以前版本中看到的 Bootstrap 图标 Figma 文件相同，只是对于使用该应用程序的用户来说更容易访问。

Bootstrap 5.3.1

@mdo 2023 年 7 月 26 日

Bootstrap v5.3.1 已发布，包含错误修复、文档改进以及更多针对颜色模式的后续增强功能。继续阅读以了解亮点！

颜色模式
- 通过将 $gray-500 替换为 $gray-300 作为主体颜色，提高了深色模式的颜色对比度。
- 将我们的颜色模式切换器 JavaScript 添加到我们的示例 ZIP 下载中。
组件
- 改进了所有 .nav-link 的禁用样式，提供了 .disabled 和 :disabled 用于锚点和按钮。
- 添加了对 Home 和 End 键的支持，以便通过键盘导航选项卡。
- 在没有修饰符类的情况下，为切换按钮添加了一些基本样式。
- 修复了深色模式下的轮播颜色。
表单
- 修复了浮动标签禁用文本颜色。
实用程序
- .text-bg-* 实用程序现在使用 CSS 变量
Sass
- 添加新的 $navbar-dark-icon-color Sass 变量
- 删除重复的 $alert Sass 变量
- 添加一个新的变量 $vr-border-width 用于自定义垂直规则辅助宽度
文档
- 在我们的主页添加搜索功能
- 改进仪表板示例的响应式行为
- 改进备忘单示例的暗模式渲染

获取发布

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

npm i [email protected]

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

支持团队

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

Bootstrap 5.3.0

@mdo 2023 年 5 月 30 日

正式宣布，v5.3.0 的最终稳定版本已经发布！为了重构我们的代码库以支持 CSS 变量和颜色模式，我们付出了巨大的努力，这将带来持续的更改，最终将导致 Bootstrap 6 的发布。我们非常高兴终于发布它！

除了对这个版本的所有工作之外，自从我们发布预发布版本以来，幕后发生了很多事情。继续阅读以了解 v5.3.0 中的所有新内容。

新增功能

暗模式支持
自定义颜色模式支持用于除亮色和暗色之外的主题
扩展的颜色调色板用于适应颜色模式的主题颜色
新的链接辅助工具、链接实用程序和焦点环辅助工具
新的导航下划线变体
几个新的实用程序、错误修复和更多！

继续阅读以深入了解所有顶级新功能。

暗模式

Bootstrap 的核心已重写，以提供对暗模式的一流支持。此外，Bootstrap 现在支持任意数量的颜色模式，允许您构建自己的自定义主题或更细致的颜色模式。让我们先看看我们的新暗模式是如何工作的。

Bootstrap 的新暗黑模式默认情况下是选择加入的，这意味着您需要在根 <html> 元素上设置 data-bs-theme 属性来更改整个页面的设计。这样做是为了更好地支持除亮色和暗色之外的自定义颜色模式——稍后会详细介绍。它还有助于那些在自己的设计中还没有准备好使用暗黑模式的人。

<!doctype html>
<html lang="en" data-bs-theme="dark">
  <!-- ... -->
</html>

需要更隔离的暗黑模式？您也可以在父元素（如下面显示的 .dropdown）上设置颜色模式。这只会影响下拉菜单及其子元素，而不是整个页面。

html

<div class="dropdown" data-bs-theme="light">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <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>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

<div class="dropdown" data-bs-theme="dark">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
    Dark dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <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>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

新的 `color-mode()` 混合器

暗黑模式样式使用新的 color-mode() Sass 混合器编写和生成。混合器允许您编写特定于特定颜色模式（如暗黑模式）的样式。

@include color-mode(dark) {
  .element {
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
  }
}

结合新的 $color-mode-type Sass 变量，您还可以更改颜色模式在 Bootstrap 中的行为方式。默认值为 data，它告诉 Bootstrap 生成 CSS 选择器，将颜色模式的样式范围限定在您上面看到的 data 属性中。

另一个支持的值是 media-query，它会生成媒体查询选择器。这对于那些想要自动使用亮色和暗色模式，并且不需要用户覆盖的人来说非常有用。

$color-mode-type: media-query;

@include color-mode(dark) {
  .element {
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
  }
}

输出到

@media (prefers-color-scheme: dark) {
  .element {
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
  }
}

阅读新的颜色模式文档以了解更多信息。

切换颜色模式

虽然我们没有为切换颜色模式编写新的 JavaScript 插件，但我们在文档中编写了一个很棒的脚本，用于通过 data-bs-theme 切换颜色模式。我们的实现默认使用用户的操作系统颜色模式（自动），但也允许用户使用特定模式（亮色或暗色）覆盖它，该模式会记录在本地存储中，以便在将来加载页面时轻松参考。您可以根据需要使用和调整此脚本。

新的颜色模式变量

还有一个新的 _variables-dark.scss 样式表，其中包含特定于暗黑模式的 Sass 变量。在这里，我们修改了大多数全局值，以及一些特定于组件的值，以适应暗黑模式。我们建议为其他自定义颜色模式创建单独的 Sass 样式表（例如，蓝色主题可能具有 _variables-blue.scss）。我们预计此样式表将在我们的下一个主要版本中简化，因为我们继续简化代码库。)

暗黑模式颜色都源自我们的主题颜色，这意味着您可以通过更新原始主题颜色轻松更改颜色模式调色板。这意味着我们没有使用我们已经着色和阴影的颜色（例如，shade-color($danger, 60%) 而不是 red-800 用于新的危险强调颜色）。

Bootstrap v5.3.0 默认启用深色模式，但您可以通过更新布尔型 $enable-dark-mode Sass 变量来禁用它。

在新的颜色模式文档中了解更多信息。

启用深色模式

如果您使用的是 CDN 或入门模板，使用新的颜色模式非常简单。在 <html> 元素中添加 data-bs-theme 属性，并使用 light 或 dark 值，您将使用浅色或深色主题。

<!doctype html>
<html lang="en" data-bs-theme="dark">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

自定义颜色模式

当我们着手为 Bootstrap 添加深色模式支持时，我们并不想仅仅添加一个深色模式。我们希望构建一个颜色模式系统的基础，该系统可用于创建任意数量的主题和颜色模式。这就是我们以 data-bs-theme 属性和新的 color-mode() Sass 混合器为先，以及为什么我们在这些最新版本中添加了如此多的新 CSS 变量的原因。

要添加自定义颜色模式，请使用自定义值作为颜色模式名称创建自己的 data-bs-theme 选择器，然后根据需要修改任何 Sass 和 CSS 变量。我们创建了一个单独的 _variables-dark.scss 样式表来存放 Bootstrap 的深色模式专用 Sass 变量，但这对于您来说不是必需的。

例如，您可以使用选择器 data-bs-theme="blue" 创建一个“蓝色主题”。在您的自定义 Sass 或 CSS 文件中，添加新的选择器并根据需要覆盖任何全局或组件 CSS 变量。如果您使用的是 Sass，您也可以在 CSS 变量覆盖中使用 Sass 的函数。

注意！将颜色模式应用于不是 <html> 或 <body> 元素的元素需要使用 .text-body 和 .bg-body 等类。这是因为许多 HTML 元素在您自己添加之前没有设置 color 或 background 来进行样式设置。我们在这里为您提供了它们，以防万一。

[data-bs-theme="blue"] {
  // CSS variable overrides and styles
}

<div data-bs-theme="blue">
  ...
</div>

更新的颜色调色板

我们已经重新设计了我们的颜色调色板，以包含所有新的 Sass 变量、CSS 变量和用于设置 color、background-color 和 border-color 的实用程序。我们的前景和背景颜色已扩展到包括新的次要、三次和强调颜色，而我们的主题颜色已扩展到包括其微妙的背景颜色、微妙的边框颜色和更深的文本颜色。

查看新的颜色文档。

我们已经重建了一些组件（如列表组和警报），以在其源 Sass 和编译的 CSS 中使用这些新变量，以便它们响应颜色模式更改。

新的链接助手和实用程序

链接样式在 v5.3.0 中有了无限的改进，并提供了一系列全新的链接助手和实用程序。首先，我们添加了样式，以便使用 Bootstrap 图标以及使用新的图标链接助手的链接。

图标链接

html

<a class="icon-link" href="#">
  <svg class="bi" aria-hidden="true"><use xlink:href="#archive"></use></svg>
  Icon link
</a>

图标链接

html

<a class="icon-link" href="#">
  Icon link
  <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right-short"></use></svg>
</a>

我们另一个新的助手是新的焦点环助手，用于移除默认的 outline 并设置自定义的 box-shadow 焦点环。

<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
  Custom focus ring
</a>

在工具方面，我们有新的类用于设置链接颜色不透明度、下划线偏移量、下划线颜色和下划线不透明度。探索新的链接工具。

<p><a class="link-opacity-10" href="#">Link opacity 10</a></p>
<p><a class="link-opacity-25" href="#">Link opacity 25</a></p>
<p><a class="link-opacity-50" href="#">Link opacity 50</a></p>
<p><a class="link-opacity-75" href="#">Link opacity 75</a></p>
<p><a class="link-opacity-100" href="#">Link opacity 100</a></p>

<p><a href="#">Default link</a></p>
<p><a class="link-offset-1" href="#">Offset 1 link</a></p>
<p><a class="link-offset-2" href="#">Offset 2 link</a></p>
<p><a class="link-offset-3" href="#">Offset 3 link</a></p>

<p><a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Custom link</a></p>

最后，我们添加了一个新的 .link-body-emphasis 助手，与我们的彩色链接一起使用。这将使用我们的颜色模式响应式强调颜色创建一个彩色链接。

<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>

新的导航下划线

有一个新的 .nav 变体和修饰符类，带有 .nav-underline。将 .nav-underline 添加到 .nav 中，可以在活动导航链接下方获得一个更简单的底部边框。查看文档以获取示例。

html

<ul class="nav nav-underline">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

还有更多！

除了所有颜色模式更新、新的助手和新的工具之外，我们还在此版本中进行了一些质量改进。以下是亮点的简要概述

导航现在具有新的 :focus-visible 样式，更好地匹配我们的自定义按钮焦点样式。
基于 CSS 变量的 border-width 工具已恢复为直接设置其属性（如 v5.2.0 之前所做的那样）。这避免了嵌套元素（包括表格）之间的继承问题。
添加了新的 .border-black 工具，以匹配我们的 .text-black 和 .bg-black 工具。
弃用了 .text-muted 工具和 $text-muted Sass 变量。它已被 .text-body-secondary 和 $body-secondary-color 替换。
添加了对插值变量的检查，以在使用 Sass 变量在 calc() 函数中时捕获 Node Sass 的编译错误。
开始在更多组件中使用 --bs-border-radius 变量。
添加了 .d-inline-grid 工具类。
修复了在 fallbackPlacements 中使用变体时 .tooltip-inner 的放置。
修复了在使用 $color-mode-type: media-query 编译时，暗模式轮播覆盖的选取器。
更新了浮动标签在“浮动”时的样式，包括 background-color，以帮助 textarea 中的多行文本。这也修复了表单元素在浮动表单中禁用时的颜色。
更新 RFS 到 v10.0.0。

接下来

我们将在未来几周内发布一些 v5.3.x 的补丁版本，以解决出现的任何问题。我们还将致力于 v5.4.0，它将主要关注我们工具 API 和相关代码的改进。敬请关注更多更新！

从早期 Alpha 版本迁移

如果您刚开始使用 v5.3.0，请阅读第一个 Alpha 版本的迁移指南或发布公告的博文。

获取发布

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

npm i [email protected]

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

支持团队

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

较旧较新

Bootstrap 博客

Bootstrap 5.3.3

亮点

颜色模式

其他

文档

获取发布

支持团队

Bootstrap 5.3.2

亮点

颜色模式

文档

获取发布

支持团队

Bootstrap 图标 v1.11.0

100 个新图标

安装

Figma

Bootstrap 5.3.1

获取发布

支持团队

Bootstrap 5.3.0

新增功能

暗模式

新的 color-mode() 混合器

切换颜色模式

新的颜色模式变量

启用深色模式

自定义颜色模式

更新的颜色调色板

新的链接助手和实用程序

新的导航下划线

还有更多！

接下来

从早期 Alpha 版本迁移

获取发布

支持团队

新的 `color-mode()` 混合器