迁移到 v5

跟踪和查看 Bootstrap 源文件、文档和组件的更改，以帮助你从 v4 迁移到 v5。

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

Colored links once again have !important so they work better with our newly added link utilities.

实用工具

¥Utilities

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

¥Added new .d-inline-grid display utility.

v5.3.0-alpha2

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

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

CSS 变量

¥CSS variables

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

¥Removed several duplicate and unused root CSS variables.

色彩模式

¥Color modes

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

¥Dark mode colors are now derived from our theme colors (e.g., $primary) in Sass, rather than color specific tints or shades (e.g., $blue-300). This allows for a more automated dark mode when customizing the default theme colors.
添加了 Sass 映射，用于生成夜间模式文本、微妙背景和微妙边框的主题颜色。

¥Added Sass maps for generating theme colors for dark mode text, subtle background, and subtle border.
Snippet examples are now ready for dark mode with updated markup and reduced custom styles.
在夜间模式 CSS 中添加了 color-scheme: dark，以更改滚动条等操作系统级别控制

¥Added color-scheme: dark to dark mode CSS to change OS level controls like scrollbars
得益于新的 Sass 和 CSS 变量，表单验证 border-color 和文本 color 状态现在响应夜间模式。

¥Form validation border-color and text color states now respond to dark mode, thanks to new Sass and CSS variables.
删除了最近添加的表单控件背景 CSS 变量，并重新分配了 Sass 变量以使用 CSS 变量。这简化了跨颜色模式的样式，并避免了夜间模式下的表单控件无法正确更新的问题。

¥Dropped recently added form control background CSS variables and reassigned the Sass variables to use CSS variables instead. This simplifies the styling across color modes and avoids an issue where form controls in dark mode wouldn’t update properly.
在黑夜间模式下，我们的 box-shadow 将再次始终保持黑暗，而不是反转为白色。

¥Our box-shadows will once again always stay dark instead of inverting to white when in dark mode.
改进了颜色模式切换脚本的 HTML 和 JavaScript。用于更改活动 SVG 的选择器已得到改进，并且通过 ARIA 属性可以更轻松地访问标记。

¥Improved HTML and JavaScript for our color mode toggle script. The selector for changing the active SVG has been improved, and the markup made more accessible with ARIA attributes.
改进了浅色和夜间模式下的文档代码语法颜色等。

¥Improved docs code syntax colors and more across light and dark modes.

版式

¥Typography

我们不再为夜间模式设置 $headings-color-dark 或 --bs-heading-color 的颜色。为了避免组件内的标题出现错误颜色的问题，我们将 Sass 变量设置为 null 并添加了 null 检查，就像我们在默认灯光模式上使用的那样。

¥We no longer set a color for $headings-color-dark or --bs-heading-color for dark mode. To avoid several problems of headings within components appearing the wrong color, we’ve set the Sass variable to null and added a null check like we use on the default light mode.

组件

¥Components

现在，卡上设置了 color，以改善跨颜色模式的渲染。

¥Cards now have a color set on them to improve rendering across color modes.
为我们的导航添加了新的 .nav-underline 变体，在活动导航链接下具有更简单的底部边框。See the docs for an example.

¥Added new .nav-underline variant for our navigation with a simpler bottom border under the active nav link. See the docs for an example.
导航现在拥有新的 :focus-visible 样式，可以更好地匹配我们的自定义按钮焦点样式。

¥Navs now have new :focus-visible styles that better match our custom button focus styles.

帮手

¥Helpers

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

¥Added new .icon-link helper to quickly place and align Bootstrap Icons alongside a textual link. Icon links support our new link utilities, too.
添加了新的对焦环助手，用于删除默认的 outline 并设置自定义 box-shadow 对焦环。

¥Added new focus ring helper for removing the default outline and setting a custom box-shadow focus ring.

实用工具

¥Utilities

将 Sass 和 CSS 变量 ${color}-text 重命名为 ${color}-text-emphasis 以匹配其关联的工具。

¥Renamed Sass and CSS variables ${color}-text to ${color}-text-emphasis to match their associated utilities.
在我们的彩色链接旁边添加了新的 .link-body-emphasis 助手。这将使用我们的颜色模式响应强调颜色创建一个彩色链接。

¥Added new .link-body-emphasis helper alongside our colored links. This creates a colored link using our color mode responsive emphasis color.
添加了新的链接工具，用于链接颜色不透明度、下划线偏移、下划线颜色和下划线不透明度。Explore the new links utilities.

¥Added new link utilities for link color opacity, underline offset, underline color, and underline opacity. Explore the new links utilities.
基于 CSS 变量的 border-width 工具已恢复为直接设置其属性（如 v5.2.0 之前所做的那样）。这避免了嵌套元素（包括表）之间的继承问题。

¥CSS variable based border-width utilities have been reverted to set their property directly (as was done prior to v5.2.0). This avoids inheritance issues across nested elements, including tables.
添加了新的 .border-black 工具以匹配我们的 .text-black 和 .bg-black 工具。

¥Added new .border-black utility to match our .text-black and .bg-black utilities.
已弃用已弃用 .text-muted 工具和 $text-muted Sass 变量。它已被 .text-body-secondary 和 $body-secondary-color 取代。

¥Deprecated Deprecated the .text-muted utility and $text-muted Sass variable. It’s been replaced by .text-body-secondary and $body-secondary-color.

文档

¥Docs

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

¥Examples are now displayed with the appropriate light or dark color mode as dictated by the setting in our docs. Each example has an individual color mode picker.
改进了实时 Toast 演示的 JavaScript。

¥Improved included JavaScript for live Toast demo.
将 twbs/examples 存储库内容添加到示例页面的顶部。

¥Added twbs/examples repo contents to the top of the Examples page.

工具

¥Tooling

通过 True 添加了 SCSS 测试，以帮助测试我们的工具 API 和其他自定义项。

¥Added SCSS testing via True to help test our utilities API and other customizations.
将 bootstrap-npm-starter 项目的实例替换为更新且更完整的 twbs/示例存储库。

¥Replaced instances of our bootstrap-npm-starter project with the newer and more complete twbs/examples repo.

有关更改的完整列表，请参阅 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() mixin，可以根据你的喜好输出带有 data-bs-theme 选择器或媒体查询的规则集。

¥Global support for light (default) and dark color modes. Set color mode globally on the :root element, on groups of elements and components with a wrapper class, or directly on components, with data-bs-theme="light|dark". Also included is a new color-mode() mixin that can output a ruleset with the data-bs-theme selector or a media query, depending on your preference.

已弃用颜色模式会替换组件的深色变体，因此 .btn-close-white、.carousel-dark、.dropdown-menu-dark 和 .navbar-dark 已弃用。

¥Deprecated Color modes replace dark variants for components, so .btn-close-white, .carousel-dark, .dropdown-menu-dark, and .navbar-dark are deprecated.
新的扩展颜色系统。我们添加了新的主题颜色（但 $theme-colors 中没有），以获得更细致的系统范围调色板，并为 color 和 background-color 添加了新的二级、三级和强调颜色。这些新颜色可作为 Sass 变量、CSS 变量和工具使用。

¥New extended color system. We’ve added new theme colors (but not in $theme-colors) for a more nuanced, system-wide color palette with new secondary, tertiary, and emphasis colors for color and background-color. These new colors are available as Sass variables, CSS variables, and utilities.
我们还扩展了主题颜色 Sass 变量、CSS 变量和工具，以包括文本强调、微妙的背景颜色和微妙的边框颜色。这些可以作为 Sass 变量、CSS 变量和工具使用。

