迁移到 v5

v5.3.0

如果你正在从我们 v5.3.0 的早期 alpha 版本迁移，请查看本部分中除了这些更改之外的更改。

帮助程序

• 彩色链接 再次具有 !important，以便它们能更好地与我们新添加的链接实用程序配合使用。

实用程序

• 添加了新的 .d-inline-grid 显示实用程序。

v5.3.0-alpha2

如果你正在从我们 v5.3.0 的早期 alpha 版本迁移，请查看下面列出的更改。

CSS 变量

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

颜色模式

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

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

• 代码片段示例现已准备好用于暗模式，并更新了标记并减少了自定义样式。

• 已将 color-scheme: dark 添加到暗模式 CSS 中，以更改 OS 级别控件，如滚动条

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

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

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

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

• 改进了文档代码语法颜色，以及浅色和暗色模式下的更多内容。

排版

• 我们不再为暗模式设置 $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 取代。

文档

• 现在，示例显示为适当的浅色或深色模式，具体取决于我们文档中的设置。每个示例都有一个单独的色彩模式选择器。

• 改进了用于实时 Toast 演示的包含 JavaScript。

• 将 twbs/examples 存储库内容添加到示例页面的顶部。

工具

• 通过 True 添加了 SCSS 测试，以帮助测试我们的实用程序 API 和其他自定义项。

• 用较新且更完整的 twbs/examples 存储库 替换了我们的 bootstrap-npm-starter 项目的实例。

有关变更的完整列表，请参阅 GitHub 上的 v5.3.0-alpha2 项目。

v5.3.0-alpha1

色彩模式！

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

• 全局支持浅色（默认）和深色模式。在 :root 元素上、使用包装器类对元素和组件进行分组、或直接在组件上使用 data-bs-theme="light|dark" 全局设置色彩模式。还包括一个新的 color-mode() 混合，它可以根据你的喜好输出带有 data-bs-theme 选择器或媒体查询的规则集。

  已弃用 色彩模式取代了组件的深色变体，因此 .btn-close-white、.carousel-dark、.dropdown-menu-dark 和 .navbar-dark 已弃用。

• 新的扩展色彩系统。我们添加了新的主题颜色（但不在 $theme-colors 中），以获得更加细致入微的系统级色彩调色板，其中包含新的辅助色、三级色和强调色，用于 color 和 background-color。这些新颜色可用作 Sass 变量、CSS 变量和实用程序。

• 我们还扩展了主题颜色 Sass 变量、CSS 变量和实用程序，以包括文本强调、微妙的背景颜色和微妙的边框颜色。这些内容可用作 Sass 变量、CSS 变量和实用程序。

• 添加新的 _variables-dark.scss 样式表，以容纳特定于暗模式的覆盖。此样式表应在导入堆栈中的现有 _variables.scss 文件之后立即导入。

  diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
  index 8f8296def..449d70487 100644
  --- a/scss/bootstrap.scss
  +++ b/scss/bootstrap.scss
  @@ -6,6 +6,7 @@
   // Configuration
   @import "functions";
   @import "variables";
  +@import "variables-dark";
   @import "maps";
   @import "mixins";
   @import "utilities";
  

CSS 变量

• 恢复断点的 CSS 变量，尽管我们不会在媒体查询中使用它们，因为它们不受支持。但是，这些变量在特定于 JS 的上下文中可能很有用。

• 根据颜色模式更新，我们为新的 Sass CSS 变量 secondary 和 tertiary 文本和背景颜色添加了新的实用程序，以及 {color}-bg-subtle、{color}-border-subtle 和 {color}-text-emphasis 以用于我们的主题颜色。这些新颜色可通过 Sass 和 CSS 变量（但不是我们的颜色映射）获得，其明确目标是简化在浅色和深色等多种颜色模式下的自定义。

• 为警报、.btn-close 和 .offcanvas 添加其他变量。

• --bs-heading-color 变量已更新并支持暗模式。首先，我们现在在尝试输出 CSS 变量之前检查关联的 Sass 变量 $headings-color 上的 null 值，因此默认情况下它不会出现在我们的已编译 CSS 中。其次，我们使用带有回退值 inherit 的 CSS 变量，允许原始行为持续存在，但也允许覆盖。

• 转换链接以使用 CSS 变量对 color 进行样式设置，但不对 text-decoration 进行样式设置。颜色现在使用 --bs-link-color-rgb 和 --bs-link-opacity 设置为 rgba() 颜色，使您可以轻松自定义半透明度。a:hover 伪类现在覆盖 --bs-link-color-rgb，而不是显式设置 color 属性。

