迁移到 v5

v5.3.6

依赖

🌐 Dependencies

• 已从 Hugo 迁移到 Astro 以构建我们的文档

v5.3.0

如果你要从我们之前的 v5.3.0 alpha 版本迁移，除了本节内容外，还请查看之前的变更。

🌐 If you’re migrating from our previous alpha releases of v5.3.0, please review their changes in addition to this section.

帮手

🌐 Helpers

• 彩色链接 再次拥有 !important，因此它们可以更好地与我们新添加的链接工具一起使用。

实用工具

🌐 Utilities

• 添加了新的 .d-inline-grid 显示工具。

v5.3.0-alpha2

如果你要从我们之前的 v5.3.0 alpha 版本迁移，请查看下面列出的更改。

🌐 If you’re migrating from our previous alpha release of v5.3.0, please review the changes listed below.

CSS 变量

🌐 CSS variables

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

色彩模式

🌐 Color modes

• 夜间模式的颜色现在是从我们的主题颜色（例如，$primary）在 Sass 中派生的，而不是特定颜色的色调或阴影（例如，$blue-300）。这使得在自定义默认主题颜色时能够实现更自动化的夜间模式。
• 添加了 Sass 映射，用于生成夜间模式文本、微妙背景和微妙边框的主题颜色。
• 示例片段 现在已准备好适应夜间模式，具有更新的标记和减少的自定义样式。
• 已将 color-scheme: dark 添加到夜间模式 CSS 以更改操作系统级别的控件，如滚动条
• 表单验证 border-color 和文本 color 状态现在响应夜间模式，这要归功于新的 Sass 和 CSS 变量。
• 删除了最近添加的表单控件背景 CSS 变量，并重新分配了 Sass 变量以改用 CSS 变量。这简化了跨颜色模式的样式，并避免了夜间模式下表单控件无法正确更新的问题。
• 我们的 box-shadow 将再次始终保持黑夜间模式下为黑色，而不是在夜间模式下反转为白色。
• 改进了我们颜色模式切换脚本的 HTML 和 JavaScript。用于更改活动 SVG 的选择器得到了改进，并且标记通过 ARIA 属性变得更加易于访问。
• 改进了浅色和夜间模式下的文档代码语法颜色等。

版式

🌐 Typography

• 我们不再为夜间模式设置 $headings-color-dark 或 --bs-heading-color 的颜色。为了避免组件内标题显示错误颜色的多个问题，我们已将 Sass 变量设置为 null，并添加了一个 null 检查，就像我们在默认的浅色模式中使用的那样。

组件

🌐 Components

• 卡片现在在其上有一个 color 集，以改善不同颜色模式下的渲染。
• 为我们的导航添加了新的 .nav-underline 变体，在活动导航链接下方使用了更简单的底部边框。查看文档示例。
• 导航现在有了新的 :focus-visible 样式，更好地匹配我们的自定义按钮焦点样式。

帮手

🌐 Helpers

• 新增了 .icon-link 辅助工具，可快速将 Bootstrap 图标与文本链接并排放置和对齐。图标链接也支持我们的新链接工具类。
• 添加了新的焦点环辅助，用于移除默认的 outline 并设置自定义的 box-shadow 焦点环。

实用工具

🌐 Utilities

• 将 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 取代。

文档

🌐 Docs

• 示例现在会根据我们文档中的设置显示为相应的亮色或暗色模式。每个示例都有单独的颜色模式选择器。
• 改进了实时 Toast 演示的 JavaScript。
• 已将 twbs/examples 仓库内容添加到示例页面的顶部。

工具

🌐 Tooling

• 通过 True 添加了 SCSS 测试，以帮助测试我们的工具 API 和其他自定义项。
• 将我们 bootstrap-npm-starter 项目的实例替换为更新且更完整的 twbs/examples 仓库。

有关完整的更改列表，请查看 GitHub 上的 v5.3.0-alpha2 项目。

🌐 For a complete list of changes, see the v5.3.0-alpha2 project on GitHub.

v5.3.0-alpha1

色彩模式！

🌐 Color modes!

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

🌐 Learn more by reading the new color modes documentation.