¥We’ve also expanded our theme color Sass variables, CSS variables, and utilities to include text emphasis, subtle background colors, and subtle border colors. These are available as Sass variables, CSS variables, and utilities.
添加新的 _variables-dark.scss 样式表以容纳夜间模式特定的覆盖。该样式表应在导入堆栈中的现有 _variables.scss 文件之后立即导入。

¥Adds new _variables-dark.scss stylesheet to house dark-mode specific overrides. This stylesheet should be imported immediately after the existing _variables.scss file in your import stack.
```
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 特定的上下文中可能很有用。

¥Restores CSS variables for breakpoints, though we don’t use them in our media queries as they’re not supported. However, these can be useful in JS-specific contexts.
根据颜色模式更新，我们为新的 Sass CSS 变量 secondary 和 tertiary 文本和背景颜色添加了新工具，还为我们的主题颜色添加了 {color}-bg-subtle、{color}-border-subtle 和 {color}-text-emphasis。这些新颜色可通过 Sass 和 CSS 变量（但不是我们的颜色图）获得，其明确目标是使跨多种颜色模式（如浅色和深色）的自定义变得更容易。

¥Per the color modes update, we’ve added new utilities for new Sass CSS variables secondary and tertiary text and background colors, plus {color}-bg-subtle, {color}-border-subtle, and {color}-text-emphasis for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps) with the express goal of making it easier to customize across multiple colors modes like light and dark.
添加警报、.btn-close 和 .offcanvas 的附加变量。

¥Adds additional variables for alerts, .btn-close, and .offcanvas.
--bs-heading-color 变量回来了，并进行了更新和夜间模式支持。首先，我们现在在尝试输出 CSS 变量之前检查关联的 Sass 变量 $headings-color 上的 null 值，因此默认情况下它不存在于我们编译的 CSS 中。其次，我们使用带有后备值 inherit 的 CSS 变量，允许原始行为持续存在，但也允许覆盖。

¥The --bs-heading-color variable is back with an update and dark mode support. First, we now check for a null value on the associated Sass variable, $headings-color, before trying to output the CSS variable, so by default it’s not present in our compiled CSS. Second, we use the CSS variable with a fallback value, inherit, allowing the original behavior to persist, but also allowing for overrides.
将链接转换为使用 CSS 变量来设置 color 的样式，但不设置 text-decoration 的样式。颜色现在设置为 --bs-link-color-rgb 和 --bs-link-opacity 作为 rgba() 颜色，让你轻松自定义半透明度。a:hover 伪类现在覆盖 --bs-link-color-rgb，而不是显式设置 color 属性。

¥Converts links to use CSS variables for styling color, but not text-decoration. Colors are now set with --bs-link-color-rgb and --bs-link-opacity as rgba() color, allowing you to customize the translucency with ease. The a:hover pseudo-class now overrides --bs-link-color-rgb instead of explicitly setting the color property.
--bs-border-width 现在被用于更多组件中，以更好地控制默认全局样式。

¥--bs-border-width is now being used in more components for greater control over default global styling.
为 box-shadow 添加新的根 CSS 变量，包括 --bs-box-shadow、--bs-box-shadow-sm、--bs-box-shadow-lg 和 --bs-box-shadow-inset。

¥Adds new root CSS variables for our box-shadows, including --bs-box-shadow, --bs-box-shadow-sm, --bs-box-shadow-lg, and --bs-box-shadow-inset.

组件

¥Components

警报

¥Alert

警报变体现在通过 CSS 变量设置样式。

¥Alert variants are now styled via CSS variables.
已弃用 alert-variant() mixin 现已弃用。我们现在使用 Sass 循环直接修改每个变体的组件默认 CSS 变量。

¥Deprecated The alert-variant() mixin is now deprecated. We now use a Sass loop directly to modify the component’s default CSS variables for each variant.

列表组

¥List group

列表组项目变体现在通过 CSS 变量设置样式。

¥List group item variants are now styled via CSS variables.
已弃用 list-group-item-variant() mixin 现已弃用。我们现在使用 Sass 循环直接修改每个变体的组件默认 CSS 变量。

¥Deprecated The list-group-item-variant() mixin is now deprecated. We now use a Sass loop directly to modify the component’s default CSS variables for each variant.

下拉菜单

¥Dropdowns

已弃用 .dropdown-menu-dark 类已被弃用，并替换为下拉列表或任何父元素上的 data-bs-theme="dark"。See the docs for an example.

¥Deprecated The .dropdown-menu-dark class has been deprecated and replaced with data-bs-theme="dark" on the dropdown or any parent element. See the docs for an example.

关闭按钮

¥Close button

已弃用关闭按钮或任何父元素上的 .btn-close-white 类已被弃用并替换为 data-bs-theme="dark"。See the docs for an example.

¥Deprecated The .btn-close-white class has been deprecated and replaced with data-bs-theme="dark" on the close button or any parent element. See the docs for an example.

¥Navbar

已弃用 .navbar-dark 类已被弃用，并替换为导航栏或任何父元素上的 data-bs-theme="dark"。See the docs for updated examples.

¥Deprecated The .navbar-dark class has been deprecated and replaced with data-bs-theme="dark" on the navbar or any parent element. See the docs for updated examples.

进度条

¥Progress bars

进度条的标记已在 v5.3.0 中更新。由于 role 和各种 aria- 属性放置在内部 .progress-bar 元素上，一些屏幕阅读器没有宣布零值进度条。现在，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-control is now styled with CSS variables to support color modes. This includes the addition of two new root CSS variables for the default and disabled form control backgrounds.
.form-check 和 .form-switch 组件现在使用 CSS 变量构建，用于设置 background-image。这里的用法与其他组件的不同之处在于，每个组件的各种焦点、活动等状态不是在基类上设置的。相反，状态会覆盖一个变量（例如 --bs-form-switch-bg）。

¥.form-check and .form-switch components are now built with CSS variables for setting the background-image. The usage here differs from other components in that the various focus, active, etc states for each component aren’t set on the base class. Instead, the states override one variable (e.g., --bs-form-switch-bg).
浮动表单标签现在有 background-color 来修复对 <textarea> 元素的支持。还进行了其他更改以支持禁用状态等。

¥Floating form labels now have a background-color to fix support for <textarea> elements. Additional changes have been made to also support disabled states and more.
修复了基于 WebKit 的浏览器中日期和时间输入的显示。

¥Fixed display of date and time inputs in WebKit based browsers.

实用工具

¥Utilities

已弃用 .text-muted 将在 v6 中被 .text-body-secondary 取代。

¥Deprecated .text-muted will be replaced by .text-body-secondary in v6.

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

¥With the addition of the expanded theme colors and variables, the .text-muted variables and utility have been deprecated with v5.3.0. Its default value has also been reassigned to the new --bs-secondary-color CSS variable to better support color modes. It will be removed in v6.0.0.
添加新的 .overflow-x、.overflow-y 和多个 .object-fit-* 工具。object-fit 属性用于指定如何调整 <img> 或 <video> 的大小以适合其容器，为我们提供了使用 background-image 来调整大小的填充/适合图片的响应式替代方案。

¥Adds new .overflow-x, .overflow-y, and several .object-fit-* utilities. The object-fit property is used to specify how an <img> or <video> should be resized to fit its container, giving us a responsive alternative to using background-image for a resizable fill/fit image.
添加新的 .fw-medium 工具。

¥Adds new .fw-medium utility.
为 z-index 添加了新的 .z-* 实用程序。

¥Added new .z-* utilities for z-index.
Box shadow utilities (and Sass variables) have been updated for dark mode.他们现在使用 --bs-body-color-rgb 生成 rgba() 颜色值，使他们能够轻松适应基于指定前景色的颜色模式。

¥Box shadow utilities (and Sass variables) have been updated for dark mode. They now use --bs-body-color-rgb to generate the rgba() color values, allowing them to easily adapt to color modes based on the specified foreground color.

有关更改的完整列表，请参阅 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 图标示例。

¥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.

新 `_maps.scss`

¥New _maps.scss

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

¥Bootstrap v5.2.0 introduced a new Sass file with _maps.scss. It pulls out several Sass maps from _variables.scss to fix an issue where updates to an original map were not applied to secondary maps that extend them. For example, updates to $theme-colors were not being applied to other theme maps that relied on $theme-colors, breaking key customization workflows. In short, Sass has a limitation where once a default variable or map has been used, it cannot be updated. There’s a similar shortcoming with CSS variables when they’re used to compose other CSS variables.

这就是为什么 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。

¥Expanded font-weight utilities to include .fw-semibold for semibold fonts.
扩展了 border-radius 实用程序，包括两种新尺寸 .rounded-4 和 .rounded-5，以获得更多选项。

¥Expanded border-radius utilities to include two new sizes, .rounded-4 and .rounded-5, for more options.

额外的变化

¥Additional changes

推出新的 $enable-container-classes 选项。— 现在，当选择实验性 CSS 网格布局时，仍将编译 .container-* 类，除非此选项设置为 false。容器现在也保留其装订线值。

¥Introduced new $enable-container-classes option. — Now when opting into the experimental CSS Grid layout, .container-* classes will still be compiled, unless this option is set to false. Containers also now keep their gutter values.
Offcanvas 组件现在具有响应式变体。原始 .offcanvas 类保持不变 - 它隐藏所有视口中的内容。要使其响应，请将 .offcanvas 类更改为任何 .offcanvas-{sm|md|lg|xl|xxl} 类。

¥Offcanvas component now has responsive variations. The original .offcanvas class remains unchanged—it hides content across all viewports. To make it responsive, change that .offcanvas class to any .offcanvas-{sm|md|lg|xl|xxl} class.
现在可以选择加粗的表格分割线。— 我们删除了表格组之间较粗且更难以覆盖的边框，并将其移至你可以应用的可选类 .table-group-divider。See the table docs for an example.

¥Thicker table dividers are now opt-in. — We’ve removed the thicker and more difficult to override border between table groups and moved it to an optional class you can apply, .table-group-divider. See the table docs for an example.
Scrollspy 已被重写使用 Intersection Observer API，这意味着你不再需要相对父封装器，弃用 offset 配置等等。寻找你的 Scrollspy 实现在导航高亮中更加准确和一致。

¥Scrollspy has been rewritten to use the Intersection Observer API, which means you no longer need relative parent wrappers, deprecates offset config, and more. Look for your Scrollspy implementations to be more accurate and consistent in their nav highlighting.
弹出窗口和工具提示现在使用 CSS 变量。一些 CSS 变量已从 Sass 对应项更新，以减少变量数量。因此，此版本中已弃用三个变量：$popover-arrow-color、$popover-arrow-outer-color 和 $tooltip-arrow-color。

¥Popovers and tooltips now use CSS variables. Some CSS variables have been updated from their Sass counterparts to reduce the number of variables. As a result, three variables have been deprecated in this release: $popover-arrow-color, $popover-arrow-outer-color, and $tooltip-arrow-color.
添加了新的 .text-bg-{color} 助手。你现在可以使用 .text-bg-* 辅助程序来设置 background-color 与对比前景 color，而不是设置单独的 .text-* 和 .bg-* 实用程序。

¥Added new .text-bg-{color} helpers. Instead of setting individual .text-* and .bg-* utilities, you can now use the .text-bg-* helpers to set a background-color with contrasting foreground color.
添加了 .form-check-reverse 修饰符来翻转标签和关联复选框/单选按钮的顺序。

¥Added .form-check-reverse modifier to flip the order of labels and associated checkboxes/radios.
通过新的 .table-striped-columns 类向表添加了条纹列支持。

¥Added striped columns support to tables via the new .table-striped-columns class.

有关更改的完整列表，请参阅 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 网格。

¥Added experimental support for CSS Grid layout. — This is a work in progress, and is not yet ready for production use, but you can opt into the new feature via Sass. To enable it, disable the default grid, by setting $enable-grid-classes: false and enable the CSS Grid by setting $enable-cssgrid: true.
更新了导航栏以支持 offcanvas。— 在任何导航栏中添加 offcanvas 抽屉以及响应式 .navbar-expand-* 类和一些 offcanvas 标记。

¥Updated navbars to support offcanvas. — Add offcanvas drawers in any navbar with the responsive .navbar-expand-* classes and some offcanvas markup.
添加了新的占位符组件。— 我们最新的组件，一种提供临时块代替真实内容的方法，以帮助指示你的网站或应用中仍在加载某些内容。

¥Added new placeholder component. — Our newest component, a way to provide temporary blocks in lieu of real content to help indicate that something is still loading in your site or app.
折叠插件现在支持水平折叠。— 将 .collapse-horizontal 添加到 .collapse 以折叠 width 而不是 height。通过设置 min-height 或 height 避免浏览器重新绘制。

¥Collapse plugin now supports horizontal collapsing. — Add .collapse-horizontal to your .collapse to collapse the width instead of the height. Avoid browser repainting by setting a min-height or height.
添加了新的堆栈和垂直规则助手。— 快速应用多个 Flexbox 属性，以使用 stacks 快速创建自定义布局。从水平 (.hstack) 和垂直 (.vstack) 堆栈中进行选择。使用新的 .vr 助手添加类似于 <hr> 元素的垂直分隔线。

¥Added new stack and vertical rule helpers. — Quickly apply multiple flexbox properties to quickly create custom layouts with stacks. Choose from horizontal (.hstack) and vertical (.vstack) stacks. Add vertical dividers similar to <hr> elements with the new .vr helpers.
添加了新的全局 :root CSS 变量。— 在 :root 级别添加了几个新的 CSS 变量，用于控制 <body> 样式。更多内容正在进行中，包括跨我们的实用程序和组件，但现在请阅读自定义部分中的 CSS 变量。

¥Added new global :root CSS variables. — Added several new CSS variables to the :root level for controlling <body> styles. More are in the works, including across our utilities and components, but for now read up CSS variables in the Customize section.
彻底修改了颜色和背景实用程序以使用 CSS 变量，并添加了新的文本不透明度和背景不透明度实用程序。— .text-* 和 .bg-* 工具现在使用 CSS 变量和 rgba() 颜色值构建，允许你使用新的不透明度工具轻松自定义任何工具。

¥Overhauled color and background utilities to use CSS variables, and added new text opacity and background opacity utilities. — .text-* and .bg-* utilities are now built with CSS variables and rgba() color values, allowing you to easily customize any utility with new opacity utilities.
添加了新的代码片段示例，以展示如何自定义我们的组件。— 通过我们新的片段示例准备好使用定制组件和其他常见设计模式。包括页脚、下拉菜单、列表组和模式。

¥Added new snippet examples based to show how to customize our components. — Pull ready to use customized components and other common design patterns with our new Snippets examples. Includes footers, dropdowns, list groups, and modals.
从弹出窗口和工具提示中删除了未使用的定位样式，因为这些样式仅由 Popper 处理。在此过程中，$tooltip-margin 已被弃用并设置为 null。

¥Removed unused positioning styles from popovers and tooltips as these are handled solely by Popper. $tooltip-margin has been deprecated and set to null in the process.

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

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

v5.0.0

Hey there! Changes to our first major release of Bootstrap 5, v5.0.0, are documented below. They don’t reflect the additional changes shown above.

依赖

¥Dependencies

放弃 jQuery。

¥Dropped jQuery.
从 Popper v1.x 升级到 Popper v2.x。

¥Upgraded from Popper v1.x to Popper v2.x.
由于 Libsass 已被弃用，因此将 Libsass 替换为 Dart Sass 作为我们的 Sass 编译器。

¥Replaced Libsass with Dart Sass as our Sass compiler given Libsass was deprecated.
从 Jekyll 迁移到 Hugo 以构建我们的文档

¥Migrated from Jekyll to Hugo for building our documentation

浏览器支持

¥Browser support

放弃 Internet Explorer 10 和 11

¥Dropped Internet Explorer 10 and 11
删除了 Microsoft Edge < 16（旧版 Edge）

¥Dropped Microsoft Edge < 16 (Legacy Edge)
放弃 Firefox < 60

¥Dropped Firefox < 60
放弃 Safari < 12

¥Dropped Safari < 12
删除了 iOS Safari < 12

¥Dropped iOS Safari < 12
放弃 Chrome < 60

¥Dropped Chrome < 60

文档变更

¥Documentation changes

重新设计了主页、文档布局和页脚。

¥Redesigned homepage, docs layout, and footer.
新增【新 Parcel 指南】(/docs/5.3/getting-started/parcel/)。

¥Added new Parcel guide.
添加了新的自定义部分，替换了 v4 的主题页面，并添加了有关 Sass、全局配置选项、配色方案、CSS 变量等的新详细信息。

¥Added new Customize section, replacing v4’s Theming page, with new details on Sass, global configuration options, color schemes, CSS variables, and more.
将所有表单文档重新组织到新表单部分，将内容分为更有针对性的页面。

¥Reorganized all form documentation into new Forms section, breaking apart the content into more focused pages.
同样，更新了布局部分，以更清晰地充实网格内容。

¥Similarly, updated the Layout section, to flesh out grid content more clearly.
将 “导航” 组件页面重命名为 “导航和选项卡”。

¥Renamed “Navs” component page to “Navs & Tabs”.
将 “选中” 页面重命名为 “多选框和单选按钮”。

¥Renamed “Checks” page to “Checks & radios”.
重新设计了导航栏并添加了新的子导航，以便更轻松地浏览我们的网站和文档版本。

¥Redesigned the navbar and added a new subnav to make it easier to get around our sites and docs versions.
为搜索字段添加了新的键盘快捷键：Ctrl + /。

¥Added new keyboard shortcut for the search field: Ctrl + /.

Sass

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

¥We’ve ditched the default Sass map merges to make it easier to remove redundant values. Keep in mind you now have to define all values in the Sass maps like $theme-colors. Check out how to deal with Sass maps.
破坏将 color-yiq() 函数和相关变量重命名为 color-contrast()，因为它不再与 YIQ 色彩空间相关。请参阅#30168。

¥Breaking Renamed color-yiq() function and related variables to color-contrast() as it’s no longer related to YIQ color space. See #30168.
- $yiq-contrasted-threshold 更名为 $min-contrast-ratio。
  
  ¥$yiq-contrasted-threshold is renamed to $min-contrast-ratio.
- $yiq-text-dark 和 $yiq-text-light 分别更名为 $color-contrast-dark 和 $color-contrast-light。
  
  ¥$yiq-text-dark and $yiq-text-light are respectively renamed to $color-contrast-dark and $color-contrast-light.
突破媒体查询混合参数已更改为更合乎逻辑的方法。

¥Breaking Media query mixins parameters have changed for a more logical approach.
- media-breakpoint-down() 使用断点本身而不是下一个断点（例如，media-breakpoint-down(lg) 而不是 media-breakpoint-down(md) 目标视口小于 lg）。
  
  ¥media-breakpoint-down() uses the breakpoint itself instead of the next breakpoint (e.g., media-breakpoint-down(lg) instead of media-breakpoint-down(md) targets viewports smaller than lg).
- 同样，media-breakpoint-between() 中的第二个参数也使用断点本身而不是下一个断点（例如，media-breakpoint-between(sm, lg) 而不是 media-breakpoint-between(sm, md) 目标视口在 sm 和 lg 之间）。
  
  ¥Similarly, the second parameter in media-breakpoint-between() also uses the breakpoint itself instead of the next breakpoint (e.g., media-breakpoint-between(sm, lg) instead of media-breakpoint-between(sm, md) targets viewports between sm and lg).
Breaking 删除了打印样式和 $enable-print-styles 变量。打印显示类仍然存在。参见#28339。

¥Breaking Removed print styles and $enable-print-styles variable. Print display classes are still around. See #28339.
破坏删除了 color()、theme-color() 和 gray() 函数，转而使用变量。参见#29083。

¥Breaking Dropped color(), theme-color(), and gray() functions in favor of variables. See #29083.
突破将 theme-color-level() 函数重命名为 color-level()，现在接受你想要的任何颜色，而不仅仅是 $theme-color 颜色。参见#29083 注意：color-level() 后来在 v5.0.0-alpha3 中被删除。

¥Breaking Renamed theme-color-level() function to color-level() and now accepts any color you want instead of only $theme-color colors. See #29083 Watch out: color-level() was later on dropped in v5.0.0-alpha3.
Breaking 为了简洁起见，将 $enable-prefers-reduced-motion-media-query 和 $enable-pointer-cursor-for-buttons 重命名为 $enable-reduced-motion 和 $enable-button-pointers。

¥Breaking Renamed $enable-prefers-reduced-motion-media-query and $enable-pointer-cursor-for-buttons to $enable-reduced-motion and $enable-button-pointers for brevity.
Breaking 删除了 bg-gradient-variant() mixin。使用 .bg-gradient 类向元素添加渐变，而不是生成的 .bg-gradient-* 类。

¥Breaking Removed the bg-gradient-variant() mixin. Use the .bg-gradient class to add gradients to elements instead of the generated .bg-gradient-* classes.
Breaking 删除了之前已弃用的 mixin：

¥Breaking Removed previously deprecated mixins:
- hover、hover-focus、plain-hover-focus 和 hover-focus-active
  
  ¥hover, hover-focus, plain-hover-focus, and hover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()（还删除了相关的工具类，.text-hide）
  
  ¥text-hide() (also dropped the associated utility class, .text-hide)
- visibility()
- form-control-focus()
Breaking 将 scale-color() 函数重命名为 shift-color()，以避免与 Sass 自己的颜色缩放函数发生冲突。

¥Breaking Renamed scale-color() function to shift-color() to avoid collision with Sass’s own color scaling function.
box-shadow mixins 现在允许 null 值并从多个参数中删除 none。参见#30394。

¥box-shadow mixins now allow null values and drop none from multiple arguments. See #30394.
border-radius() mixin 现在有默认值。

¥The border-radius() mixin now has a default value.

色彩系统

¥Color system

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

¥The color system which worked with color-level() and $theme-color-interval was removed in favor of a new color system. All lighten() and darken() functions in our codebase are replaced by tint-color() and shade-color(). These functions will mix the color with either white or black instead of changing its lightness by a fixed amount. The shift-color() will either tint or shade a color depending on whether its weight parameter is positive or negative. See #30622 for more details.
为每种颜色添加了新的色调和阴影，为每种基色提供九种单独的颜色，作为新的 Sass 变量。

¥Added new tints and shades for every color, providing nine separate colors for each base color, as new Sass variables.
改善色彩对比度。将颜色对比度从 3:1 提高到 4.5:1，并更新了蓝色、绿色、青色和粉色，以确保 WCAG 2.1 AA 对比度。还将我们的颜色对比色从 $gray-900 更改为 $black。

¥Improved color contrast. Bumped color contrast ratio from 3:1 to 4.5:1 and updated blue, green, cyan, and pink colors to ensure WCAG 2.1 AA contrast. Also changed our color contrast color from $gray-900 to $black.
为了支持我们的颜色系统，我们添加了新的自定义 tint-color() 和 shade-color() 函数来适当地混合我们的颜色。

¥To support our color system, we’ve added new custom tint-color() and shade-color() functions to mix our colors appropriately.

网格更新

¥Grid updates

新断点！为 1400px 及更高版本添加了新的 xxl 断点。所有其他断点均未更改。

¥New breakpoint! Added new xxl breakpoint for 1400px and up. No changes to all other breakpoints.
改进了装订线。装订线现在以 rems 为单位设置，并且比 v4 更窄（1.5rem，或大约 24px，从 30px 向下）。这使我们的网格系统的装订线与我们的间距工具保持一致。

¥Improved gutters. Gutters are now set in rems, and are narrower than v4 (1.5rem, or about 24px, down from 30px). This aligns our grid system’s gutters with our spacing utilities.
- 添加了新的装订线类（.g-*、.gx-* 和 .gy-*）来控制水平/垂直装订线、水平装订线和垂直装订线。
  
  ¥Added new gutter class (.g-*, .gx-*, and .gy-*) to control horizontal/vertical gutters, horizontal gutters, and vertical gutters.
- 破坏将 .no-gutters 重命名为 .g-0 以匹配新的装订线工具。
  
  ¥Breaking Renamed .no-gutters to .g-0 to match new gutter utilities.
列不再应用 position: relative，因此你可能必须将 .position-relative 添加到某些元素才能恢复该行为。

¥Columns no longer have position: relative applied, so you may have to add .position-relative to some elements to restore that behavior.
Breaking 删除了几个经常未使用的 .order-* 类。我们现在仅提供开箱即用的 .order-1 至 .order-5。

¥Breaking Dropped several .order-* classes that often went unused. We now only provide .order-1 to .order-5 out of the box.
破坏删除了 .media 组件，因为它可以通过工具轻松复制。参见#28265 和 flex 实用程序页面示例。

¥Breaking Dropped the .media component as it can be easily replicated with utilities. See #28265 and the flex utilities page for an example.
破坏 bootstrap-grid.css 现在仅将 box-sizing: border-box 应用于列，而不是重置全局框大小。这样我们的网格样式就可以在更多的地方使用而不会受到干扰。

¥Breaking bootstrap-grid.css now only applies box-sizing: border-box to the column instead of resetting the global box-sizing. This way, our grid styles can be used in more places without interference.
$enable-grid-classes 不再禁用容器类的生成。请参阅#29146。

¥$enable-grid-classes no longer disables the generation of container classes anymore. See #29146.
将 make-col mixin 更新为默认为相等的列，但没有指定大小。

¥Updated the make-col mixin to default to equal columns without a specified size.

内容、重启等

¥Content, Reboot, etc

RFS is now enabled by default.使用 font-size() mixin 的标题将自动调整其 font-size 以随视口缩放。此功能之前是在 v4 中选择加入的。

¥RFS is now enabled by default. Headings using the font-size() mixin will automatically adjust their font-size to scale with the viewport. This feature was previously opt-in with v4.
突破彻底修改了我们的显示排版，以替换 $display-* 变量并使用 $display-font-sizes Sass 映射。还删除了单个 $display-font-weight 的各个 $display-*-weight 变量并调整了 font-size。

¥Breaking Overhauled our display typography to replace our $display-* variables and with a $display-font-sizes Sass map. Also removed the individual $display-*-weight variables for a single $display-font-weight and adjusted font-sizes.
添加了两个新的 .display-* 标题尺寸：.display-5 和 .display-6。

¥Added two new .display-* heading sizes, .display-5 and .display-6.
默认情况下，链接带有下划线（不仅仅是悬停时），除非它们是特定组件的一部分。

¥Links are underlined by default (not just on hover), unless they’re part of specific components.
重新设计表格以刷新其样式并使用 CSS 变量重建它们，以更好地控制样式。

¥Redesigned tables to refresh their styles and rebuild them with CSS variables for more control over styling.
破坏嵌套表不再继承样式。

¥Breaking Nested tables do not inherit styles anymore.
Breaking .thead-light 和 .thead-dark 已被删除，取而代之的是可用于所有表格元素（thead、tbody、tfoot、tr、th 和 td）的 .table-* 变体类。

¥Breaking .thead-light and .thead-dark are dropped in favor of the .table-* variant classes which can be used for all table elements (thead, tbody, tfoot, tr, th and td).
Breaking table-row-variant() mixin 已重命名为 table-variant()，并且仅接受 2 个参数：$color（颜色名称）和 $value（颜色代码）。边框颜色和强调色是根据表因子变量自动计算的。

¥Breaking The table-row-variant() mixin is renamed to table-variant() and accepts only 2 parameters: $color (color name) and $value (color code). The border color and accent colors are automatically calculated based on the table factor variables.
将表格单元格填充变量拆分为 -y 和 -x。

¥Split table cell padding variables into -y and -x.
破坏放弃了 .pre-scrollable 等级。参见#29135

¥Breaking Dropped .pre-scrollable class. See #29135
Breaking .text-* 工具不再向链接添加悬停和焦点状态。可以使用 .link-* 辅助类来代替。参见#29267

¥Breaking .text-* utilities do not add hover and focus states to links anymore. .link-* helper classes can be used instead. See #29267
破坏放弃了 .text-justify 等级。请参阅#29793

¥Breaking Dropped .text-justify class. See #29793
破坏 ~~<hr> elements now use height instead of border to better support the size attribute. This also enables use of padding utilities to create thicker dividers (e.g., <hr class="py-1">).~~

¥Breaking ~~<hr> elements now use height instead of border to better support the size attribute. This also enables use of padding utilities to create thicker dividers (e.g., <hr class="py-1">).~~
将 <ul> 和 <ol> 元素上的默认水平 padding-left 从浏览器默认 40px 重置为 2rem。

¥Reset default horizontal padding-left on <ul> and <ol> elements from browser default 40px to 2rem.
添加了 $enable-smooth-scroll，它在全局作用域内应用 scroll-behavior: smooth，但通过 prefers-reduced-motion 媒体查询请求减少运动的用户除外。参见#31877

¥Added $enable-smooth-scroll, which applies scroll-behavior: smooth globally—except for users asking for reduced motion through prefers-reduced-motion media query. See #31877

RTL

水平方向特定的变量、工具和 mixin 都已重命名为使用类似于 Flexbox 布局中的逻辑属性，例如，用 start 和 end 代替 left 和 right。

¥Horizontal direction specific variables, utilities, and mixins have all been renamed to use logical properties like those found in flexbox layouts—e.g., start and end in lieu of left and right.

表单

¥Forms

添加了新的浮动形式！我们已将浮动标签示例提升为完全支持的表单组件。See the new Floating labels page.

¥Added new floating forms! We’ve promoted the Floating labels example to fully supported form components. See the new Floating labels page.
突破性整合了原生和自定义表单元素。v4 中具有原生和自定义类的复选框、单选、选择和其他输入已得到整合。现在，几乎所有表单元素都是完全自定义的，大多数不需要自定义 HTML。

¥Breaking Consolidated native and custom form elements. Checkboxes, radios, selects, and other inputs that had native and custom classes in v4 have been consolidated. Now nearly all our form elements are entirely custom, most without the need for custom HTML.
- .custom-control.custom-checkbox 现在是 .form-check。
  
  ¥.custom-control.custom-checkbox is now .form-check.
- .custom-control.custom-radio 现在是 .form-check。
  
  ¥.custom-control.custom-radio is now .form-check.
- .custom-control.custom-switch 现在是 .form-check.form-switch。
  
  ¥.custom-control.custom-switch is now .form-check.form-switch.
- .custom-select 现在是 .form-select。
  
  ¥.custom-select is now .form-select.
- .custom-file 和 .form-control-file 已被 .form-control 之上的自定义样式所取代。
  
  ¥.custom-file and .form-control-file have been replaced by custom styles on top of .form-control.
- .custom-range 现在是 .form-range。
  
  ¥.custom-range is now .form-range.
- 放弃原生 .form-control-file 和 .form-control-range。
  
  ¥Dropped native .form-control-file and .form-control-range.
破坏掉落了 .input-group-append 和 .input-group-prepend。你现在只需添加按钮和 .input-group-text 作为输入组的直接子级。

¥Breaking Dropped .input-group-append and .input-group-prepend. You can now just add buttons and .input-group-text as direct children of the input groups.
通过向输入组添加额外的 .has-validation 类并进行验证，最终修复了长期存在的输入组缺少边框半径并存在验证反馈错误。

¥The longstanding Missing border radius on input group with validation feedback bug is finally fixed by adding an additional .has-validation class to input groups with validation.
Breaking 删除了我们网格系统的特定于表单的布局类。使用我们的电网和公用设施而不是 .form-group、.form-row 或 .form-inline。

¥Breaking Dropped form-specific layout classes for our grid system. Use our grid and utilities instead of .form-group, .form-row, or .form-inline.
Breaking 表单标签现在需要 .form-label。

¥Breaking Form labels now require .form-label.
Breaking .form-text 不再设置 display，允许你仅通过更改 HTML 元素即可根据需要创建内联或块帮助文本。

¥Breaking .form-text no longer sets display, allowing you to create inline or block help text as you wish just by changing the HTML element.
表单控件在可能的情况下不再使用固定的 height，而是遵循 min-height 以改进自定义以及与其他组件的兼容性。

¥Form controls no longer used fixed height when possible, instead deferring to min-height to improve customization and compatibility with other components.
验证图标不再应用于 <select> 和 multiple。

¥Validation icons are no longer applied to <select>s with multiple.
重新排列了 scss/forms/ 下的源 Sass 文件，包括输入组样式。

¥Rearranged source Sass files under scss/forms/, including input group styles.

组件

¥Components

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

¥Unified padding values for alerts, breadcrumbs, cards, dropdowns, list groups, modals, popovers, and tooltips to be based on our $spacer variable. See #30564.

手风琴

¥Accordion

添加了新的手风琴组件。

¥Added new accordion component.

警报

¥Alerts

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

¥Alerts now have examples with icons.
删除了每个警报中 <hr> 的自定义样式，因为它们已经使用了 currentColor。

¥Removed custom styles for <hr>s in each alert since they already use currentColor.

徽章

¥Badges

Breaking 删除了背景工具的所有 .badge-* 颜色类别（例如，使用 .bg-primary 而不是 .badge-primary）。

¥Breaking Dropped all .badge-* color classes for background utilities (e.g., use .bg-primary instead of .badge-primary).
破坏已删除 .badge-pill - 请改用 .rounded-pill 工具。

¥Breaking Dropped .badge-pill—use the .rounded-pill utility instead.
Breaking 删除了 <a> 和 <button> 元素的悬停和焦点样式。

¥Breaking Removed hover and focus styles for <a> and <button> elements.
徽章的默认填充从 .25em/.5em 增加到 .35em/.65em。

¥Increased default padding for badges from .25em/.5em to .35em/.65em.

面包屑

¥Breadcrumbs

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

¥Simplified the default appearance of breadcrumbs by removing padding, background-color, and border-radius.
添加了新的 CSS 自定义属性 --bs-breadcrumb-divider，以便轻松自定义，无需重新编译 CSS。

¥Added new CSS custom property --bs-breadcrumb-divider for easy customization without needing to recompile CSS.

按钮

¥Buttons

突破切换按钮，带有复选框或单选框，不再需要 JavaScript 并具有新的标记。我们不再需要封装元素，将 .btn-check 添加到 <input>，并将其与 <label> 上的任何 .btn 类配对。参见#30650。有关此内容的文档已从我们的“按钮”页面移至新的“表单”部分。

¥Breaking Toggle buttons, with checkboxes or radios, no longer require JavaScript and have new markup. We no longer require a wrapping element, add .btn-check to the <input>, and pair it with any .btn classes on the <label>. See #30650. The docs for this has moved from our Buttons page to the new Forms section.
破坏删除了工具的 .btn-block。不要在 .btn 上使用 .btn-block，而是使用 .d-grid 和 .gap-* 工具封装按钮，以根据需要间隔它们。切换到响应式类以更好地控制它们。Read the docs for some examples.

¥Breaking Dropped .btn-block for utilities. Instead of using .btn-block on the .btn, wrap your buttons with .d-grid and a .gap-* utility to space them as needed. Switch to responsive classes for even more control over them. Read the docs for some examples.
更新了我们的 button-variant() 和 button-outline-variant() mixin 以支持其他参数。

¥Updated our button-variant() and button-outline-variant() mixins to support additional parameters.
更新了按钮以确保增加悬停和活动状态的对比度。

¥Updated buttons to ensure increased contrast on hover and active states.
禁用按钮现在有 pointer-events: none;。

¥Disabled buttons now have pointer-events: none;.

卡片

¥Card

Breaking 放弃 .card-deck 以支持我们的网格。将卡片封装在列类中，并添加父 .row-cols-* 容器来重新创建卡片组（但可以更好地控制响应式对齐）。

¥Breaking Dropped .card-deck in favor of our grid. Wrap your cards in column classes and add a parent .row-cols-* container to recreate card decks (but with more control over responsive alignment).
破坏放弃了 .card-columns，转而采用 Masonry。请参阅#28922。

¥Breaking Dropped .card-columns in favor of Masonry. See #28922.
破坏用新的手风琴组件替换了基于 .card 的手风琴。

¥Breaking Replaced the .card based accordion with a new Accordion component.

轮播

¥Carousel

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

¥Added new .carousel-dark variant for dark text, controls, and indicators (great for lighter backgrounds).
用 Bootstrap Icons 中的新 SVG 替换了轮播控件的 V 形图标。

¥Replaced chevron icons for carousel controls with new SVGs from Bootstrap Icons.

关闭按钮

¥Close button

破坏将 .close 重命名为 .btn-close，以获得不太通用的名称。

¥Breaking Renamed .close to .btn-close for a less generic name.
关闭按钮现在使用 background-image（嵌入式 SVG）而不是 HTML 中的 ×，从而可以更轻松地进行自定义，而无需修改标记。

¥Close buttons now use a background-image (embedded SVG) instead of a × in the HTML, allowing for easier customization without the need to touch your markup.
添加了新的 .btn-close-white 变体，该变体使用 filter: invert(1) 在较暗的背景下启用更高对比度的消除图标。

¥Added new .btn-close-white variant that uses filter: invert(1) to enable higher contrast dismiss icons against darker backgrounds.

坍塌

¥Collapse

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

¥Removed scroll anchoring for accordions.

下拉菜单

¥Dropdowns

为按需深色下拉菜单添加了新的 .dropdown-menu-dark 变体和相关变量。

¥Added new .dropdown-menu-dark variant and associated variables for on-demand dark dropdowns.
为 $dropdown-padding-x 添加了新变量。

¥Added new variable for $dropdown-padding-x.
使下拉分隔线变暗以提高对比度。

¥Darkened the dropdown divider for improved contrast.
Breaking 下拉列表的所有事件现在都在下拉切换按钮上触发，然后向上冒泡到父元素。

¥Breaking All the events for the dropdown are now triggered on the dropdown toggle button and then bubbled up to the parent element.
现在，当下拉菜单的位置是静态的或下拉菜单位于导航栏中时，下拉菜单会设置 data-bs-popper="static" 属性。这是由我们的 JavaScript 添加的，可帮助我们使用自定义位置样式，而不会干扰 Popper 的定位。

¥Dropdown menus now have a data-bs-popper="static" attribute set when the positioning of the dropdown is static, or dropdown is in the navbar. This is added by our JavaScript and helps us use custom position styles without interfering with Popper’s positioning.
破坏删除了下拉插件的 flip 选项，转而采用原生 Popper 配置。现在，你可以通过在 flip 修饰符中为 fallbackPlacements 选项传递一个空数组来禁用翻转行为。

¥Breaking Dropped flip option for dropdown plugin in favor of native Popper configuration. You can now disable the flipping behavior by passing an empty array for fallbackPlacements option in flip modifier.
现在可以使用新的 autoClose 选项单击下拉菜单来处理自动关闭行为。你可以使用此选项接受下拉菜单内部或外部的单击以使其具有交互性。

¥Dropdown menus can now be clickable with a new autoClose option to handle the auto close behavior. You can use this option to accept the click inside or outside the dropdown menu to make it interactive.
下拉菜单现在支持 .dropdown-item 封装在 <li> 中。

¥Dropdowns now support .dropdown-items wrapped in <li>s.

超大屏幕

¥Jumbotron

破坏删除了大屏幕组件，因为它可以通过工具进行复制。See our new Jumbotron example for a demo.

¥Breaking Dropped the jumbotron component as it can be replicated with utilities. See our new Jumbotron example for a demo.

列表组

¥List group

添加了新的 .list-group-numbered 修饰符以列出组。

¥Added new .list-group-numbered modifier to list groups.

导航和选项卡

¥Navs and tabs

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

¥Added new null variables for font-size, font-weight, color, and :hover color to the .nav-link class.

导航栏

¥Navbars

打破导航栏现在需要一个容器（以大大简化间距要求和 CSS 要求）。

¥Breaking Navbars now require a container within (to drastically simplify spacing requirements and CSS required).
Breaking .active 类不能再应用于 .nav-item，必须直接应用于 .nav-link。

¥Breaking The .active class can no longer be applied to .nav-items, it must be applied directly on .nav-links.

Offcanvas

添加了新的 offcanvas 组件。

¥Added the new offcanvas component.

分页

¥Pagination

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

¥Pagination links now have customizable margin-left that are dynamically rounded on all corners when separated from one another.
将 transition 添加到分页链接。

¥Added transitions to pagination links.

Popovers

Breaking 在我们的默认弹出窗口模板中将 .arrow 重命名为 .popover-arrow。

¥Breaking Renamed .arrow to .popover-arrow in our default popover template.
将 whiteList 选项重命名为 allowList。

¥Renamed whiteList option to allowList.

下拉列表

¥Spinners

旋转器现在通过放慢动画速度来纪念 prefers-reduced-motion: reduce。参见#31882。

¥Spinners now honor prefers-reduced-motion: reduce by slowing down animations. See #31882.
改进了旋转器垂直对齐。

¥Improved spinner vertical alignment.

吐司

¥Toasts

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

¥Toasts can now be positioned in a .toast-container with the help of positioning utilities.
将默认 Toast 持续时间更改为 5 秒。

¥Changed default toast duration to 5 seconds.
从 toast 中删除了 overflow: hidden，并替换为具有 calc() 功能的适当 border-radius。

¥Removed overflow: hidden from toasts and replaced with proper border-radiuss with calc() functions.

工具提示

¥Tooltips

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

¥Breaking Renamed .arrow to .tooltip-arrow in our default tooltip template.
Breaking fallbackPlacements 的默认值更改为 ['top', 'right', 'bottom', 'left']，以便更好地放置 popper 元素。

¥Breaking The default value for the fallbackPlacements is changed to ['top', 'right', 'bottom', 'left'] for better placement of popper elements.
破坏将 whiteList 选项重命名为 allowList。

¥Breaking Renamed whiteList option to allowList.

实用工具

¥Utilities

突破重命名了多个工具，以使用逻辑属性名称而不是方向名称，并添加了 RTL 支持：

¥Breaking Renamed several utilities to use logical property names instead of directional names with the addition of RTL support:
- 将 .float-left 和 .float-right 重命名为 .float-start 和 .float-end。
  
  ¥Renamed .float-left and .float-right to .float-start and .float-end.
- 将 .border-left 和 .border-right 重命名为 .border-start 和 .border-end。
  
  ¥Renamed .border-left and .border-right to .border-start and .border-end.
- 将 .rounded-left 和 .rounded-right 重命名为 .rounded-start 和 .rounded-end。
  
  ¥Renamed .rounded-left and .rounded-right to .rounded-start and .rounded-end.
- 将 .ml-* 和 .mr-* 重命名为 .ms-* 和 .me-*。
  
  ¥Renamed .ml-* and .mr-* to .ms-* and .me-*.
- 将 .pl-* 和 .pr-* 重命名为 .ps-* 和 .pe-*。
  
  ¥Renamed .pl-* and .pr-* to .ps-* and .pe-*.
- 将 .text-*-left 和 .text-*-right 重命名为 .text-*-start 和 .text-*-end。
  
  ¥Renamed .text-*-left and .text-*-right to .text-*-start and .text-*-end.
Breaking 默认情况下禁用负边距。

¥Breaking Disabled negative margins by default.
添加了新的 .bg-body 类，用于快速将 <body> 的背景设置为其他元素。

¥Added new .bg-body class for quickly setting the <body>’s background to additional elements.
为 top、right、bottom 和 left 添加了新的位置实用程序。每个属性的值包括 0、50% 和 100%。

¥Added new position utilities for top, right, bottom, and left. Values include 0, 50%, and 100% for each property.
添加了新的 .translate-middle-x 和 .translate-middle-y 工具以水平或垂直居中绝对/固定定位元素。

¥Added new .translate-middle-x & .translate-middle-y utilities to horizontally or vertically center absolute/fixed positioned elements.
添加了新的 border-width 实用程序。

¥Added new border-width utilities.
破坏将 .text-monospace 重命名为 .font-monospace。

¥Breaking Renamed .text-monospace to .font-monospace.
Breaking 删除了 .text-hide，因为它是一种过时的隐藏文本的方法，不应再使用。

¥Breaking Removed .text-hide as it’s an antiquated method for hiding text that shouldn’t be used anymore.
为 font-size 工具添加了 .fs-* 工具（启用 RFS）。它们使用与 HTML 默认标题相同的比例（1-6，从大到小），并且可以通过 Sass 映射进行修改。

¥Added .fs-* utilities for font-size utilities (with RFS enabled). These use the same scale as HTML’s default headings (1-6, large to small), and can be modified via Sass map.
突破为了简洁和一致性，将 .font-weight-* 工具重命名为 .fw-*。

¥Breaking Renamed .font-weight-* utilities as .fw-* for brevity and consistency.
突破性将 .font-italic 工具重命名为 .fst-italic，以保持简洁并与新的 .fst-normal 工具保持一致。

¥Breaking Renamed .font-italic utility to .fst-italic for brevity and consistency with new .fst-normal utility.
添加了用于显示工具的 .d-grid 以及用于 CSS 网格和 Flexbox 布局的新 gap 工具 (.gap)。

¥Added .d-grid to display utilities and new gap utilities (.gap) for CSS Grid and flexbox layouts.
Breaking 删除了 .rounded-sm 和 rounded-lg，并引入了新的级别，.rounded-0 到 .rounded-3。参见#31687。

¥Breaking Removed .rounded-sm and rounded-lg, and introduced a new scale of classes, .rounded-0 to .rounded-3. See #31687.
添加了新的 line-height 工具：.lh-1、.lh-sm、.lh-base 和 .lh-lg。请参阅此处。

¥Added new line-height utilities: .lh-1, .lh-sm, .lh-base and .lh-lg. See here.
在我们的 CSS 中移动了 .d-none 工具，使其比其他显示工具更重要。

¥Moved the .d-none utility in our CSS to give it more weight over other display utilities.
使用 :focus-within 扩展了 .visually-hidden-focusable 辅助程序，使其也可以在容器上工作。

¥Extended the .visually-hidden-focusable helper to also work on containers, using :focus-within.

帮手

¥Helpers

突破响应式嵌入助手已重命名为 ratio helpers，具有新的类名称和改进的行为，以及有用的 CSS 变量。

¥Breaking Responsive embed helpers have been renamed to ratio helpers with new class names and improved behaviors, as well as a helpful CSS variable.
- 类已重命名，纵横比从 by 更改为 x。例如，.ratio-16by9 现在是 .ratio-16x9。
  
  ¥Classes have been renamed to change by to x in the aspect ratio. For example, .ratio-16by9 is now .ratio-16x9.
- 我们放弃了 .embed-responsive-item 和元素组选择器，转而使用更简单的 .ratio > * 选择器。不再需要更多的类，并且比率助手现在适用于任何 HTML 元素。
  
  ¥We’ve dropped the .embed-responsive-item and element group selector in favor of a simpler .ratio > * selector. No more class is needed, and the ratio helper now works with any HTML element.
- $embed-responsive-aspect-ratios Sass 映射已重命名为 $aspect-ratios，其值已简化为包含类名称和百分比作为 key: value 对。
  
  ¥The $embed-responsive-aspect-ratios Sass map has been renamed to $aspect-ratios and its values have been simplified to include the class name and the percentage as the key: value pair.
- 现在为 Sass 映射中的每个值生成并包含 CSS 变量。修改 .ratio 上的 --bs-aspect-ratio 变量以创建任何自定义宽高比。
  
  ¥CSS variables are now generated and included for each value in the Sass map. Modify the --bs-aspect-ratio variable on the .ratio to create any custom aspect ratio.
突破 “屏幕阅读器” 类现在是 “视觉上隐藏的” 类。

¥Breaking “Screen reader” classes are now “visually hidden” classes.
- 将 Sass 文件从 scss/helpers/_screenreaders.scss 更改为 scss/helpers/_visually-hidden.scss
  
  ¥Changed the Sass file from scss/helpers/_screenreaders.scss to scss/helpers/_visually-hidden.scss
- 将 .sr-only 和 .sr-only-focusable 重命名为 .visually-hidden 和 .visually-hidden-focusable
  
  ¥Renamed .sr-only and .sr-only-focusable to .visually-hidden and .visually-hidden-focusable
- 将 sr-only() 和 sr-only-focusable() mixins 重命名为 visually-hidden() 和 visually-hidden-focusable()。
  
  ¥Renamed sr-only() and sr-only-focusable() mixins to visually-hidden() and visually-hidden-focusable().
bootstrap-utilities.css 现在也包括了我们的帮手。不再需要在自定义构建中导入助手。

¥bootstrap-utilities.css now also includes our helpers. Helpers don’t need to be imported in custom builds anymore.

JavaScript

删除了 jQuery 依赖并将插件重写为常规 JavaScript。

¥Dropped jQuery dependency and rewrote plugins to be in regular JavaScript.
突破所有 JavaScript 插件的数据属性现在都已命名，以帮助区分 Bootstrap 功能与第三方和你自己的代码。例如，我们使用 data-bs-toggle 而不是 data-toggle。

¥Breaking Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use data-bs-toggle instead of data-toggle.
所有插件现在都可以接受 CSS 选择器作为第一个参数。你可以传递 DOM 元素或任何有效的 CSS 选择器来创建插件的新实例：

¥All plugins can now accept a CSS selector as the first argument. You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfig 可以作为接受 Bootstrap 的默认 Popper 配置作为参数的函数传递，以便你可以按照自己的方式合并此默认配置。适用于下拉菜单、弹出窗口和工具提示。

¥popperConfig can be passed as a function that accepts the Bootstrap’s default Popper config as an argument, so that you can merge this default configuration in your way. Applies to dropdowns, popovers, and tooltips.
fallbackPlacements 的默认值更改为 ['top', 'right', 'bottom', 'left']，以便更好地放置 Popper 元素。适用于下拉菜单、弹出窗口和工具提示。

¥The default value for the fallbackPlacements is changed to ['top', 'right', 'bottom', 'left'] for better placement of Popper elements. Applies to dropdowns, popovers, and tooltips.
从 _getInstance() → getInstance() 等公共静态方法中删除了下划线。

¥Removed underscore from public static methods like _getInstance() → getInstance().

迁移到 v5

v5.3.0

帮手

实用工具

v5.3.0-alpha2

CSS 变量

色彩模式

版式

组件

帮手

实用工具

文档

工具

v5.3.0-alpha1

色彩模式！

CSS 变量

组件

警报

列表组

下拉菜单

关闭按钮

导航栏

进度条

表单

实用工具

v5.2.0

焕然一新的设计

更多 CSS 变量

新 _maps.scss

新实用工具

额外的变化

v5.1.0

v5.0.0

依赖

浏览器支持

文档变更

Sass

色彩系统

网格更新

内容、重启等

RTL

表单

组件

手风琴

警报

徽章

面包屑

按钮

卡片

轮播

关闭按钮

坍塌

下拉菜单

超大屏幕

列表组

导航和选项卡

导航栏

Offcanvas

分页

Popovers

下拉列表

吐司

工具提示

实用工具

帮手

JavaScript

新 `_maps.scss`