• --bs-border-width 现在用于更多组件，以便更好地控制默认全局样式。

• 为我们的 box-shadow 添加新的根 CSS 变量，包括 --bs-box-shadow、--bs-box-shadow-sm、--bs-box-shadow-lg 和 --bs-box-shadow-inset。

组件

警告

• 警告变体现在通过 CSS 变量进行样式化。

• 已弃用 alert-variant() 混合现在已弃用。我们现在直接使用 Sass 循环来修改每个变体的组件的默认 CSS 变量。

列表组

• 列表组项目变体现在通过 CSS 变量进行样式化。

• 已弃用 list-group-item-variant() 混合现在已弃用。我们现在直接使用 Sass 循环来修改每个变体的组件的默认 CSS 变量。

下拉菜单

• 已弃用 .dropdown-menu-dark 类已弃用，并替换为下拉菜单或任何父元素上的 data-bs-theme="dark"。 参阅文档以获取示例。

关闭按钮

• 已弃用 .btn-close-white 类已弃用，并替换为关闭按钮或任何父元素上的 data-bs-theme="dark"。 参阅文档以获取示例。

导航栏

• 已弃用 .navbar-dark 类已弃用，并替换为导航栏或任何父元素上的 data-bs-theme="dark"。 参阅文档以获取更新的示例。

进度条

v5.3.0 中进度条的标记已更新。由于将 role 和各种 aria- 属性放置在内部 .progress-bar 元素上，某些屏幕阅读器无法播报值为零的进度条。现在，role="progressbar" 和相关的 aria-* 属性位于外部 .progress 元素上，使 .progress-bar 仅用于条形图和可选标签的可视化呈现。

虽然我们建议采用新的标记以提高与所有屏幕阅读器的兼容性，但请注意，旧版进度条结构将继续像以前一样工作。

<!-- Previous markup -->
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- New markup -->
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%"></div>
</div>

我们还引入了一个新的 .progress-stacked 类，以便更合理地将 多个进度条包装到一个堆叠进度条中。

<!-- Previous markup -->
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Segment one" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment two" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment three" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- New markup -->
<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
    <div class="progress-bar"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
    <div class="progress-bar bg-success"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <div class="progress-bar bg-info"></div>
  </div>
</div>

表单

• .form-control 现在使用 CSS 变量进行样式化，以支持颜色模式。这包括添加两个新的根 CSS 变量，用于默认和禁用的表单控件背景。

• .form-check 和 .form-switch 组件现在使用 CSS 变量构建，用于设置 background-image。此处用法与其他组件不同，因为每个组件的各种焦点、活动等状态不会在基本类上设置。相反，状态会覆盖一个变量（例如，--bs-form-switch-bg）。

• 浮动表单标签现在具有 background-color，以修复对 <textarea> 元素的支持。还进行了其他更改，以支持禁用状态等。

• 修复了基于 WebKit 的浏览器中日期和时间输入的显示。

实用工具

• 已弃用 .text-muted 将在 v6 中替换为 .text-body-secondary。

  随着扩展的主题颜色和变量的添加，.text-muted 变量和实用工具已在 v5.3.0 中弃用。其默认值也已重新分配给新的 --bs-secondary-color CSS 变量，以更好地支持颜色模式。它将在 v6.0.0 中被移除。

• 添加了新的 .overflow-x、.overflow-y 和几个 .object-fit-* 实用工具。object-fit 属性用于指定如何调整 <img> 或 <video> 的大小以适合其容器，为我们提供了一种响应式替代方案，可使用 background-image 来填充/调整图像大小。

• 添加了新的 .fw-medium 实用工具。

• 添加了新的 .z-* 实用工具，用于 z-index。

• 框阴影实用工具（和 Sass 变量）已针对深色模式更新。他们现在使用 --bs-body-color-rgb 生成 rgba() 颜色值，允许他们根据指定的文本颜色轻松适应颜色模式。

有关更改的完整列表，请参阅 GitHub 上的 v5.3.0 项目。

v5.2.0

刷新设计

Bootstrap v5.2.0 对整个项目中的一些组件和属性进行了微妙的设计更新，最显着的是通过按钮和表单控件上精细的 border-radius 值。我们的文档也已更新，其中包含一个新的主页、不再折叠侧边栏部分的更简单的文档布局，以及 Bootstrap 图标 的更突出的示例。

更多 CSS 变量