• 全局支持浅色（默认）和夜间模式。 可以在 :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 variables

• 恢复断点的 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。

组件

🌐 Components

警报

🌐 Alert

• 警报变体现在通过 CSS 变量设置样式。
• 已弃用 alert-variant() mixin 现已弃用。我们现在直接使用 Sass 循环 来修改每个变体的组件默认 CSS 变量。

列表组

🌐 List group

• 列表组项目变体现在通过 CSS 变量设置样式。
• 已弃用 list-group-item-variant() mixin 现在已弃用。我们现在直接使用 Sass 循环 来修改每个变体的组件默认 CSS 变量。

下拉菜单

🌐 Dropdowns

• 已弃用 .dropdown-menu-dark 类已被弃用，并在下拉菜单或任何父元素上被 data-bs-theme="dark" 替代。查看文档示例

关闭按钮

🌐 Close button

• 已弃用 .btn-close-white 类已被弃用，并在关闭按钮或任何父元素上被 data-bs-theme="dark" 取代。查看文档示例。

导航栏

🌐 Navbar

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

进度条

🌐 Progress bars

在 v5.3.0 中，进度条 的标记已更新。由于 role 的放置位置以及内部 .progress-bar 元素上的各种 aria- 属性，一些屏幕阅读器未能朗读零值进度条。现在，role="progressbar" 及相关的 aria-* 属性位于外部 .progress 元素上，.progress-bar 仅用于进度条的视觉显示和可选标签。

🌐 The markup for progress bars has been updated in v5.3.0. Due to the placement of role and various aria- attributes on the inner .progress-bar element, some screen readers were not announcing zero value progress bars. Now, role="progressbar" and the relevant aria-* attributes are on the outer .progress element, leaving the .progress-bar purely for the visual presentation of the bar and optional label.

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

🌐 While we recommend adopting the new markup for improved compatibility with all screen readers, note that the legacy progress bar structure will continue to work as before.

<!-- 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 类，以更合逻辑地将多个进度条封装到一个堆叠进度条中。

🌐 We’ve also introduced a new .progress-stacked class to more logically wrap multiple progress bars into a single stacked progress bar.

<!-- 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>

表单

🌐 Forms

• .form-control现在使用CSS变量进行样式设计，以支持颜色模式。这包括为默认和禁用的表单控件背景添加两个新的根CSS变量。
• .form-check 和 .form-switch 组件现在使用 CSS 变量来设置 background-image。这里的用法与其他组件不同，因为每个组件的各种焦点、活动等状态不会设置在基础类上。相反，这些状态会覆盖一个变量（例如，--bs-form-switch-bg）。
• 浮动表单标签现在有一个 background-color 来修复对 <textarea> 元素的支持。还进行了其他更改，以支持禁用状态等更多功能。
• 修复了基于 WebKit 的浏览器中日期和时间输入的显示。

实用工具

🌐 Utilities

• 已弃用 .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-index 添加了新的 .z-* 实用工具。

• 盒子阴影工具（以及 Sass 变量）已针对夜间模式进行了更新。它们现在使用 --bs-body-color-rgb 来生成 rgba() 颜色值，从而可以根据指定的前景色轻松适应颜色模式。

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

🌐 For a complete list of changes, see the v5.3.0 project on GitHub.

v5.2.0

焕然一新的设计

🌐 Refreshed design

Bootstrap v5.2.0 在整个项目的一些组件和属性上进行了细微的设计更新，最显著的是通过对按钮和表单控件的 border-radius 值进行了优化。我们的文档也已更新，包括全新的首页、更简化的文档布局（侧边栏部分不再折叠），以及更突出的 Bootstrap Icons 示例。

🌐 Bootstrap v5.2.0 features a subtle design update for a handful of components and properties across the project, most notably through refined border-radius values on buttons and form controls. Our documentation also has been updated with a new homepage, simpler docs layout that no longer collapses sections of the sidebar, and more prominent examples of Bootstrap Icons.

更多 CSS 变量

🌐 More CSS variables

