迁移到 v5

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

v5.3.6

依赖

¥Dependencies

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

¥Migrated from Hugo to Astro for building our documentation

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 兼容，以便它们与我们新增的链接实用程序更好地协同工作。

¥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

如果你要从我们之前的 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 变量。

¥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 变体，在活动导航链接下具有更简单的底部边框。查看文档中的示例。

¥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.
添加了新的链接工具，用于链接颜色不透明度、下划线偏移、下划线颜色和下划线不透明度。探索新的链接工具。

¥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.
Deprecated .text-muted 实用程序和 $text-muted Sass 变量已被弃用，并由 .text-body-secondary 和 $body-secondary-color 取代。

¥Deprecated The .text-muted utility and $text-muted Sass variable have been deprecated and replaced with .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.

Deprecated 颜色模式取代了组件的深色变体，因此 .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.
Deprecated alert-variant() 混合宏现已弃用。现在，我们可以直接使用使用 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.
Deprecated list-group-item-variant() 混合宏现已弃用。现在，我们可以直接使用使用 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

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

¥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

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

¥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

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

¥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

Deprecated .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.
盒子阴影工具（和 Sass 变量）已针对暗黑模式进行更新。他们现在使用 --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。查看表格文档中的示例。

¥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-* 实用程序，而是可以使用 .text-bg-* 助手设置具有对比前景 color 的 background-color。

¥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。— 添加带有响应式 .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 插件现在支持水平折叠。— 将 .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.
添加了新的堆栈和垂直规则助手。— 使用 stacks 快速应用多个 Flexbox 属性，快速创建自定义布局。从水平 (.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.
添加了新的代码片段示例，以展示如何自定义我们的组件。— 使用我们新的代码片段示例，即可使用自定义组件和其他常见设计模式。包含 footers、dropdowns、列表组和 modals。

¥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

大家好！Bootstrap 5 的第一个主要版本 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 指南。

¥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.
将“Navs”组件页面重命名为 "导航和选项卡"。

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

¥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.
Breaking 将 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 媒体查询混合参数已更改为更合乎逻辑的方法。

¥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.
Breaking 已放弃 color()、theme-color() 和 gray() 函数，转而使用变量。参见#29083。

¥Breaking Dropped color(), theme-color(), and gray() functions in favor of variables. See #29083.
Breaking 将 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() 混合宏。使用 .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 移除了之前弃用的混合宏：

¥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.2 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.2 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.
- Breaking 将 .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-0 至 .order-5。

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

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

¥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 现已默认启用。使用 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.
Breaking 全面改进了显示排版，用 $display-font-sizes Sass 映射替换了 $display-* 变量。还删除了单个 $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 嵌套表格不再继承样式。

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

¥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() 混合宏已重命名为 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.
Breaking 已删除 .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
Breaking 已删除 .text-justify 类。请参阅#29793

¥Breaking Dropped .text-justify class. See #29793
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

添加了新的浮动形式！我们已将浮动标签示例提升为完全支持的表单组件。查看新的浮动标签页面。

¥Added new floating forms! We’ve promoted the Floating labels example to fully supported form components. See the new Floating labels page.
Breaking 合并原生和自定义表单元素。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.
Breaking 已删除 .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).
Breaking 已放弃 .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

Breaking 切换按钮带有复选框或单选按钮，不再需要 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.
Breaking 已删除 .btn-block，用于实用程序。不要在 .btn 上使用 .btn-block，而是使用 .d-grid 和 .gap-* 工具封装按钮，以根据需要间隔它们。切换到响应式类以更好地控制它们。阅读文档获取一些示例。

¥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).
Breaking 已放弃 .card-columns，转而使用 Masonry。请参阅#28922。

¥Breaking Dropped .card-columns in favor of Masonry. See #28922.
Breaking 将基于 .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).
将轮播控件的 V 形图标替换为 Bootstrap 图标中的新 SVG。

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

关闭按钮

¥Close button

Breaking 将 .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.
Breaking 已放弃下拉插件的 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

Breaking 删除了 jumbotron 组件，因为它可以通过实用程序复制。查看我们新的 Jumbotron 示例以获取演示。

¥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

Breaking 导航栏现在需要内置容器（以大幅简化间距要求和 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 可以在 .toast-container 中实现 positioned 效果。

¥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 为了更好地放置 popper 元素，fallbackPlacements 的默认值已更改为 ['top', 'right', 'bottom', 'left']。

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

¥Breaking Renamed whiteList option to allowList.

实用工具

¥Utilities

Breaking 重命名了几个实用程序，使其使用逻辑属性名称而非方向名称，并添加了 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.
Breaking 将 .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.
Breaking 为了简洁起见和保持一致性，将 .font-weight-* 实用程序重命名为 .fw-*。

¥Breaking Renamed .font-weight-* utilities as .fw-* for brevity and consistency.
Breaking 为了简洁起见和与新的 .fst-normal 实用程序保持一致性，将 .font-italic 实用程序重命名为 .fst-italic。

¥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

Breaking 响应式嵌入助手已重命名为比例助手，并添加了新的类名和改进的行为，以及一个有用的 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 "屏幕阅读器" 类现在改为 "视觉上隐藏的" 类。

¥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.
Breaking 所有 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().
移除了 util.js，其功能现已集成到各个插件中。如果你之前手动添加了 util.js，你可以放心地将其删除，因为它不再需要了。每个插件现在只包含其所需的实用程序，从而增强了模块化并减少了依赖。

¥Removed util.js, with its functionality now integrated into individual plugins. If you previously included util.js manually, you can safely remove it, as it is no longer needed. Each plugin now contains only the utilities it requires, enhancing modularity and reducing dependencies.

迁移到 v5

v5.3.6

依赖

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`