我们已更新所有组件以使用 CSS 变量。虽然 Sass 仍支撑着所有内容，但每个组件都已更新为在组件基类（例如 .btn）中包含 CSS 变量，从而允许对 Bootstrap 进行更多实时自定义。在后续版本中，我们将继续扩大 CSS 变量在布局、表单、帮助程序和实用程序中的使用。在各个组件各自的文档页面上阅读有关每个组件中 CSS 变量的更多信息。

在 Bootstrap 6 之前，我们的 CSS 变量使用将有些不完整。虽然我们希望全面实施这些变量，但它们确实有导致重大更改的风险。例如，在源代码中设置 $alert-border-width: var(--bs-border-width) 会破坏你自己的代码中的潜在 Sass，如果你出于某种原因执行 $alert-border-width * 2。

因此，在可能的情况下，我们将继续推动更多 CSS 变量，但请注意我们的实现可能在 v5 中受到一些限制。

新的 _maps.scss

Bootstrap v5.2.0 引入了一个新的 Sass 文件，其中包含 _maps.scss。它从 _variables.scss 中提取了几个 Sass 映射，以修复对原始映射的更新未应用于扩展它们的辅助映射的问题。例如，对 $theme-colors 的更新未应用于依赖 $theme-colors 的其他主题映射，从而破坏了关键的自定义工作流。简而言之，Sass 有一个限制，即一旦默认变量或映射被使用，就无法更新它。当 CSS 变量用于组合其他 CSS 变量时，也会出现类似的缺点。

这就是为什么 Bootstrap 中的变量自定义必须在 @import "functions" 之后，但在 @import "variables" 和我们其余的导入堆栈之前的原因。Sass 映射也适用 - 你必须在使用默认值之前覆盖它们。以下映射已移至新的 _maps.scss

• $theme-colors-rgb
• $utilities-colors
• $utilities-text
• $utilities-text-colors
• $utilities-bg
• $utilities-bg-colors
• $negative-spacers
• $gutters

你现在使用单独的映射导入，你的自定义 Bootstrap CSS 构建应如下所示。

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

新的实用程序

• 扩展 font-weight 实用程序 以包含 .fw-semibold，用于半粗体字体。
• 扩展 border-radius 实用程序 以包含两个新尺寸，.rounded-4 和 .rounded-5，以提供更多选项。

其他更改

• 引入了新的 $enable-container-classes 选项。 — 现在，当选择加入实验性 CSS Grid 布局时，.container-* 类仍将被编译，除非此选项设置为 false。容器现在也保留其间距值。

• Offcanvas 组件现在具有 响应式变体。 原始的 .offcanvas 类保持不变——它隐藏所有视口中的内容。要使其响应，将该 .offcanvas 类更改为任何 .offcanvas-{sm|md|lg|xl|xxl} 类。

• 较粗的表格分隔线现在是可选项。 — 我们移除了表格组之间的更粗且更难覆盖的边框，并将其移至您可以应用的可选类 .table-group-divider。 参阅表格文档以获取示例。

• Scrollspy 已被重写 以使用 Intersection Observer API，这意味着您不再需要相对父级包装器，弃用 offset 配置，等等。期待您的 Scrollspy 实现更准确、导航突出显示更一致。

• 弹出框和工具提示现在使用 CSS 变量。 一些 CSS 变量已从其 Sass 对应项更新，以减少变量的数量。因此，此版本中弃用了三个变量：$popover-arrow-color、$popover-arrow-outer-color 和 $tooltip-arrow-color。

• 添加了新的 .text-bg-{color} 帮助器。 您可以使用 .text-bg-* 帮助器 设置 background-color 和对比前景 color，而不是设置单独的 .text-* 和 .bg-* 实用程序。

• 添加了 .form-check-reverse 修饰符，以颠倒标签和关联的复选框/单选按钮的顺序。

• 通过新的 .table-striped-columns 类，为表格添加了 条纹列 支持。

有关更改的完整列表，请参阅 GitHub 上的 v5.2.0 项目。

v5.1.0

• 添加了对 CSS Grid 布局 的实验性支持。 — 这是一个正在进行的工作，尚未准备好用于生产，但您可以通过 Sass 选择加入新功能。要启用它，请通过设置 $enable-grid-classes: false 禁用默认网格，并通过设置 $enable-cssgrid: true 启用 CSS Grid。

• 更新导航栏以支持离画布。 — 使用响应式 .navbar-expand-* 类和一些离画布标记在任何导航栏中添加 离画布抽屉。

• 添加了新的 占位符组件。 — 这是我们最新的组件，它提供了一个临时块来代替真实内容，以帮助指示您的网站或应用程序中仍有内容正在加载。