我们已将所有组件更新为使用 CSS 变量。 虽然 Sass 仍然是所有内容的基础，但每个组件都已更新，在组件基类（例如 .btn）中包含 CSS 变量，从而允许对 Bootstrap 进行更多实时自定义。在后续版本中，我们将继续在布局、表单、辅助功能和工具类中扩展 CSS 变量的使用。在各组件的文档页面上，可以了解更多关于 CSS 变量的信息。

在 Bootstrap 6 之前，我们的 CSS 变量使用将会有些不完整。虽然我们希望能够在各处完全实现这些变量，但它们确实有可能引起破坏性更改。例如，如果你在自己的代码中出于某种原因使用 $alert-border-width * 2，在我们的源代码中设置 $alert-border-width: var(--bs-border-width) 就可能破坏潜在的 Sass。

🌐 Our CSS variable usage will be somewhat incomplete until Bootstrap 6. While we’d love to fully implement these across the board, they do run the risk of causing breaking changes. For example, setting $alert-border-width: var(--bs-border-width) in our source code breaks potential Sass in your own code if you were doing $alert-border-width * 2 for some reason.

因此，只要有可能，我们将继续推动更多的 CSS 变量，但请注意我们的实现在 v5 中可能会受到轻微限制。

🌐 As such, wherever possible, we will continue to push towards more CSS variables, but please recognize our implementation may be slightly limited in v5.

新的 _maps.scss

🌐 New _maps.scss

Bootstrap v5.2.0 引入了一个带有 _maps.scss 的新 Sass 文件。 它从 _variables.scss 中提取了几个 Sass 映射，以解决一个问题，即对原始映射的更新没有应用到扩展它们的次级映射。例如，对 $theme-colors 的更新没有应用到依赖 $theme-colors 的其他主题映射，从而破坏了关键的自定义工作流程。总之，Sass 有一个限制，一旦默认变量或映射被_使用_，它就无法更新。当 CSS 变量用于组合其他 CSS 变量时，也存在类似的不足。

这就是为什么在 Bootstrap 中，变量自定义必须在 @import "functions" 之后，但在 @import "variables" 以及我们导入栈的其余部分之前进行。同样适用于 Sass 映射——你必须在默认值被使用之前重写它们。以下映射已被移至新的 _maps.scss:

🌐 This is why variable customizations in Bootstrap have to come after @import "functions", but before @import "variables" and the rest of our import stack. The same applies to Sass maps—you must override the defaults before they get used. The following maps have been moved to the new _maps.scss:

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

你的自定义 Bootstrap CSS 构建现在应该看起来像这样，带有单独的映射导入。

🌐 Your custom Bootstrap CSS builds should now look something like this with a separate maps import.

  // 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

新实用工具

🌐 New utilities

• 将 font-weight 工具 扩展为包括 .fw-semibold 用于半粗体字体。
• 扩展了border-radius 工具，包括两个新尺寸，.rounded-4 和 .rounded-5，以提供更多选项。

额外的变化

🌐 Additional changes

• 引入了新的 $enable-container-classes 选项。— 现在在选择实验性的 CSS 网格布局时，.container-* 类仍然会被编译，除非将此选项设置为 false。容器现在也会保留它们的间距值。
• 侧边栏组件现在有响应式变体。 原始的 .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-* 辅助工具 来设置带有对比前景色 color 的 background-color，而无需单独设置 .text-* 和 .bg-* 工具。
• 添加了 .form-check-reverse 修饰符以翻转标签和相关复选框/单选按钮的顺序。
• 通过新的 .table-striped-columns 类为表格添加了 条纹列 支持。

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

🌐 For a complete list of changes, see the v5.2.0 project on GitHub.

v5.1.0

• 新增对 CSS 网格布局 的实验性支持。— 这是一个正在进行中的项目，还未准备好用于生产环境，但你可以通过 Sass 选择使用该新功能。要启用它，请通过设置 $enable-grid-classes: false 来禁用默认网格，并通过设置 $enable-cssgrid: true 来启用 CSS 网格。
• 已更新导航栏以支持离屏菜单。— 使用响应式 .navbar-expand-* 类和一些离屏标记，在任何导航栏中添加离屏抽屉。
• 添加了新的占位组件。— 我们最新的组件，一种在真实内容尚未加载时提供临时块的方法，以帮助表明你的网站或应用中的内容仍在加载中。
• 折叠插件现在支持水平折叠。 — 在你的 .collapse 中添加 .collapse-horizontal 以折叠 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 博客文章。