• 折叠插件现在支持 水平折叠。 — 将 .collapse-horizontal 添加到您的 .collapse 中以折叠 width 而不是 height。通过设置 min-height 或 height 来避免浏览器重新绘制。

• 添加了新的堆栈和垂直规则帮助器。 — 使用 堆栈 快速应用多个 flexbox 属性以快速创建自定义布局。从水平（.hstack）和垂直（.vstack）堆栈中进行选择。使用 新的 .vr 帮助器 添加类似于 <hr> 元素的垂直分隔符。

• 添加了新的全局 :root CSS 变量。 — 向 :root 级别添加了几个新的 CSS 变量，用于控制 <body> 样式。更多内容正在制作中，包括我们的实用程序和组件，但现在请阅读 自定义部分中的 CSS 变量。

• 彻底修改了颜色和背景实用程序以使用 CSS 变量，并添加了新的 文本不透明度 和 背景不透明度 实用程序。 — .text-* 和 .bg-* 实用程序现在使用 CSS 变量和 rgba() 颜色值构建，允许您使用新的不透明度实用程序轻松自定义任何实用程序。

• 添加了新的代码段示例，以展示如何自定义我们的组件。 — 使用我们新的 代码段示例 提取可随时使用的自定义组件和其他常见设计模式。包括 页脚、下拉菜单、列表组 和 模态框。

• 从弹出框和工具提示中删除了未使用的定位样式，因为这些样式仅由 Popper 处理。$tooltip-margin 已弃用，并在此过程中设置为 null。

想要了解更多信息？阅读 v5.1.0 博客文章。

v5.0.0

依赖项

• 删除了 jQuery。
• 从 Popper v1.x 升级到 Popper v2.x。
• 由于 Libsass 已弃用，因此用 Dart Sass 替换了 Libsass 作为我们的 Sass 编译器。
• 从 Jekyll 迁移到 Hugo 以构建我们的文档

浏览器支持

• 放弃 Internet Explorer 10 和 11
• 放弃 Microsoft Edge < 16（旧版 Edge）
• 放弃 Firefox < 60
• 放弃 Safari < 12
• 放弃 iOS Safari < 12
• 放弃 Chrome < 60

文档更改

• 重新设计了主页、文档布局和页脚。
• 添加了 新的 Parcel 指南。
• 添加了 新的自定义部分，替换了 v4 的主题页面，其中包含有关 Sass、全局配置选项、配色方案、CSS 变量等的详细信息。
• 将所有表单文档重新组织到 新的表单部分 中，将内容分解成更集中的页面。
• 类似地，更新了 布局部分，以更清晰地充实网格内容。
• 将“导航”组件页面重命名为“导航和选项卡”。
• 将“复选框”页面重命名为“复选框和单选框”。
• 重新设计了导航栏，并添加了一个新的子导航，以便更轻松地浏览我们的网站和文档版本。
• 为搜索字段添加了新的键盘快捷键：Ctrl + /。

Sass

• 我们放弃了默认的 Sass 映射合并，以便更轻松地删除冗余值。请记住，你现在必须在 Sass 映射中定义所有值，例如 $theme-colors。查看如何处理 Sass 映射。

• 重大变动 将 color-yiq() 函数和相关变量重命名为 color-contrast()，因为它不再与 YIQ 色彩空间相关。 参见 #30168。

  • $yiq-contrasted-threshold 已重命名为 $min-contrast-ratio。
  • $yiq-text-dark 和 $yiq-text-light 分别重命名为 $color-contrast-dark 和 $color-contrast-light。

• 重大变动 媒体查询混合参数已更改，以采用更合乎逻辑的方法。

  • media-breakpoint-down() 使用断点本身，而不是下一个断点（例如，media-breakpoint-down(lg) 而不是 media-breakpoint-down(md)，目标视口小于 lg）。
  • 类似地，media-breakpoint-between() 中的第二个参数也使用断点本身，而不是下一个断点（例如，media-breakpoint-between(sm, lg) 而不是 media-breakpoint-between(sm, md)，目标视口在 sm 和 lg 之间）。

• 重大变动 删除了打印样式和 $enable-print-styles 变量。打印显示类仍然存在。 参见 #28339。

• 重大变动 弃用了 color()、theme-color() 和 gray() 函数，转而使用变量。 参见 #29083。

• 重大变动 将 theme-color-level() 函数重命名为 color-level()，现在接受任何你想要的颜色，而不仅仅是 $theme-color 颜色。 参见 #29083 注意： color-level() 后来在 v5.0.0-alpha3 中被弃用。

• 重大变更 将 $enable-prefers-reduced-motion-media-query 和 $enable-pointer-cursor-for-buttons 重命名为 $enable-reduced-motion 和 $enable-button-pointers 以便简短。

• 重大变更 已移除 bg-gradient-variant() 混合。使用 .bg-gradient 类向元素添加渐变，而不是生成的 .bg-gradient-* 类。

• 重大变更 已移除先前不推荐使用的混合：

  • hover、hover-focus、plain-hover-focus 和 hover-focus-active
  • float()
  • form-control-mixin()
  • nav-divider()
  • retina-img()
  • text-hide()（也删除了关联的实用程序类 .text-hide）
  • visibility()
  • form-control-focus()

• 重大变更 将 scale-color() 函数重命名为 shift-color() 以避免与 Sass 自身的颜色缩放函数冲突。

• box-shadow 混合现在允许 null 值，并从多个参数中删除 none。 请参阅 #30394。

• border-radius() 混合现在具有默认值。

颜色系统

• 使用 color-level() 和 $theme-color-interval 的颜色系统已被移除，取而代之的是新的颜色系统。我们代码库中的所有 lighten() 和 darken() 函数都已被 tint-color() 和 shade-color() 替换。这些函数将颜色与白色或黑色混合，而不是按固定量改变其亮度。shift-color() 将根据其权重参数是正还是负来对颜色进行色调或阴影调整。 请参阅 #30622 了解更多详情。

• 为每种颜色添加了新的色调和阴影，为每种基本颜色提供了九种不同的颜色，作为新的 Sass 变量。

• 提高了颜色对比度。将颜色对比度从 3:1 提高到 4.5:1，并更新了蓝色、绿色、青色和粉色的颜色，以确保 WCAG 2.1 AA 对比度。还将我们的颜色对比度颜色从 $gray-900 更改为 $black。

• 为了支持我们的颜色系统，我们添加了新的自定义 tint-color() 和 shade-color() 函数，以适当地混合我们的颜色。

网格更新

• 新的断点！ 为 1400px 及以上添加了新的 xxl 断点。所有其他断点均无变化。

• 改进的间距。 间距现在以 rem 为单位设置，并且比 v4（1.5rem，约 24px，低于 30px）更窄。这使我们的网格系统的间距与我们的间距实用程序保持一致。

  • 添加了新的 间距类（.g-*、.gx-* 和 .gy-*）来控制水平/垂直间距、水平间距和垂直间距。
  • 重大变更 将 .no-gutters 重命名为 .g-0 以匹配新的间距实用程序。

• 列不再应用 position: relative，因此您可能需要向某些元素添加 .position-relative 以恢复该行为。

• 重大变更 删除了几个经常未使用的 .order-* 类。我们现在只提供开箱即用的 .order-1 到 .order-5。

• 重大变更 删除了 .media 组件，因为它可以使用实用程序轻松复制。 参见 #28265 和 弹性实用程序页面以获取示例。

• 重大变更 bootstrap-grid.css 现在仅对列应用 box-sizing: border-box，而不是重置全局 box-sizing。这样，我们的网格样式可以在更多地方使用，而不会受到干扰。

• $enable-grid-classes 不再禁用容器类的生成。 参见 #29146。

• 更新了 make-col 混合，使其在未指定大小的情况下默认为相等的列。

内容、重置等

• RFS 现在默认启用。使用 font-size() 混合的标题将自动调整其 font-size 以适应视口。此功能以前在 v4 中是可选择的。

• 重大变更 改进了我们的显示字体，以替换我们的 $display-* 变量和 $display-font-sizes Sass 映射。还删除了单个 $display-*-weight 变量，以获得单个 $display-font-weight 并调整 font-size。

• 添加了两个新的 .display-* 标题大小，.display-5 和 .display-6。

• 链接默认带下划线（不仅仅是悬停时），除非它们是特定组件的一部分。

• 重新设计表格以刷新其样式，并使用 CSS 变量重新构建它们，以便更好地控制样式。

• 重大变更 嵌套表格不再继承样式。

• 重大变更 弃用 .thead-light 和 .thead-dark，转而使用 .table-* 变体类，这些类可用于所有表格元素（thead、tbody、tfoot、tr、th 和 td）。

• 重大变更 table-row-variant() 混合重命名为 table-variant()，并且仅接受 2 个参数：$color（颜色名称）和 $value（颜色代码）。边框颜色和强调色会根据表格因子变量自动计算。