🌐 Want more information? Read the v5.1.0 blog post.

v5.0.0

依赖

🌐 Dependencies

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

浏览器支持

🌐 Browser support

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

文档变更

🌐 Documentation changes

• 重新设计了主页、文档布局和页脚。
• 已添加 新的封装指南。
• 添加了新的自定义部分，替换了v4 的主题页面，包含关于 Sass、全局配置选项、色彩方案、CSS 变量等的新详细信息。
• 将所有表单文档重新整理到 新表单部分，将内容分解为更集中的页面。
• 同样，更新了布局部分，以更清楚地阐述网格内容。
• 已将“Navs”组件页面重命名为“Navs & Tabs”。
• 将“Checks”页面重命名为“Checks & radios”
• 重新设计了导航栏并添加了新的子导航，以便更轻松地浏览我们的网站和文档版本。
• 为搜索字段添加了新的键盘快捷键： 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。
• Breaking 媒体查询混入参数已更改，以采用更合理的方法。
  • 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］(https://github.com/twbs/bootstrap/pull/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-* 类。
• 破坏性变更 移除之前弃用的 mixins：
  • 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 system

• 与 color-level() 和 $theme-color-interval 配合使用的颜色系统已被移除，取而代之的是新的颜色系统。我们代码库中的所有 lighten() 和 darken() 函数已被 tint-color() 和 shade-color() 替换。这些函数将通过与白色或黑色混合来改变颜色，而不是通过固定量改变其亮度。shift-color() 将根据其权重参数是正数还是负数来为颜色着色或阴影。更多详情请参见 #30622 。
• 为每种颜色添加了新的色调和阴影，为每种基色提供九种单独的颜色，作为新的 Sass 变量。
• 改进了颜色对比度。将颜色对比度从 3:1 提升到 4.5:1，并更新了蓝色、绿色、青色和粉色，以确保符合 WCAG 2.2 AA 对比度要求。同时将我们的颜色对比色从 $gray-900 改为 $black。
• 为了支持我们的颜色系统，我们添加了新的自定义 tint-color() 和 shade-color() 函数，以适当地混合我们的颜色。

网格更新

🌐 Grid updates

• 新断点！ 为 1400px 及以上添加了新的 xxl 断点。其他所有断点未做更改。
• 改进的装订线。 装订线现在以 rem 为单位设置，并且比 v4 更窄（1.5rem，约为 24px，从 30px 缩小）。这使我们的网格系统的装订线与我们的间距工具保持一致。
  • 新增了新的gutter 类（.g-*、.gx-* 和 .gy-*），用于控制水平/垂直间距、水平间距和垂直间距。
  • 断裂 将 .no-gutters 重命名为 .g-0 以匹配新的间距工具。
• 列不再应用 position: relative，所以你可能需要在某些元素上添加 .position-relative 来恢复该行为。
• 中断 删除了几个经常未使用的 .order-* 类。我们现在仅提供从 .order-0 到 .order-5 的默认支持。
• 破坏 删除了 .media 组件，因为它可以通过工具轻松复制。参见 #28265 以及 flex 工具页面的示例。
• Breaking bootstrap-grid.css 现在只将 box-sizing: border-box 应用于列，而不是重置全局 box-sizing。这样，我们的网格样式可以在更多地方使用而不会互相干扰。
• $enable-grid-classes 不再禁用容器类的生成。参见 #29146。
• 已更新 make-col mixin，使其在未指定大小时默认为等宽列。

内容、重启等

🌐 Content, Reboot, etc

• RFS 现在默认启用。 使用 font-size() 混入的标题将自动调整其 font-size 以适应视口。此功能在 v4 中以前是可选择的。
• 突破 彻底改造了我们的显示排版，用一个 $display-font-sizes Sass 映射替换我们的 $display-* 变量。同时移除了单个 $display-font-weight 的各个 $display-*-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
• Breaking .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。

表单

🌐 Forms

• 新增悬浮表单！ 我们已将悬浮标签示例升级为全面支持的表单组件。 查看新的悬浮标签页面。
• 更新 整合了原生和自定义表单元素。 在 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 文件，包括输入组样式。

组件

🌐 Components

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

手风琴

🌐 Accordion

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

警报

🌐 Alerts

• 警报现在有带图标的示例。
• 移除了每个警报中 <hr> 的自定义样式，因为它们已经使用 currentColor。

徽章

🌐 Badges

• 重大更新 已删除背景工具的所有 .badge-* 颜色类（例如，使用 .bg-primary 替代 .badge-primary）。
• 已弃用 不再使用 .badge-pill —— 请改用 .rounded-pill 工具。
• 断开 已删除 <a> 和 <button> 元素的悬停和聚焦样式。
• 将徽章的默认内边距从 .25em/.5em 增加到 .35em/.65em。

面包屑

🌐 Breadcrumbs

• 通过移除 padding、background-color 和 border-radius 简化了面包屑的默认显示。
• 添加了新的 CSS 自定义属性 --bs-breadcrumb-divider，以便轻松自定义，无需重新编译 CSS。

按钮

🌐 Buttons

• 重大变更 切换按钮，无论是复选框还是单选按钮，不再需要 JavaScript，并且有了新的标记。 我们不再要求使用封装元素，只需将 .btn-check 添加到 <input>，并将其与 <label> 上的任意 .btn 类配对。参见 #30650。该文档已从我们的按钮页面移至新的表单部分。
• 破裂 为了实用工具而放弃了 .btn-block。 与其在 .btn 上使用 .btn-block，不如用 .d-grid 封装你的按钮，并使用 .gap-* 工具类按需调整间距。切换到响应式类以获得对它们的更多控制。查看文档以获取一些示例。
• 更新了我们的 button-variant() 和 button-outline-variant() 混入，以支持额外的参数。
• 更新了按钮以确保增加悬停和活动状态的对比度。
• 禁用的按钮现在有 pointer-events: none;。

卡片

🌐 Card

• 断裂 放弃了 .card-deck，转而使用我们的网格。将你的卡片封装在列类中，并添加一个父级 .row-cols-* 容器以重新创建卡片组（但可以更好地控制响应式对齐）。
• 重大更新 放弃了 .card-columns，改为使用 Masonry。参见 #28922。
• 更换 将基于 .card 的手风琴替换为 新的手风琴组件。

轮播

🌐 Carousel

• 为深色文本、控件和指示器添加了新的 .carousel-dark 变体（非常适合较浅的背景）。
• 将轮播控件的箭头图标替换为来自 Bootstrap 图标 的新 SVG。

关闭按钮

🌐 Close button

• 断开 将 .close 重命名为 .btn-close 以获得一个不那么通用的名称。
• 关闭按钮现在使用 background-image（嵌入式 SVG）而不是 HTML 中的 ×，从而可以更轻松地进行自定义，而无需修改你的标记。
• 添加了使用 filter: invert(1) 的新 .btn-close-white 变体，以在较暗的背景上实现更高对比度的关闭图标。

坍塌

🌐 Collapse

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

下拉菜单

🌐 Dropdowns

• 添加了新的 .dropdown-menu-dark 变体及与按需深色下拉菜单相关的变量。
• 为 $dropdown-padding-x 添加了新变量。
• 使下拉分隔线变暗以提高对比度。
• 突破 下拉菜单的所有事件现在都在下拉切换按钮上触发，然后冒泡到父元素。
• 当下拉菜单的位置是静态的，或者下拉菜单在导航栏中时，下拉菜单现在会设置一个 data-bs-popper="static" 属性。这是由我们的 JavaScript 添加的，帮助我们使用自定义位置样式而不干扰 Popper 的定位。
• 变更 为了使用原生 Popper 配置，已删除下拉插件的 flip 选项。现在，你可以通过在 flip 修改器中的 fallbackPlacements 选项传入一个空数组来禁用翻转行为。
• 下拉菜单现在可以通过新的 autoClose 选项进行点击，以处理自动关闭行为。你可以使用此选项来接受下拉菜单内或外的点击，使其具有交互性。
• 下拉菜单现在支持被 <li> 封装的 .dropdown-item。

超大屏幕

🌐 Jumbotron

• 变更 删除了 jumbotron 组件，因为它可以通过工具类复刻。查看我们的新 Jumbotron 示例以获取演示。

列表组

🌐 List group

• 已向列表组添加新的 .list-group-numbered 修改器。

导航和选项卡

🌐 Navs and tabs

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

导航栏

🌐 Navbars

• 断裂 导航栏现在需要一个容器（以大幅简化间距要求和所需的 CSS）。
• 破坏 .active 类不再适用于 .nav-item，它必须直接应用于 .nav-link。

Offcanvas

• 添加了新的 offcanvas 组件。

分页

🌐 Pagination

• 分页链接现在具有可自定义的 margin-left，当彼此分开时，所有角都会动态圆角。
• 已将 transition 添加到分页链接。

Popovers

• 更改 在我们的默认弹出模板中将 .arrow 重命名为 .popover-arrow。
• 将 whiteList 选项重命名为 allowList。

下拉列表

🌐 Spinners

• 旋转器现在通过减慢动画来尊重 prefers-reduced-motion: reduce。参见 #31882。
• 改进了旋转器垂直对齐。

吐司

🌐 Toasts

• 借助定位工具，现在可以在.toast-container中定位Toast。
• 将默认 Toast 持续时间更改为 5 秒。
• 已从提示中移除 overflow: hidden，并用具有 calc() 功能的适当 border-radius 替换。

工具提示

🌐 Tooltips

• 断开 在我们的默认工具提示模板中将 .arrow 重命名为 .tooltip-arrow。
• 中断 为了更好地放置弹出元素，fallbackPlacements 的默认值已更改为 ['top', 'right', 'bottom', 'left']。
• 重大变更 将 whiteList 选项重命名为 allowList。

实用工具

🌐 Utilities

• 更新 将多个工具重命名为使用逻辑属性名称，而不是方向名称，同时增加了对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。
• Breaking 默认禁用了负边距。
• 新增 .bg-body 类，用于快速将 <body> 的背景设置到额外的元素上。
• 为 top、right、bottom 和 left 添加了新的 位置工具。每个属性的值包括 0、50% 和 100%。
• 新增了 .translate-middle-x 和 .translate-middle-y 工具，用于水平或垂直居中绝对/固定定位的元素。
• 添加了新的border-width工具。
• 重大更新 已将 .text-monospace 重命名为 .font-monospace。
• 已破解 已移除 .text-hide，因为它是一种过时的隐藏文本方法，不应再使用。
• 为 font-size 实用工具添加了 .fs-* 实用工具（启用 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。请参见 这里。
• 在我们的 CSS 中移动了 .d-none 工具，以使其比其他显示工具具有更高的权重。
• 将 .visually-hidden-focusable 辅助扩展为也能在容器上使用，使用 :focus-within。

帮手

🌐 Helpers

• 断点 响应式嵌入辅助工具已重命名为 ratio helpers，具有新的类名和改进的行为，以及一个有用的 CSS 变量。
  • 课程已被重命名，以将纵横比中的 by 改为 x。例如，.ratio-16by9 现在是 .ratio-16x9。
  • 我们放弃了 .embed-responsive-item 和元素组选择器，改用更简单的 .ratio > * 选择器。不再需要类，而且比例辅助现在可以与任何 HTML 元素一起使用。
  • $embed-responsive-aspect-ratios Sass 映射已重命名为 $aspect-ratios，其值已简化为包含类名和百分比，作为 key: value 对。
  • CSS 变量现在已生成并包含在 Sass 映射中的每个值。修改 .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()。

• 已移除 util.js，其功能现在已集成到各个插件中。如果你之前手动包含了 util.js，可以安全地将其移除，因为它不再需要。每个插件现在仅包含其所需的工具，从而增强了模块化并减少了依赖。