• 将表格单元格填充变量拆分为 -y 和 -x。

• 重大变更 删除了 .pre-scrollable 类。 参见 #29135

• 中断 .text-* 实用程序不再为链接添加悬停和焦点状态。可以使用 .link-* 帮助器类。 参见 #29267

• 中断 删除 .text-justify 类。 参见 #29793

• 中断 <hr> 元素现在使用 height 而不是 border 来更好地支持 size 属性。这也支持使用填充实用程序来创建更粗的分隔符（例如，<hr class="py-1">）。

• 将 <ul> 和 <ol> 元素的默认水平 padding-left 从浏览器的默认值 40px 重置为 2rem。

• 添加 $enable-smooth-scroll，它全局应用 scroll-behavior: smooth，但通过 prefers-reduced-motion 媒体查询要求减少运动的用户除外。 参见 #31877

RTL

• 特定于水平方向的变量、实用程序和混合已全部重命名，以使用逻辑属性，如在 flexbox 布局中找到的属性，例如使用 start 和 end 代替 left 和 right。

表单

• 添加新的浮动表单！我们已将浮动标签示例提升为完全受支持的表单组件。 参见新的浮动标签页面。

• 中断 合并原生和自定义表单元素。在 v4 中具有原生和自定义类的复选框、单选按钮、选择框和其他输入已合并。现在几乎我们所有的表单元素都是完全自定义的，大多数不需要自定义 HTML。

  • .custom-control.custom-checkbox 现在是 .form-check。
  • .custom-control.custom-radio 现在是 .form-check。
  • .custom-control.custom-switch 现在是 .form-check.form-switch。
  • .custom-select 现在是 .form-select。
  • .custom-file 和 .form-control-file 已被 .form-control 上的自定义样式所取代。
  • .custom-range 现在是 .form-range。
  • 删除原生 .form-control-file 和 .form-control-range。

• 中断 删除 .input-group-append 和 .input-group-prepend。你现在可以将按钮和 .input-group-text 直接添加为输入组的子元素。

• 长期存在的 输入组中缺少验证反馈错误的边框半径 问题终于通过向带有验证的输入组添加一个额外的 .has-validation 类来修复。

• 重大更新 为我们的网格系统删除了特定于表单的布局类。 使用我们的网格和实用程序，而不是 .form-group、.form-row 或 .form-inline。

• 重大更新 表单标签现在需要 .form-label。

• 重大更新 .form-text 不再设置 display，允许您通过更改 HTML 元素来创建内联或块帮助文本。

• 表单控件在可能的情况下不再使用固定的 height，而是推迟到 min-height 以提高自定义和与其他组件的兼容性。

• 验证图标不再应用于带有 multiple 的 <select>。

• 重新排列 scss/forms/ 下的源 Sass 文件，包括输入组样式。

组件

• 统一警报、面包屑、卡片、下拉菜单、列表组、模态框、弹出框和工具提示的 padding 值，使其基于我们的 $spacer 变量。 参见 #30564。

手风琴

• 添加了 新的手风琴组件。

警报

• 警报现在有 带图标的示例。

• 删除了每个警报中 <hr> 的自定义样式，因为它们已经使用了 currentColor。

徽章

• 重大更新 删除了所有用于背景实用程序的 .badge-* 颜色类（例如，使用 .bg-primary 代替 .badge-primary）。

• 重大更新 删除了 .badge-pill，请改用 .rounded-pill 实用程序。

• 重大更新 删除了 <a> 和 <button> 元素的悬停和焦点样式。

• 将徽章的默认填充从 .25em/.5em 增加到 .35em/.65em。

面包屑

• 通过删除 padding、background-color 和 border-radius 简化了面包屑的默认外观。

• 添加了新的 CSS 自定义属性 --bs-breadcrumb-divider，无需重新编译 CSS 即可轻松自定义。

按钮

• 重大变更 切换按钮，带复选框或单选按钮，不再需要 JavaScript，并且具有新的标记。我们不再需要包装元素，将 .btn-check 添加到 <input>，并将其与 <label> 上的任何 .btn 类配对。 请参阅 #30650。此文档已从我们的按钮页面移至新的表单部分。

• 重大变更 已删除实用工具中的 .btn-block。不要在 .btn 上使用 .btn-block，而是用 .d-grid 和 .gap-* 实用工具包装按钮，以根据需要对它们进行间距。切换到响应式类，以获得对它们的更多控制。 阅读文档以获取一些示例。

• 更新了我们的 button-variant() 和 button-outline-variant() 混合，以支持其他参数。

• 更新了按钮，以确保在悬停和活动状态下提高对比度。

• 禁用的按钮现在具有 pointer-events: none;。

卡片

• 重大变更 弃用 .card-deck，转而使用我们的网格。将卡片包装在列类中，并添加父 .row-cols-* 容器以重新创建卡片组（但对响应式对齐有更多控制）。

• 重大变更 弃用 .card-columns，转而使用 Masonry。 请参阅 #28922。

• 重大变更 用 新的手风琴组件 替换了基于 .card 的手风琴。

走马灯

• 添加了新的 .carousel-dark 变体，用于深色文本、控件和指示器（非常适合较浅的背景）。

• 使用 Bootstrap 图标 中的新 SVG 替换了旋转木马控件的鱼骨形图标。

关闭按钮

• 重大变更 将 .close 重命名为 .btn-close，以获得一个更不常见的名称。

• 关闭按钮现在使用 background-image（嵌入式 SVG）而不是 HTML 中的 ×，这样可以更轻松地自定义，而无需触及标记。

• 添加了新的 .btn-close-white 变体，它使用 filter: invert(1) 来启用对比度更高的关闭图标，以应对较暗的背景。

折叠

• 删除手风琴的滚动锚定。

下拉菜单

• 添加了新的 .dropdown-menu-dark 变体和关联变量，用于按需的暗色下拉菜单。

• 添加了 $dropdown-padding-x 的新变量。

• 加深了下拉菜单分隔符的颜色，以提高对比度。

• 重大变更 下拉菜单的所有事件现在都在下拉菜单切换按钮上触发，然后冒泡到父元素。

• 当下拉菜单的位置为静态时，或者下拉菜单位于导航栏中时，下拉菜单现在具有 data-bs-popper="static" 属性集。这是由我们的 JavaScript 添加的，它帮助我们使用自定义位置样式，而不会干扰 Popper 的定位。

• 重大变更 舍弃了下拉菜单插件的 flip 选项，转而使用本机 Popper 配置。您现在可以通过传递 fallbackPlacements 选项的空数组来禁用翻转行为，该选项位于 flip 修饰符中。

• 下拉菜单现在可以通过新的 autoClose 选项来实现可点击，以处理 自动关闭行为。您可以使用此选项接受下拉菜单内部或外部的点击，使其具有交互性。

• 下拉菜单现在支持用 <li> 包装的 .dropdown-item。

巨型按钮

• 重大变更 删除了巨型按钮组件，因为它可以通过实用程序复制。 查看我们的新巨型按钮示例以了解演示。

列表组

• 为列表组添加了新的 .list-group-numbered 修饰符。

导航和选项卡

• 为 .nav-link 类添加了 font-size、font-weight、color 和 :hover color 的新 null 变量。

导航栏

• 重大变更 导航栏现在需要一个容器（以极大地简化间距要求和所需的 CSS）。
• 重大变更 .active 类不能再应用于 .nav-item，它必须直接应用于 .nav-link。

侧边栏

• 添加了新的 侧边栏组件。

分页

• 分页链接现在具有可自定义的 margin-left，当彼此分开时，所有角都会动态舍入。

• 为分页链接添加了 transition。

弹出框

• 重大变更 在我们的默认弹出框模板中将 .arrow 重命名为 .popover-arrow。

• 将 whiteList 选项重命名为 allowList。

加载动画

• 加载动画现在通过减慢动画来响应 prefers-reduced-motion: reduce。 请参阅 #31882。

• 改进了加载动画的垂直对齐方式。

提示

• 提示现在可以在 .toast-container 中 定位，借助 定位实用程序。

• 将默认提示持续时间更改为 5 秒。

• 从提示中删除了 overflow: hidden，并用带有 calc() 函数的适当 border-radius 替换。

工具提示

• 重大变更 在我们的默认工具提示模板中将 .arrow 重命名为 .tooltip-arrow。

• 重大变更 fallbackPlacements 的默认值已更改为 ['top', 'right', 'bottom', 'left']，以更好地放置 popper 元素。

• 重大变更 将 whiteList 选项重命名为 allowList。

实用程序

• 重大更新 重命名了多个实用程序，使其使用逻辑属性名称，而不是方向性名称，并增加了 RTL 支持

  • 将 .float-left 和 .float-right 重命名为 .float-start 和 .float-end。
  • 将 .border-left 和 .border-right 重命名为 .border-start 和 .border-end。
  • 将 .rounded-left 和 .rounded-right 重命名为 .rounded-start 和 .rounded-end。
  • 将 .ml-* 和 .mr-* 重命名为 .ms-* 和 .me-*。
  • 将 .pl-* 和 .pr-* 重命名为 .ps-* 和 .pe-*。
  • 将 .text-*-left 和 .text-*-right 重命名为 .text-*-start 和 .text-*-end。

• 重大更新 默认情况下禁用负边距。

• 添加了新的 .bg-body 类，用于快速将 <body> 的背景设置为其他元素。

• 添加了新的 位置实用程序，用于 top、right、bottom 和 left。每个属性的值包括 0、50% 和 100%。

• 添加了新的 .translate-middle-x 和 .translate-middle-y 实用程序，用于水平或垂直居中绝对/固定定位元素。

• 添加了新的 border-width 实用程序。

• 重大更新 将 .text-monospace 重命名为 .font-monospace。

• 重大更新 删除了 .text-hide，因为它是一种过时的隐藏文本方法，不再应该使用。

• 添加了 .fs-* 实用程序，用于 font-size 实用程序（启用 RFS）。它们使用与 HTML 默认标题（1-6，从大到小）相同的比例，并且可以通过 Sass 映射进行修改。

• 重大更新 将 .font-weight-* 实用程序重命名为 .fw-*，以简化和保持一致性。

• 重大更新 将 .font-italic 实用程序重命名为 .fst-italic，以简化并与新的 .fst-normal 实用程序保持一致。

• 添加了 .d-grid 以显示实用程序和新的 gap 实用程序（.gap），用于 CSS Grid 和 flexbox 布局。

• 重大变更 已移除 .rounded-sm 和 rounded-lg，并引入了一个新的类规模，.rounded-0 到 .rounded-3。 参见 #31687。

• 添加了新的 line-height 实用工具：.lh-1、.lh-sm、.lh-base 和 .lh-lg。请参见 此处。

• 将 .d-none 实用工具移至我们的 CSS 中，以使其比其他显示实用工具更重要。

• 扩展了 .visually-hidden-focusable 帮助器，使其也能使用 :focus-within 在容器上工作。

帮助器

• 重大变更 响应式嵌入帮助器已重命名为 比例帮助器，具有新的类名和改进的行为，以及一个有用的 CSS 变量。

  • 类已重命名，将纵横比中的 by 更改为 x。例如，.ratio-16by9 现在为 .ratio-16x9。
  • 我们放弃了 .embed-responsive-item 和元素组选择器，转而使用更简单的 .ratio > * 选择器。不再需要类，比例帮助器现在适用于任何 HTML 元素。
  • $embed-responsive-aspect-ratios Sass 映射已重命名为 $aspect-ratios，其值已简化为包括类名和百分比作为 key: value 对。
  • 现在为 Sass 映射中的每个值生成并包含 CSS 变量。修改 .ratio 上的 --bs-aspect-ratio 变量，以创建任何 自定义纵横比。

• 重大变更 “屏幕阅读器”类现在是 “视觉隐藏”类。

  • 将 Sass 文件从 scss/helpers/_screenreaders.scss 更改为 scss/helpers/_visually-hidden.scss
  • 将 .sr-only 和 .sr-only-focusable 重命名为 .visually-hidden 和 .visually-hidden-focusable
  • 将 sr-only() 和 sr-only-focusable() 混合重命名为 visually-hidden() 和 visually-hidden-focusable()。

• bootstrap-utilities.css 现在还包括我们的帮助器。在自定义构建中不再需要导入帮助器。

JavaScript

• 放弃了 jQuery 依赖项，并重写了插件以使其成为常规 JavaScript。

• 重大变更 现在，所有 JavaScript 插件的数据属性都已命名空间化，以帮助区分 Bootstrap 功能和第三方以及您自己的代码。例如，我们使用 data-bs-toggle 而不是 data-toggle。

• 所有插件现在都可以将 CSS 选择器作为第一个参数。你可以传递一个 DOM 元素或任何有效的 CSS 选择器来创建插件的新实例

  const modal = new bootstrap.Modal('#myModal')
  const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
  

• popperConfig 可以作为接受 Bootstrap 默认 Popper 配置作为参数的函数传递，以便你可以按照自己的方式合并此默认配置。适用于下拉菜单、弹出框和工具提示。

• fallbackPlacements 的默认值已更改为 ['top', 'right', 'bottom', 'left']，以更好地放置 Popper 元素。适用于下拉菜单、弹出框和工具提示。

• 从公共静态方法中删除下划线，例如 _getInstance() → getInstance()。