迁移指南

升级

Bootstrap 6 是一个重大版本，包含许多重大变更，以现代化我们的代码库，采用更新的构建工具，并改善自定义功能。继续阅读以获取从 v5 迁移到 v6 的指南，以及完整的新功能更新日志。

1. 升级你的 Bootstrap 依赖项：

   JSON

             {
     "dependencies": {
       "bootstrap": "^6.0.0"
     }
   }
           

   替换 @popperjs/core 与 @floating-ui/dom. 如果你使用日期选择器，请添加 vanilla-calendar-pro. 打包的 JavaScript 包含两个同级依赖。独立的 JavaScript 需要已安装的包或导入映射。

2. 如果使用所有的 Bootstrap Sass 文件，请在你的 Sass 中包含它 @use:

   SCSS

             @use "bootstrap/scss/bootstrap";
           

   通过这个，你就可以轻松地覆盖 Bootstrap 的 Sass 变量和映射：

   SCSS

             @use "bootstrap/scss/bootstrap" with (
    $spacer: 1rem,
    $enable-reduced-motion: true,
   );
           

3. 如果只使用 Bootstrap 的 Sass 文件的某些部分，你可以使用 @use 单独导入它们。请注意，我们的 Sass 文件结构已经更改，你可能需要相应地调整导入。

   SCSS

             @use "bootstrap/scss/forms";
           

4. 根据更新日志和文档中的更新修改 HTML 和 CSS。

5. 重新编译你的 Sass 以查看更改。

更新日志

CSS

• 澄清并简化的 CSS-Sass 设置。 了解更多关于我们的信息 方法 关于我们如何将 Sass 和 CSS 一起使用，以构建和定制适合你特定需求的项目，特别是我们如何在 Sass map中使用 CSS 变量作为我们的第一层定制层。
• 已实现的 CSS 层 在 _root.scss 并将它们应用到我们所有的Sass文件中。
  • 图层已设置 _root.scss 然后在不同的 Sass 部分中使用。
  • 不幸的是，我们不能打包 @use 或 @forward 中的声明 @layer——Sass 期望这些始终处于顶层。此外，虽然 CSS 允许 @import "file.css" layer(name)Sass 也不支持那种。
• 全新简化的颜色模式和主题设置。
  • 已移除 _maps.scss
  • 已移除 _variables-dark.scss
  • 已添加 _colors.scss, 将颜色拆分到它们自己的文件中
  • 已移除 _variables.scss，将所有变量合并到 _config.scss
  • 已添加 _theme.scss 我们设置所有全局主题以应用颜色的地方
• 更新了 lg、xl 和 2xl 的断点和容器。
  • 增加了 lg 断点从 992px 到 1024px；其容器保持在 960px 不变。
  • 增加了 xl 断点从1200像素到1280像素，其容器从1140像素到1200像素。
  • 已重命名 xxl 到 2xl 为了更好地适应额外的自定义断点进行缩放
  • 增加了 2xl 断点从1400像素到1536像素，其容器从1320像素到1440像素。
• 采用了现代 CSS 颜色函数。 所有 Sass 颜色变量现在使用 oklch() 符号（例如， $blue: oklch(60% 0.24 240)) 并且生成了色调/明暗比例 color-mix(in oklch, ...) 默认情况下。使用以下方式配置色彩空间 $color-mix-space. 第五版 $*-rgb CSS 自定义属性和 rgba() 模式已被移除。这需要浏览器支持 color-mix() 和 oklch().
• 带有新主题令牌系统 .theme-* 课程。 每个组件的颜色变体类（例如 .alert-primary, .badge.bg-primary, .btn-primary, .table-primary) 被一个可组合对象替换 .theme-{name} 图案。添加 .theme-primary 到组件集合 --theme-bg, --theme-fg, --theme-border, --theme-contrast以及组件读取的其他语义 CSS 自定义属性。这适用于按钮、徽章、警报、表格、卡片、折叠面板等。使用 .theme-reset 在嵌套子树上返回到组件默认值。
• 根代币现在开始发射 :root, :host. 自定义属性存在于两个选择器上，因此采用 Bootstrap 样式表的 shadow root 可以读取这些令牌。如果你覆盖 :root 只有 Web 组件不会看到这些覆盖——请在...上重复它们 :host，或者使用一个同时覆盖两者的选择器。
• 响应式和状态类现在使用前缀，而不是中缀或后缀。 类名遵循 Tailwind 风格 prefix:class 模式（例如， md:d-none 而不是 d-md-none, hover:opacity-50 而不是 opacity-50-hover). 在 HTML 中，使用未转义的冒号： class="md:d-none"这适用于工具类、网络、拟州变体以及所有响应式组件。

前缀语法不会识别查询类型。工具类、网格列、容器、抽屉和响应式表格使用视口查询。堆栈、CSS 网格列、导航栏扩展、水平列表组、卡片组和堆叠表格使用容器查询。添加每个组件文档所需的查询容器。

• 新的运动工具。 已添加 .transition-none 和 .animation-none 关闭单个元素上的组件过渡或关键帧动画，以及装饰性动画 .animation-shake 和 .animation-pop 助手。请参阅 运动工具 页面。装饰性动画在以下情况下会自我禁用 prefers-reduced-motion.
• 复选框、单选按钮和开关现在会对它们的标记进行动画处理。 复选框勾选、单选圆点和开关滑块通过轻微的超调缓入，由共享驱动 --control-transition-duration 和 --control-transition-timing 令牌，使所有三个同步移动。对于喜欢减少动画的用户，将跳过此动作，并且不需要更改任何标记。
• 拆分淡入淡出和折叠的过渡标记。 v5 的单曲 $transition-fade 和 $transition-collapse 值现在是 CSS 自定义属性对——--transition-fade-duration / --transition-fade-timing 和 --transition-collapse-duration / --transition-collapse-timing——因此持续时间和缓动可以独立调整。覆盖组件（对话框、抽屉、菜单）也共享一个新的 --transition-timing-overlay 逐步令牌。将任何旧值的覆盖更新为新的令牌名称。
• 新 .hover-lift 助手 在悬停和键盘聚焦时，通过变换和更深的阴影提升元素，可通过以下方式自定义 --hover-lift-* 支持令牌和减少动画。见 悬浮升降 助手
• 已移除组合 --*-transition 代币。 按钮、导航链接、折叠面板、表单控件、范围滑块和浮动标签各自降低了它们的组合 --*-transition 值。每一个现在声明一个 --*-transition-property / --*-transition-duration / --*-transition-timing 三重奏。旧的令牌将整个属性列表和一个持续时间打包到 transition 速记，其中持续时间仅绑定到最后一个属性——所以按钮的 color, background-color，和 border-color 从未真正动画化。这些组件现在设置 transition-property, transition-duration，和 transition-timing-function 它们自身，会在每个列出的属性上重复一次持续时间和缓动。替换重写的 --bs-btn-transition 以及配套的朋友 -duration 和 -timing 代币。
• 过渡现在通过选择加入 prefers-reduced-motion: no-preference. 我们的过渡混入以前用于触发一次过渡，然后在其中关闭它 prefers-reduced-motion: reduce 查询。他们现在只在内部发出它 no-preference 查询。因此，不支持该媒体特性的浏览器根本不会有任何过渡。强制的规则 transition: none 保持在查询之外，因此它们仍然可以到达每个浏览器。
• 现在每个动画组件都暴露了一个 -property 令牌。 对话框、抽屉、菜单和消息提示加入了按钮和折叠面板原本已有的三件组合，因此 --bs-dialog-transition-property, --bs-drawer-transition-property, --bs-menu-transition-property，和 --bs-toast-transition-property 在不重写整个动画的情况下为动画添加属性 transition 声明。折叠面板面板也获得了它自己的 --bs-accordion-panel-transition-* trio，它替换了硬编码的 .2s看新的 过渡 完整模型的页面。

Sass

• 停止支持 Node Sass，包括不再使用它测试我们的任何源 CSS。
  • 在此过程中重新整理了几个 Sass 文件。
• 已移除 add() 和 subtract() 功能。使用 calc() 取而代之
• 已移除 create-css-vars() mixin（未使用）。
• 已重命名 breakpoint-infix() 到 breakpoint-prefix(). 该函数现在返回一个前缀字符串（例如， "md\:") 而不是中缀 (例如, "-md")。那 loop-breakpoints-up 和 loop-breakpoints-down 混入现在暴露 $prefix 而不是 $infix更新调用这些函数或混入的任何自定义 Sass。
• CSS 变量前缀现在由 PostCSS 处理。 这 $prefix Sass 变量已被移除。CSS 自定义属性现在在 Sass 源码中无需前缀编写，并通过自动添加前缀 postcss-prefix-custom-properties 在构建过程中。要自定义前缀，请更新你的 PostCSS 配置，而不是 Sass。
• 已移除 RFS（响应式字体尺寸）。 这 scss/vendor/_rfs.scss 文件和所有 RFS 混入已被移除。排版现在使用固定值 rem 价值观和 clamp() 用于响应式尺寸。如果你依赖 RFS 来自动调整字体大小，你将需要实现自己的响应式排版或使用 clamp() 直接地。
• 已重命名 Sass 文件以保持一致性。 _placeholders.scss 现在是 _placeholder.scss 和 _spinners.scss 现在是 _spinner.scss. 更新任何个人 @use 导入这些文件。
• 带有标准化焦点样式 focus-ring 混入 所有组件特定 *-focus-box-shadow Sass 变量（例如， $btn-focus-box-shadow, $input-focus-box-shadow, $accordion-button-focus-box-shadow) 已被移除。焦点样式现在由共享处理 @mixin focus-ring() 使用 --focus-ring, --focus-ring-width, --focus-ring-offset，和 --focus-ring-color CSS 自定义属性。通过覆盖这些标记来自定义焦点样式 _root.scss 而不是单独的 Sass 变量。
• 已重命名 $grid-breakpoints 到 $breakpoints.
• 主题和配置映射现在通过合并 defaults(). $theme-colors, $theme-bgs, $theme-fgs, $theme-borders, $badge-variants，而其他全球地图接受部分 @use ... with () 覆盖。v5 需要完全替换地图。设置一个键为 null 丢弃它。嵌套的主题颜色映射会在一层深度合并——传递整个子映射以更改一个角色。参见 萨斯.
• 已移除 $enable-dark-mode. 深色模式支持始终被编译；可在运行时通过控制它 data-bs-theme （或者 color-mode() 混入）而不是切换 Sass 标志。
• 已移除 $enable-caret 以及插入点混入。 当菜单移至浮动界面时，菜单切换失去了自动箭头，因此该标志没有效果。 caret(), caret-down(), caret-up(), caret-end()，和 caret-start() 混入物 scss/mixins/_caret.scss 文件，以及 $caret-width, $caret-vertical-align，和 $caret-spacing 变量也消失了。如果你想要一个小箭头，请在切换标记中添加一个图标。
• 删除所有已弃用的 Sass 变量和值：
  • 已移除 $nested-kbd-font-weight，不替换。
  • 已移除 muted, black-50，和 white-50 来自文本颜色工具类映射
  • 已移除轮播深色 Sass 变量 ($carousel-dark-indicator-active-bg, $carousel-dark-control-icon-filter) 和 .carousel-dark 类——它们不会被重新赋值。深色旋转木马现在使用 data-bs-theme="dark" （请参见下方的旋转木马更改）。旋转木马的标题也被完全移除了。
  • 已移除 $btn-close-white-filter关闭按钮不再使用过滤器——它的图标是用 CSS 遮罩绘制的 currentcolor，所以它会自动适应深色背景。
  • 已全部移除 $border-radius-* 变量 (-xs, -sm默认, -lg, -xl, -xxl, -pill）支持数字的 $radii 地图和 --radius-* 令牌—参见 边框半径令牌 在工具类下。
  • 已移除 $text-muted 用于次要颜色。
  • 已移除 $hr-bg-color 为了 $hr-border-color 和 $hr-height 为 $hr-border-width.
  • 已重命名 $zindex-dropdown 到 $zindex-menu.
  • 已移除未使用的 $dropdown-header-padding 为了 -x/-y 拆分变量。
  • 已移除未使用的 $accordion-button-focus-border-color.
  • 已移除未使用的 $tooltip-arrow-color.
  • 已移除未使用的 $popover-arrow-color 和 $popover-arrow-outer-color
  • 已移除未使用的 $alert-bg-scale, $alert-border-scale，和 $alert-color-scale （被主题标记替换）
  • 已移除未使用的 $list-group-item-bg-scale 和 $list-group-item-color-scale （被主题标记替换）
• 已删除表单验证的 Sass 变量和文件。
  • 已移除 scss/forms/_form-variables.scss. 反馈/提示的 Sass 变量和验证图标 SVG 数据 URI 已消失。验证样式现在使用来自主题的 CSS 自定义属性。
  • 已重命名 scss/mixins/_forms.scss 到 scss/mixins/_form-validation.scss. 仅包含 form-validation-state-selector 混入
  • 已移除 $enable-validation-icons 从 scss/_config.scss.
  • 已替换 $form-validation-states 与 $validation-states （州名称到主题键映射）。

JavaScript

• show(), hide(), toggle()，和 close() 现在返回一个承诺。 当过渡结束时，承诺会解决，所以你可以 await 这些方法而不是等待 shown.bs.* 或 hidden.bs.* 事件。在 v5 中他们回来了 undefined事件仍然会触发，所以现有代码仍然可以运行。这涵盖了提示（Alert）、折叠（Collapse）、组合框（Combobox）、日期选择器（Datepicker）、对话框（Dialog）、抽屉（Drawer）、菜单（Menu）、弹出框（Popover）、标签页（Tab）、消息提示（Toast）和工具提示（Tooltip）。轮播（Carousel）的 next(), prev()，和 to() 保持不变。

  之前（v5）：

  JavaScript

            myCollapseEl.addEventListener('shown.bs.collapse', () => {
    // Runs once the collapsible area is expanded
  })
  
  collapse.show()
          

  在（v6）之后：

  JavaScript

            await collapse.show()
  // The collapsible area is now expanded
          

  该承诺会在没有值的情况下解决，即使调用什么也不做时也会解决——例如当组件已经打开或监听器阻止时 show.bs.* 事件。如果你需要知道组件是否发生了变化，请自己检查组件状态。

• Bootstrap 的 JavaScript 现在仅支持 ESM。 我们不再运输 UMD 捆绑包。所有分发文件 (bootstrap.js, bootstrap.bundle.js，以及它们的压缩版本）是原生 ES 模块。加载模型已更改，并且多个组件 API 已如下面所列发生更改。

  • 内容分发网络 <script> 必须添加标签 type="module":

    HTML

              <script type="module" src="bootstrap.bundle.min.js"></script>
            

  • 在 v5 中，UMD 包会自动创建一个 window.bootstrap 全局的。ES 模块不会这样做，所以不再有一个 bootstrap 全局对象。如果你通过全局命名空间调用插件 API，你必须更新为显式导入：

    之前（v5）：

    JavaScript

              const tooltip = bootstrap.Tooltip.getOrCreateInstance(el)
            

    在（v6）之后：

    JavaScript

              import { Tooltip } from './bootstrap.bundle.min.js'
    const tooltip = Tooltip.getOrCreateInstance(el)
            

  • 数据 API 初始化仍然会自动运行。 添加 type="module" 到 script 标签。你还必须按照本指南应用组件和数据属性的重命名。

  • 对于现代基于 ESM 的打包工具（Vite、Webpack 5、Parcel 2、Rollup 等）， import { Tooltip } from 'bootstrap' 仍然有效并支持 tree shaking。安装 @floating-ui/dom 用于定位组件和 vanilla-calendar-pro 用于日期选择器。使用 CommonJS 的项目 require() 调用必须更改为 ESM import 语法。

  • 这 bootstrap.bundle.js 文件包括 Floating UI 和 Vanilla Calendar Pro。独立的 bootstrap.js 文件将这些对等依赖保持为外部，因此直接在浏览器中加载需要使用导入映射。

• Bootstrap 的 JavaScript 源代码现在是 TypeScript。 这 js/src 文件使用 .ts 扩展。该包内置类型声明随包一同发布 js/dist/*.d.ts，所以你不再需要 @types/bootstrap深 .js 导入仍然有效： bootstrap/js/src/alert.js 现在解析为编译后的文件在 js/dist. 要导入原始 TypeScript 源代码，请使用 bootstrap/js/src/alert.ts.

• 我们现在使用 Rolldown 构建，而不是使用 Rollup 和 Babel。 这只会影响如果你从源码构建 Bootstrap 的情况。Rolldown 会去掉 TypeScript 类型并降级语法，所以 Babel 就不需要了，连同 .babelrc.mjs 和那个 @rollup/plugin-* 包。已发布的文件位于 dist/ 和 js/dist/ 格式保持不变。如果你在自己的项目中打包 Bootstrap，继续使用你喜欢的打包工具——Rollup 仍然是一个不错的选择，而且 import { Tooltip } from 'bootstrap' 工作原理相同。参见 贡献指南 详情请参阅。

• 当 Tab 的元素没有 tab-panel 祖先时，Tab 会抛出异常。 在 v5 中，构造函数会提前返回，并给你一个无效实例，这隐藏了标记错误。将你的制表符触发器包裹在 .list-group, .nav，或者 [role="tablist"] 容器，作为 导航文档 展示。

• 移除了单独的 bootstrap.esm.js 和 bootstrap.esm.min.js 文件 — bootstrap.js 现在是 ESM 入口点。

• 已移除 js/index.umd.js 入口点。

• 已移除 jQuery 支持和 js-test-jquery 测试目标。

• 移除了内部 util/backdrop, util/focustrap，和 util/scrollbar 助手。 现在它们已经过时了，因为 Dialog 和 Drawer 基于原生构建 <dialog> 元素——浏览器提供了背景（::backdrop）、聚焦陷阱，以及惰性顶层，并且主体滚动锁定在 CSS 中处理（:root.dialog-open 与 scrollbar-gutter: stable). 如果你直接从这些模块中导入了任何内容 bootstrap/js/src/util/，他们走了。

• 将下拉组件替换为菜单。 全部 .dropdown-* 现在是课程时间 .menu-* 课程，以及 data-bs-toggle="dropdown" 现在是 data-bs-toggle="menu". 参见 菜单文档 详情请参阅。

• 菜单 shown.bs.menu 和 hidden.bs.menu 现在在 CSS 过渡完成后触发，而不是在…时同步 show() / hide() 被称为——匹配的对话框和抽屉。菜单在关闭过渡过程中也会继续保持在 DOM 中的定位，而不是立即被销毁。将任何假定旧的同步时序（或菜单立即被移除）的逻辑移开 hide() 返回)到 shown / hidden 事件处理器。

  • 已重命名的 CSS 类： .dropdown-menu 到 .menu, .dropdown-item 到 .menu-item, .dropdown-divider 到 .menu-divider, .dropdown-header 到 .menu-header, .dropdown-submenu 到 .submenu.
  • 已移除方向包裹器： .dropstart, .dropend，和 .dropup. 使用 data-bs-placement 改为控制方向（例如， .dropup 变成 data-bs-placement="top").
  • 已移除 .dropdown-toggle 类——菜单切换不再需要切换类。
  • 已移除 .dropdown 包装器——不需要包装器元素。切换和 .menu 是直系兄弟姐妹。
  • 来自简化标记 <ul><li><a class="dropdown-item"> 到一套公寓 <div class="menu"><a class="menu-item"> 结构。
  • 已移除 .dropdown-toggle-split — 分割菜单的按钮组边框半径现在通过自动方式处理 :has(+ .menu).
  • 已将 JavaScript 导出重命名为 Dropdown 到 Menu — 更新导入到 import { Menu } from 'bootstrap'.
  • 已重命名的事件： show.bs.dropdown 到 show.bs.menu, shown.bs.dropdown 到 shown.bs.menu, hide.bs.dropdown 到 hide.bs.menu, hidden.bs.dropdown 到 hidden.bs.menu.
  • 已将数据键重命名为 bs.dropdown 到 bs.menu （影响 Menu.getInstance() 和 Menu.getOrCreateInstance()).

• 添加了新的下拉列表组件。 一个基于菜单构建的可搜索选择组件，支持单选和多选。请参阅 下拉框文档.

• 已替换 Popper.js (@popperjs/core) 与 Floating UI (@floating-ui/dom) 用于菜单、工具提示和弹出层的位置。 popperConfig Tooltip、Popover 和菜单（原下拉菜单）上的选项已被重命名为 floatingConfig请相应更新任何自定义定位配置。

• 已添加 Vanilla Calendar Pro (vanilla-calendar-pro) 作为新日期选择器组件的同级依赖。弹出式日期选择器在外部交互时关闭，点击 Escape，或者当焦点离开输入框和日历时。

• 已移除 jspm 来自配置 package.json.

• 已添加 "sideEffects" 元数据到 package.json 在启用打包器中的树摇优化的同时，保留 Bootstrap 插件在顶层注册的 Data API 事件监听器。

• 已添加 "exports" 映射到 package.json 用于对源文件、分发文件和 Sass 文件的显式子路径访问。

• 重写了 ScrollSpy，使其具有确定性并 IntersectionObserver-本地的 检测现在完全由激活线驱动（没有滚动位置轮询），因此活动部分始终是你正在阅读的部分，并且在容器的顶部和底部行为稳定。

  • 已移除长期弃用的 offset 和 method 选项（自 v5.1.3 起已弃用）。它们不再被解析。
  • 添加了 topMargin 选项（默认 12%) 将激活线定位为友好 % 或者 px 从滚动根部顶部的值（例如 96px 坐在粘性导航栏下面)。
  • rootMargin 现在是一个优先于…的高级覆盖 topMargin 并直接传递给观察者；其默认值是 null (激活线来源于 topMargin).
  • 更改了默认设置 threshold 从 [0.1, 0.5, 1] 到 [0].
  • 与 smoothScroll 启用后，现在点击链接会恢复 URL 哈希（通过 history.replaceState）并在滚动稳定后将焦点移到目标部分，从而改善键盘和辅助技术的导航。
  • 目标 id与…解决 getElementById因此，包含点、冒号、斜杠或百分号编码字符的ID现在可以在无需手动转义的情况下使用。

组件

• 将 Modal 组件替换为 Dialog。 对话建立在本地基础上 <dialog> 元素，使用 showModal() / show() / close() 浏览器 API。标记、类、数据属性、事件、CSS 变量以及 JavaScript API 都已发生变化：

  • 标记：The .modal > .modal-dialog > .modal-content 包装器结构已被单个取代 <dialog class="dialog"> 元素。正文部分使用 .dialog-header, .dialog-body，和 .dialog-footer 直接在里面 <dialog>.
  • CSS 类： .modal → .dialog, .modal-header → .dialog-header, .modal-body → .dialog-body, .modal-footer → .dialog-footer, .modal-title → .dialog-title。那 .modal-dialog 和 .modal-content 包装类已被完全移除。
  • 尺码： .modal-sm → .dialog-sm, .modal-lg → .dialog-lg, .modal-xl → .dialog-xl, .modal-fullscreen → .dialog-fullscreen.
  • 数据属性： data-bs-toggle="modal" → data-bs-toggle="dialog", data-bs-dismiss="modal" → data-bs-dismiss="dialog".
  • JavaScript： Modal → Dialog — 更新导入到 import { Dialog } from 'bootstrap'.
  • 事件： show.bs.modal → show.bs.dialog, shown.bs.modal → shown.bs.dialog, hide.bs.modal → hide.bs.dialog, hidden.bs.modal → hidden.bs.dialog, hidePrevented.bs.modal → hidePrevented.bs.dialog.
  • 数据密钥： bs.modal → bs.dialog （影响 Dialog.getInstance() 和 Dialog.getOrCreateInstance()).
  • CSS 变量： --modal-* → --dialog-*.
  • 背景：这个 .modal-backdrop DOM 元素和遗留 util/backdrop 助手消失了——对话使用本地的 ::backdrop 带有伪元素 backdrop-filter: blur() 支持
  • 滚动防护： .modal-open 开 <body> → .dialog-open 在根上（<html>) 元素，因此它与 scrollbar-gutter: stable 当对话框打开时，页面不会移动。
  • 新变体类别： .dialog-slide-up, .dialog-slide-down （幻灯片动画）， .dialog-instant （无动画）, .dialog-static (静态背景反弹), .dialog-nonmodal （非模态定位）， .dialog-scrollable.
  • 非模态支持：设置 modal: false 或 data-bs-modal="false" 用于非对话框。
  • 对话切换：在打开的对话框内的触发器可以打开一个新对话框并自动关闭当前对话框。
  • 看见这个 对话文档 详情请参阅。

• Offcanvas 已重命名为 Drawer。 所有类名、数据属性、事件、CSS 变量和 JavaScript API 都已被重命名：

  • 元素： <div class="offcanvas"> → <dialog class="drawer">. 抽屉需要本地的 <dialog> 元素。
  • CSS 类： .offcanvas → .drawer, .offcanvas-start → .drawer-start, .offcanvas-header → .drawer-header等等
  • 数据属性： data-bs-toggle="offcanvas" → data-bs-toggle="drawer", data-bs-dismiss="offcanvas" → data-bs-dismiss="drawer"
  • JavaScript： Offcanvas → Drawer
  • 事件： show.bs.offcanvas → show.bs.drawer, hidePrevented.bs.offcanvas → hidePrevented.bs.drawer等等
  • CSS 变量： --offcanvas-* → --drawer-*
  • Sass： $zindex-offcanvas → $zindex-drawer

• 新 .drawer-sheet 变体 适用于无嵌入、无边框圆角和无阴影的贴边面板。

• 滑动以关闭 Drawer 组件在触摸设备上支持手势操作。Drawer 会自动检测其放置位置，并在适当的滑动方向上关闭。

• 对话框和抽屉共享 DialogBase —— 显示/隐藏/切换的生命周期、键盘处理、背景点击以及静态背景弹跳都整合在一个共享的基类中。

• Toast 过渡已移至 CSS。 褪色现在使用 @starting-style 带有离散的 display 过渡，因此组件不再切换辅助类来驱动动画：

  • 已移除 animation 选项和 data-bs-animation. 添加 .toast-instant 跳过动画，匹配 .dialog-instant 和 .drawer-instant.
  • 已移除 .showing 类和已弃用的 .hide 班级。仅 .show 现在已切换。替换依赖它们的任何 CSS 或测试。
  • 消息提示不再得到通用的 .fade 课程。过渡仍在延续 .toast 自身，调整为 --toast-transition-duration 和 --toast-transition-timing.
  • isShown() 返回 false 一……就…… hide() 被调用，而不是在淡出结束时。

• 警报、标签、工具提示和弹出框也已迁移到 CSS，因此不需要任何东西 .fade 再也不。 每一个都声明它自己的过渡和它自己的 --bs-{component}-transition-* 代币，就像消息提示已经做的那样。 .fade 保留为你自己的标记的通用类，它放在哪里都无害，但没有组件依赖它：

  • 警报会自动消失。 close() 添加 .hiding 在过渡期间，然后移除该元素，所以 .fade 和 .show 在标记中不再需要。以前从未有过的警报 .fade 现在也动画了，这会延迟 closed.bs.alert 通过过渡。添加 .alert-instant 保持旧的即时删除。
  • 标签面板会自行淡入。 该插件添加 .active 和 .show 在同一帧中而不是对它们进行排序，并且 CSS 从中进行动画 @starting-style你离开的面板会立即隐藏，因为两个流入的面板不能交叉淡入淡出。 shown.bs.tab 现在在传入窗格完成后触发。添加 .tab-pane-instant 立即交换。
  • 工具提示和弹出框从…动画显示 @starting-style. 该插件不再添加 .fade 到尖端。 animation: false 添加 .tooltip-instant 或 .popover-instant 相反，你也可以将其写入自定义 template.
  • 悬停和聚焦提示会保持在提示上打开。 在 v5 中，当指针离开触发器时，工具提示会立即隐藏。v6 在指针或焦点位于提示本身时保持其打开，因此工具提示内的链接是可以访问的(WCAG 1.4.13). 按下 Escape 或离开触发器和提示即可隐藏它。见 工具提示.

• 占位符加载动画现在更倾向于闪光效果。 使用 .placeholder-wave 用于标准加载动画。旧的透明度动画已移至 .placeholder-pulse. 这个 .placeholder-glow 类仍作为兼容别名 .placeholder-pulse.

• Collapse 会原生地动画其尺寸。 插件切换 .show 而别无其他。CSS 使用动画来改变大小 interpolate-size，就像折叠面板已经做的那样：

  • 已移除 .collapsing 类，以及随之而来的内联 height 和 width 用于编写的插件。替换任何依赖其中任何一项的 CSS、测试或选择器。
  • 没有浏览器 interpolate-size 一次性打开和关闭元素。值得关注的是 Firefox。
  • .collapse 现在始终剪辑动画轴，因此内容不再会溢出盒子。A .collapse-horizontal 而是裁剪内联轴。
  • shown.bs.collapse 和 hidden.bs.collapse 现在启动 CSS 过渡，并进行调优 --bs-transition-collapse-property, --bs-transition-collapse-duration，和 --bs-transition-collapse-timing.
  • 一个同时针对多个崩塌的触发器 data-bs-parent 仍然会一起打开它们。父元素只会关闭触发器未针对的折叠项。

• 组件 JavaScript 读取计算得出的过渡持续时间。 警报、折叠、标签页、工具提示和弹出框不再寻找一个类来决定是否等待过渡，就像菜单已经做的那样。零持续时间——从 .transition-none，一个 -instant 类别，减少运动，或 $enable-transitions: false—同时解决承诺并触发事件。

• 重新设计的按钮变体。 像 v5 每色类这样的 .btn-primary, .btn-outline-primary, .btn-secondary等等被替换为同一元素上变体类 + 主题类的组合：

  • .btn-primary → class="btn-solid theme-primary"
  • .btn-outline-primary → class="btn-outline theme-primary"
  • 新变体类别： .btn-solid, .btn-outline, .btn-subtle, .btn-text，加 .btn-styled 用于渐变/阴影深度和 .btn-link 用于链接样式的按钮。
  • 颜色通过...应用 .theme-* 工具类（例如， .theme-primary, .theme-danger, .theme-success) 而不是内置在每个按钮类中。
  • 共享尺寸标记：按钮和输入现在共享 --btn-input-* 用于一致尺寸的CSS变量。
  • 新 .btn-icon 用于方形仅图标按钮的类，带有 aspect-ratio: 1.
  • 已添加 xs 按钮大小 (.btn-xs).

• 在本地重建折叠面板 <details> / <summary>. 标记结构已发生根本性变化：

  • v5: .accordion-item > .accordion-header > button.accordion-button + .accordion-collapse > .accordion-body，由 Collapse JavaScript 插件控制。
  • v6: <details class="accordion-item"> > <summary class="accordion-header"> + <div class="accordion-body">，使用浏览器的原生展开小部件。基本的打开/关闭行为无需依赖 JavaScript。
  • 独占折叠面板组（仅打开一个项目）通过 HTML 处理 name 属性开启 <details> 元素，替换 data-bs-parent 方法。
  • 这 .accordion-button 和 .accordion-collapse 课程已被取消。
  • 展开/折叠图标现在使用了一个 .accordion-icon 在摘要内的元素（通常是 SVG），替换 CSS background-image 方法。
  • 打开状态样式使用 details[open] 而不是由 JavaScript 切换的类。
  • 通过主题着色 .theme-* 关于……的课程 .accordion 包装纸。
  • 新修饰符： .accordion-sm 用于紧凑的填充和类型，以及 .accordion-gap 将项目作为独立的圆角卡片分隔开（--accordion-gap).

• 重建了关闭按钮的标记。 .btn-close 现在通过 CSS 渲染它的图标 mask-image (--btn-close-icon) 带有…色调 background-color: currentcolor，所以按钮是自包含的——没有子元素 <svg> 是必需的。基于滤镜的暗模式方法（$btn-close-white-filter) 已被替换为 currentcolor 继承，以及 .btn-close-white 类已被移除。在深色主题的界面上，图标现在会自动继承对比颜色。

• 已移除 .alert-dismissible. 可关闭的提醒不再需要 .alert-dismissible 修饰符类。放置一个 .btn-close 直接在警报内部——警报的弹性布局会自动定位它。移除任何 .alert-dismissible 来自你的标记的类。

• 重组卡片。 外边界依然存在 .card. 页眉和页脚仅保留分隔线边框。使用 .list-group-flush 在卡片里面——.card-list 已消失。已添加 --card-box-shadow 和 --card-body-gap 代币。新变体类别： .card-translucent （磨砂玻璃效果）和 .card-subtle （以细微背景为主题）。水平卡使用了新的 .card-row 类。已移除 .card-link 班级 .card-body 现在是一个可选的弹性列，它会移除直接子元素的块级外边距并使用 --card-body-gap 用于间距。添加 .flex-row 对于一个水平的身体。 .card-title 和 .card-text 仍作为项目钩子可用，但不再添加样式； .card-subtitle 仍然会减小字幕上方的间距。

• 卡片组现在使用容器查询。 .card-group 切换到其附加的、等宽的行布局，并带有 @container 使用查询而不是视口 @media 查询，因此它响应的是父查询容器的宽度，而不是视口。将卡片组包装在查询容器中——例如添加 .contains-inline 工具类对于父元素——否则卡片将保持堆叠状态。

• 列表组水平变体现在使用容器查询。 这 .*:list-group-horizontal 类在垂直和水平布局之间切换 @container 查询而不是视口 @media 查询，响应父查询容器而不是视口。将列表组包装在查询容器中（例如 .contains-inline) 以使响应式变体生效。

• 重新设计的徽章变体。 替换 v5 .bg-primary 带有实用模式的 .theme-* 徽章上的等级。例如， class="badge bg-primary" 变成 class="badge theme-primary" 用于默认的实心样式。添加 .badge-subtle 或 .badge-outline 对于其他变体。

• 为分页添加了主题变体支持。 添加一个 .theme-{color} 类到 .pagination (e.g., .pagination.theme-primary) 使用语义主题颜色为链接、悬停、聚焦和活动页面项目着色，以匹配警报和折叠面板已经使用的模式。

• 已更新面包屑标记。 面包屑现在使用 .breadcrumb-link 作为具有内边距、最小高度、悬停背景和明确性的交互元素 .breadcrumb-divider 元素作为项目之间的分隔符。一个空的 .breadcrumb-divider 通过 CSS 渲染默认的箭头 mask-image (--breadcrumb-divider-icon) 带有…色调 background-color: currentcolor; 在其中添加你自己的 SVG、文本或标记以覆盖。这将替换 v5 --bs-breadcrumb-divider 关于的内容字符串 .breadcrumb-item::before 伪元素。默认的底部外边距消失了（v5 使用了 $spacer / 1rem如果你仍然希望在轨迹下方留有空隙，请添加一个间隔工具类。

• 导航栏响应式折叠现在使用抽屉，而不是折叠组件。 v5 可折叠导航栏—— .navbar-toggler 切换一个 .collapse.navbar-collapse 通过 Collapse 插件的区域——已被替换为 抽屉在窄视口上，导航滑入显示为 <dialog class="drawer">; 从你的 .{breakpoint}:navbar-expand 断点向上它像以前一样以内联形式显示。有三件事发生变化：切换器针对一个抽屉（data-bs-toggle="drawer") 而不是折叠；可折叠区域变成了一个 <dialog class="drawer"> 与 .drawer-header / .drawer-body; 和 .navbar-expand-{bp} 中缀变成了 .{bp}:navbar-expand 前缀。v5 .navbar-light / .navbar-dark color-scheme 类也已被移除——可以使用背景工具来设置表面，例如 .bg-1 并让 颜色模式 处理明亮和黑暗。

  之前（v5）：

  HTML

            <nav class="navbar navbar-expand-md navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
        </ul>
      </div>
    </div>
  </nav>
          

  在（v6）之后：

  HTML

            <nav class="navbar md:navbar-expand bg-1">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarDrawer" aria-controls="navbarDrawer" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon" aria-hidden="true"></span>
      </button>
      <dialog class="drawer drawer-end" tabindex="-1" id="navbarDrawer" aria-labelledby="navbarDrawerLabel">
        <div class="drawer-header">
          <h5 class="drawer-title" id="navbarDrawerLabel">Menu</h5>
          <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="关闭"></button>
        </div>
        <div class="drawer-body">
          <ul class="nav navbar-nav me-auto">
            <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
          </ul>
        </div>
      </dialog>
    </div>
  </nav>
          

• 折叠触发器现在使用 aria-expanded 作为状态信号。 Bootstrap v6 不再添加或移除一个 .collapsed 关于折叠触发元素的类。如果你使用样式或查询触发器状态 .collapsed，将那些选择器迁移到 [aria-expanded="false"] 以及打开状态选择器到 [aria-expanded="true"].

• 已移除折叠 toggle 选项。 构造函数现在保持你的标记声明的状态，而不是切换它。丢弃 toggle: false 从你的配置来看，这就是你已经得到的行为。如果你依赖旧的 toggle: true 默认在初始化时更改状态，请改为调用匹配的方法。

  JavaScript

            // v5
  new bootstrap.Collapse(el)                  // opened a closed element
  new bootstrap.Collapse(el, { toggle: false })
  
  // v6
  new bootstrap.Collapse(el).show()
  new bootstrap.Collapse(el)
          

• 现在取消触发器会找到响应式抽屉。 data-bs-dismiss="drawer" 解析带有断点前缀的抽屉，例如 .lg:drawer，因此响应式抽屉内的关闭按钮不再需要 data-bs-target. 已存在 data-bs-target 属性继续工作。

• 切换按钮获得默认值 aria-pressed. 一个切换按钮需要 aria-pressed 以便辅助技术将其宣布为开关，因此 Bootstrap 现在将该属性添加到每一个 [data-bs-toggle="button"] 缺少它在 DOMContentLoaded，阅读 .active 选择该值。写 aria-pressed="false" 在你的标记中，以便在我们的 JavaScript 运行之前状态是正确的。

• 导航栏不再计算高度。 v5 衍生 $navbar-brand-height 和 $navbar-brand-padding-y 从导航链接的字体大小、行高和内边距来看，使品牌与链接匹配。v6 取消了这种计算。 .navbar 是一个将其子元素居中的弹性容器，因此填充和内容决定高度。 --navbar-brand-padding-y 现在是 .375rem，这与导航链接块的内边距相匹配，因此品牌和链接保持相同的点击目标。一个新的 --navbar-min-height 代币给酒吧一个 3.5rem 地板，所以默认 导航栏 高 56 像素。较高的内容，如徽标，仍会使工具栏超出底部。设置 --navbar-padding-y 或 --navbar-min-height 控制杆的高度。

• 导航栏切换图标现在使用了 CSS 遮罩。 .navbar-toggler-icon 通过呈现 mask-image (--navbar-toggler-icon) 带有…色调 background-color: currentcolor 而不是嵌入式的 background-image SVG。标记保持为空 <span class="navbar-toggler-icon">但图标现在会继承当前文本颜色（包括深色模式），因此不再需要单独的浅色/深色切换 SVG。

• 在 CSS 滚动捕捉上重建了旋转木马。 滑动引擎不再使用 float + translateX 类级别的轮换处理或自定义滑动处理器——.carousel-inner 现在是一个原生水平滚动捕捉容器，因此滑动、触摸拖动、惯性以及键盘滚动都来自浏览器。标记保持不变（.carousel → .carousel-inner → .carousel-item）以及公共 JavaScript API（next, prev, to, cycle, pause) 加上 slide.bs.carousel / slid.bs.carousel 事件被保留。

  • 新功能： 一次显示多个幻灯片，显示相邻幻灯片的“预览”，间隙，居中模式，以及可变宽度幻灯片——所有这些都通过 CSS 自定义属性实现（--carousel-items, --carousel-items-gap, --carousel-items-peek) 和 .carousel-center / .carousel-auto 变体。
  • 已移除过渡课程 .carousel-item-start, .carousel-item-end, .carousel-item-next，和 .carousel-item-prev，加上 .carousel.pointer-event 助手——浏览器跟踪滚动位置而不是一个 .active 布局类。（活动幻灯片仍然获得 .active 用于样式。)
  • .carousel-fade 现在是一个叠加不透明度（网格）交叉淡入淡出，通过 CSS 不透明度过渡实现动画 --bs-carousel-fade-duration （在减少运动下，它会立即转换）
  • 已移除 touch 选项。 因为 .carousel-inner 是原生的 scroll-snap 容器，水平触摸拖动是浏览器原生滚动的一部分，不再由 JavaScript 切换。
  • 活动幻灯片同步使用一个 IntersectionObserver；因此 slid.bs.carousel 当新幻灯片进入视图时触发，以及多幻灯片 to() 跳跃可能会发出中间音 slid 随着它滚动而发生的事件。

• 已重命名旋转木马 ride 选项到 autoplay，并将其变为布尔值。 自动播放现在必须严格选择加入：只有在轮播图被选择加入时才会自动播放 autoplay 是 true (通过设置 data-bs-autoplay="true"). 旧的 ride 选项及其字符串 "carousel" 值已被删除，其也已被删除 ride="true" 只开始自动播放的行为 之后 第一次用户互动。

  • data-bs-ride="carousel" → data-bs-autoplay="true"
  • data-bs-ride="true" → data-bs-autoplay="true" （它现在在加载时自动播放，就像任何其他自动播放的旋转木马一样，而不是等待第一次互动）
  • JavaScript： new bootstrap.Carousel(el, { ride: 'carousel' }) → new bootstrap.Carousel(el, { autoplay: true })
  • 自动加载时的自动初始化选择器相应地从 [data-bs-ride="carousel"] 到 [data-bs-autoplay="true"].

• 当用户与其互动时，自动播放的轮播现在会停止。 点击控件或指示器、使用键盘导航或滑动会永久停止自动播放，而不是恢复自动播放，从而尊重访问者的意图(WCAG 2.2.2以前，这些互动保持了旋转木马的循环。

• 新 .carousel-control-play-pause 控制 提供一个可被发现且可访问的按钮，用于暂停和恢复自动播放的轮播——这是 WCAG 2.2.2 要求的机制（仅悬停暂停不符合要求）。它通过 CSS 遮罩呈现暂停/播放图标（--carousel-control-pause-icon / --carousel-control-play-icon），交换它的图标并 aria-label 具有状态，并且还可以在本应静态的轮播上启动自动播放。

• 堆叠现在是默认的轮播布局。 .carousel 是一个弹性列，因此前/下一步控制、指示器以及任何自定义内容都位于幻灯片的上方或下方。旧的 .carousel-stacked 类已被移除——它现在是默认的，因此可以从你的标记中删除它。

• 覆盖控件现在需要 .carousel-overlay 修改器。 要将前/后控制、播放/暂停按钮和指示器叠加在幻灯片上（经典的 v5 外观），请添加 .carousel-overlay 到 .carousel 元素。没有它，这些元素会按照流动布局。

• 已重命名 control-icon 类 .carousel-control-prev-icon → .carousel-icon-prev 和 .carousel-control-next-icon → .carousel-icon-next. 图标现在被绘制为 background-color: currentcolor，因此它们继承周围的文本颜色（覆盖控件上的白色，内部按钮的颜色 .btn-*）。用……来调整它们的大小 --bs-carousel-control-icon-width.

• 已移除 .carousel-caption 以及它的 --carousel-caption-* 令牌。在你的标记内部撰写幻灯片内容 .carousel-item 相反，使用工具类或自定义 CSS 来进行样式设置和定位。

• 已替换 wrap 带有选项 ends. v5's wrap: true | false 现在是 ends: "loop" | "wrap" | "stop" (默认 "loop"). 地图 wrap: true 到 ends: "wrap" （或新的默认值 "loop" 用于无缝传送效果) 和 wrap: false 到 ends: "stop". 通过设置它 data-bs-ends 或者那个 ends 选项。未知值回退到 "loop".

• 已移除 .carousel-control-prev / .carousel-control-next 按钮类。 绝对的、全高的悬停目标消失了。从一个按钮（例如）组合一个控件 .btn-icon) 加 data-bs-slide="prev" / data-bs-slide="next" 和一个 .carousel-icon-prev / .carousel-icon-next 字符，置于流程中或内部 .carousel-overlay-controls.

• 已移除 .carousel-dark 类 使用 data-bs-theme="dark" 在……上 .carousel （通常与…一起 .carousel-overlay) 用于反向对比。

• 已移除 v5 轮播代币 不再有相应的： --carousel-caption-*, --carousel-control-color, --carousel-control-opacity / --carousel-control-hover-opacity, --carousel-control-icon-filter，和 --carousel-transition. 指示器、控制和淡出样式现在来源于重新设计 --bs-carousel-* 列在下面的代币 CSS 变量.

重启

• 已重新定位的标题类（如 .h1) 和一些类型类 (.mark, .small，和 .initialism) 从 _type.scss这避免了 Sass 模块中的依赖，并且我们通常喜欢避免扩展选择器。
• 分开剩余部分 _type.scss 进入 _lists.scss 和 _blockquote.scss. 更新任何个人 @use "bootstrap/scss/content/type" 进口到 content/lists 和/或 content/blockquote 取而代之
• 标题、段落、描述列表，以及 <legend> 现在使用 CSS 变量而不是 Sass 变量。 已移除 $headings-margin-bottom, $headings-font-family, $headings-font-style, $headings-font-weight, $headings-line-height, $headings-color, $paragraph-margin-bottom, $legend-margin-bottom, $legend-font-size, $legend-font-weight，和 $dt-font-weight自定义等效项 --heading-*, --paragraph-margin-bottom，和 --legend-* 在运行时使用 CSS 变量——见 排版.
• 已移除 $font-size-base 和 --font-size-base. 基础正文字体大小现在通过直接设置 --body-font-size (默认 1rem) 在 _root.scss. 之前回退到的任何组件令牌 var(--font-size-base) (像折叠面板)现在退回到 var(--body-font-size) 相反。更新引用任一变量的自定义 Sass 或 CSS 以使用 --body-font-size.
• 标题和 <dt> 字体粗细现在回退到共享的权重标记（font-weight: var(--heading-font-weight, var(--font-weight-medium)), var(--dt-font-weight, var(--font-weight-bold))) 而不是硬编码的值，这样你可以覆盖组件特定的令牌或共享的令牌。
• 已添加 --link-underline-offset 到 $root-tokens （镜像 $link-underline-offset) 用于运行时自定义链接下划线偏移。
• 重新启动和内容间距—address，列表， dd, blockquote, pre, figure, caption, kbd 填充，以及 ol/ul padding-inline-start （现在由新的驱动 --list-padding-x token）——现在从中导出 --spacer-* 使用可伸缩而不是硬编码 rem 值。视觉输出保持不变。
• 已移除 ::-moz-focus-inner 样式，因为伪选择器在 Firefox 中已被弃用。
• 已移除 text-transform: none 从 button 和 select 元素，因为 Firefox 不再错误地继承 text-transform。
• 已添加 accent-color: var(--primary-base) 开 :root，它将主要主题颜色全局应用于原生表单控件（复选框、单选按钮、范围输入、进度条）。
• 立即重启设置 color-scheme: light dark 在每个 iframe. 当你强制使用主题时，这会保持嵌入透明 data-bs-theme. 删除任何类似 v5 的变通方法 [data-bs-theme="dark"] { color-scheme: unset; }. v6 使用其颜色标记进行解析 light-dark()，其内容为 color-scheme. 一个 unset 这会关闭整个子树的暗模式。对于没有暗模式的第三方嵌入，添加新的 .color-scheme-light 将工具类仅用于那个 iframe——见 重启.

表格

• 重构复选框、单选按钮和开关。

  • 分开 _form-check.scss 拆分成独立的样式表： _check.scss, _radio.scss，和 _switch.scss.
  • 还要将检查、单选按钮和开关的文档页面拆分开来。
  • 在每个这些组件上添加了新的 CSS 变量。 附注：我们本可以在这里共享变量，但为了简单起见选择没有这样做。
  • 删除了几个现在未使用的 Sass 变量。
  • 复选框和单选按钮适用 .check 或者 .radio 直接在上面 <input> 没有包装。他们的标记使用 CSS mask-image 在一个 ::before 伪元素。开关使用一个 .switch 输入的包装器。
  • 重新设计了带有标签（和描述）的复选框、单选按钮和开关的布局。我们现在有用于布局的自定义元素，其中包括基本的弹性盒子样式。
  • 重构了切换按钮以使用嵌套输入结构。 .btn-check 类现在放在标签上（而不是输入），输入则嵌套在里面。这消除了对……的需求 id/for 属性和使用 CSS :has() 选择器而不是兄弟选择器。示例： <label class="btn-check btn-solid theme-primary"><input type="checkbox">Toggle</label>.

• 巩固 .form-select 进入 .form-control.

  • 已移除 .form-select—使用 .form-control 开 <select> 现在的元素。同时存在过多的抽象和重复。
  • 添加新的 CSS 变量于 .form-control 便于在不进行 Sass 编译的情况下进行自定义。
  • .form-control 现在有一个 min-height 始终而不仅仅是 <textarea> 元素。这为我们减少了一些 CSS。
  • .form-control 将对焦环应用到 :focus-within 以及 :focus-visible，所以像这样的包装器 .form-adorn 当嵌套输入获得焦点时显示聚焦。

• Range 现在是一个 JavaScript 组件。 原生的 range 无法仅用 CSS 在所有浏览器中绘制填充轨道，所以 .form-range 由 JS 驱动。

  • .form-range 现在是一个 包装纸 元素；这个 <input type="range"> 采取 .form-range-input （以前 .form-range 直接作用于输入)。包装器拥有组件的令牌，因此输入和装饰继承了它们。每一个 .form-range 会自动初始化。
  • 默认绘制填充轨迹，外加可选的数值气泡（data-bs-bubble，它重复使用工具提示样式）以及从链接生成的刻度标记 <datalist>.
  • 填充量显示为 --bs-range-fill (0–1），由插件保持同步；填充颜色标记是 --range-track-fill-bg.
  • 验证类 (.is-invalid / .is-valid) 现在继续 .form-range-input.

• 添加了新的下拉框表单组件。 一个可搜索、可过滤的选择组件，具有单选和多选模式，构建在 Menu 组件之上。请参见 下拉框文档.

• 新 .form-field 布局组件。 替换 .checkgroup 和 .radiogroup 使用具有统一基于网格的布局原语的包装器，用于标签 + 控件 + 帮助文本 + 验证反馈。使用 .form-field, .form-field-content，和 .form-field-card 用于结构化表单布局，以及 .form-group 用于分组相关字段。参见 现场文档.

• 彻底改进了表单验证。

  • 客户端验证不再使用 .was-validated 或裸露 :valid / :invalid 伪类。相反，添加 data-bs-validate 你的 <form> 选择加入 :user-invalid 仅在用户交互后激活的样式。要同时显示成功样式，请使用 data-bs-validate="valid".
  • 服务器端验证与 .is-invalid / .is-valid 类保持不变并且在全局范围内有效 data-bs-validate.
  • 仅使用自定义验证状态（例如，“警告”） .is-* 类——不支持伪类。
  • 验证反馈工具提示现在需要两者 .tooltip 和 .valid-tooltip / .invalid-tooltip 课程（例如， <div class="tooltip invalid-tooltip">).
  • 已移除 $enable-validation-icons 以及表单控件上的所有内置验证背景图标。
  • 这 $form-validation-states Sass map被替换为 $validation-states，一个将州名与主题键对应的更简单的映射（例如， "invalid": "danger"). 样式使用来源于主题的 CSS 自定义属性（--danger-fg, --danger-border等）而不是每个州的 Sass 变量。
  • 这 form-validation-state mixin 签名已更改自 ($state, $color, $icon, ...) 到 ($state, $theme).
  • 已重命名 scss/mixins/_forms.scss 到 scss/mixins/_form-validation.scss现在 mixin 只包含选择器逻辑；完整的状态 mixin 位于 scss/forms/_validation.scss.
  • 已移除 scss/forms/_form-variables.scss （反馈变量和图标 SVG 数据 URI）。
  • 验证 JS：替换 document.querySelectorAll('.needs-validation') 与 document.querySelectorAll('form[data-bs-validate]') 并移除 form.classList.add('was-validated') 线。

• 简化输入组。

  • 已移除 .has-validation—border-radius 逻辑不再根据它分支。
  • 已添加 .input-group-ignore 对于应该被相邻的边框圆角规则跳过的元素。
  • 已移除 flex-wrap: wrap 从 .input-group; 验证反馈现在位于父级中的输入组外 .form-field.

• 更新了表单标签默认值。 .form-label 和 .col-form-label 现在默认设置为 font-weight: 500 (是 inherit) 和 font-size: inherit （是 var(--font-size-sm)).

• 已更新表单帮助文本。 .form-text 颜色已更改为 var(--fg-3) 到 var(--fg-2)。那 margin-top 从 --form-text-margin-top 已移除；间距由父元素处理 .form-field 网格间隙。

• 重新设计了开关内部结构。 开关拇指现在是绝对定位的，并且 inset-inline-start 使用过渡而不是基于填充的动画。新令牌： --switch-indicator-width, --switch-indicator-height覆盖旧填充基础切换行为的主题将需要更新。

• .form-adorn 包装应为 <label> 元素。 包装器看起来像一个输入框，所以人们会点击图标、文本或周围的填充区域，并期望字段获取焦点。A <label> 本地提供该行为。用标记标记装饰物 aria-hidden="true"，否则他们的文本会加入输入的可访问名称。

  HTML

            <!-- v6 -->
  <label class="form-control form-adorn">
    <span class="form-adorn-text" aria-hidden="true">$</span>
    <input type="text" class="form-ghost" placeholder="0.00">
  </label>
          

助手

• 比例辅助工具已移至工具类中。
• 已为.d-flow-root工具弃用clearfix辅助工具。

工具

• 扩展的间隔器刻度。 $spacers 地图已从 6 个步骤（0–5）扩展到 13 个步骤（0–12），粒度更细。请注意，间隔器键不再映射到与 v5 相同的值：

• 新的固定尺寸刻度。 一个新的 $sizes 映射（键 1–12）提供基于 rem 的固定宽度，并合并到宽度工具中。v5 在 $sizes 中没有等效的固定尺寸刻度——它只有基于百分比的值。

• 字体大小比例重新设计。 .fs-1 到 .fs-6（数字，递减大小）已被 .fs-xs 到 .fs-6xl 的 T 恤尺码键取代（10 个步骤，递增）。较大尺寸使用 clamp() 进行响应式缩放。新的 .text-{size} 工具可同时设置 font-size 和 line-height。

• 重命名为 .lh-base 行高工具 .lh-md. 匹配 md 步骤已被字体大小比例使用。底层 --line-height-base CSS 变量现在是 --line-height-md.

• 字体粗细合并为一个 $font-weights Sass map。 移除了该个人 $font-weight-lighter, $font-weight-light, $font-weight-normal, $font-weight-medium, $font-weight-semibold, $font-weight-bold，和 $font-weight-bolder 偏向单一的变量 $font-weights 映射（键： lighter, light, normal, medium, semibold, bold, bolder)—参见 字体粗细. --font-weight-* CSS 自定义属性是从此映射生成的，而不是硬编码的 $root-tokens. $font-weight-base 已消失。自定义 --body-font-weight，默认是 var(--font-weight-normal).

• 已移除 .display-1–.display-6 标题工具。 显示标题类不再存在，也没有单一类的替代。通过将大字体大小工具类与字体粗细工具类配对来重新创建它们。v5 的显示标题使用了 font-weight: 300，所以 .fw-light 再现原始外观；使用更粗的字体（.fw-semibold, .fw-bold) 如果你愿意：

• 已移除 .lead 效用。 v5 .lead v6 中不再存在 class，而且没有完全对应的单一 class 替代。如果你想用工具类实现类似效果，可以使用 .fs-lg 相关的 .fw-light.

• 边框半径标记已被数值刻度取代。 被命名的 $border-radius-* Sass 变量和 --border-radius-* CSS 自定义属性（-xs, -sm, 默认, -lg, -xl, -2xl) 已被数字所取代 $radii Sass map（键控的 0–9) 生成 --radius-0 通过 --radius-9 代币，加上 --radius-pill. 该秤由单个驱动 $radius: .5rem 基础，因此当基础更改时，所有步骤都会一起移动。要迁移任何直接引用旧令牌的自定义 Sass 或 CSS：

• 边框半径工具已扩展并重新映射。 .rounded-* 现在从 $radii 映射生成，因此刻度范围为 .rounded-0 到 .rounded-9（以前为 .rounded-0 到 .rounded-5）。默认 .rounded 仍然解析为 0.5rem，但编号类现在映射到的值与 v5 不同：

为了保持 v5 的视觉圆润感，将类别编号向上调整（例如 .rounded-1 → .rounded-3, .rounded-2 → .rounded-4, .rounded-3 → .rounded-5, .rounded-4 → .rounded-9)。那 .rounded-{top,end,bottom,start}-* 方向变体遵循相同的刻度。v6 没有对应的 2rem v5 的值 .rounded-5.

• 字体粗细添加。 已添加 .fw-medium (500) 和 .fw-semibold (600) 工具类。v5 只包含 lighter, light (300), normal (400), bold (700)，和 bolder.
• 限制负边距。 负间隔仅减少到 -1 (-0.25rem) 和 -2 (-0.5rem），并且仅适用于 margin-inline-start (.ms--1, .ms--2) 和 margin-inline-end (.me--1, .me--2）。v5 版本中所有边的完整负边距工具类已被移除。
• 间距和边框工具现在使用 CSS 逻辑属性。 margin-top → margin-block-start, margin-right → margin-inline-end, padding-left → padding-inline-start, border-right → border-inline-end等等。类名（.mt-*, .me-*, .ps-*, .border-end) 保持不变，但底层的 CSS 属性现在是逻辑化的，提高了对从右到左（RTL）和书写模式的支持。
• 文本换行添加。 已添加 .text-balance 和 .text-pretty 将值应用于文本换行工具。
• 颜色工具重命名。 .text-* 色彩工具已被替换为 .fg-* (前景) 工具。新 .fg-emphasis-* 和 .fg-contrast-* 变体。背景工具类现在包括 .bg-subtle-* 和 .bg-muted-* 除了 .bg-*. 已添加 .fg-bg 和 .bg-fg 交叉引用工具；已删除 .fg-inherit 和 .bg-inherit. 已重命名 .bg-opacity-{n} 到 .bg-{n} 针对 10–100 不透明度刻度。已重命名 .text-reset 到 .fg-reset.
• 已移除 .text-bg-* 助手。 v5 .text-bg-{color} 辅助工具（一个固定主题的背景加上自动对比的前景）已被移除。请在同一元素上使用背景工具和匹配的对比前景来组合相同的效果。例如， .text-bg-primary 变成 class="bg-primary fg-contrast-primary". 这适用于每一种主题颜色（primary, secondary, success, danger, warning, info, accent, inverse）。对于前者 .text-bg-light / .text-bg-dark, 配对一个中性表面（见下文—.bg-1 或固定 .bg-white / .bg-black) 与适当的 .fg-*.
• 已移除 .bg-light, .bg-dark，和 .bg-body-* 表面。 颜色模式感知 .bg-body-secondary / .bg-body-tertiary 表面映射到 v6 的中性背景比例 .bg-2–.bg-1 （每一步比页面主体对比度略高一点）。旧的 .bg-light / .bg-dark 灰色的是 固定的——他们没有遵循颜色模式——而 v6 没有完全相同渲染的替代类，所以按意图选择：使用自适应 .bg-1 / .bg-2 如果你希望表面随光和暗变化，或者固定表面 .bg-white / .bg-black 或者通过限定颜色模式(data-bs-theme="light|dark") 和使用 .bg-body。注意 .bg-black 是纯黑色（比v5的深灰色更深）并且带有瞄准镜 data-bs-theme 渲染主题主体颜色，因此都没有再现v5的确切色调。

• 链接工具现在是文本装饰工具的一部分。 v5 link-* 工具系列已被 underline-* 工具取代，这些工具在 文本装饰 下有文档说明。请相应更新类名：

在 v6 中不再需要辅助工具 .link-underline。

• 显示工具： 添加 flow-root 和 contents 选项。
• 尺寸工具：
  • 已重命名 .mh-*/.mw-* 到 .max-h-*/.max-w-*
  • 已添加 .min-h-* 和 .min-w-* 具有两个默认值的工具类， 0 和 100%
  • 已添加 auto, min-content, max-content，和 fit-content 到 width 和 height 工具类
• 新的动态视口工具。 .dvh-100 和 .min-dvh-100 设置 height: 100dvh 和 min-height: 100dvh. .dvw-100 和 .min-dvw-100 设置 width: 100dvw 和 min-width: 100dvw. 浏览器会更新一个 dv* 当它扩展或收缩浏览器界面时的单元。使用 .dvh-100 对于全屏移动布局，因为当移动浏览器显示其 URL 栏时，该部分不再溢出。请注意 dvw 未修复 100vw 滚动条溢出，因为 CSS 将每个视口宽度单位的大小都当作滚动条不存在一样计算。v5 .vh-100, .min-vh-100, .vw-100，和 .min-vw-100 公用设施保持不变。添加 svh, lvh, svw，和 lvw 自己熟悉 utilities API — 见 高度 和 宽度.
• 新 color-scheme 工具类 .color-scheme-light, .color-scheme-dark，和 .color-scheme-auto 设置 color-scheme 在一个元素上的属性。当一个元素需要不同于页面其他部分的方案时使用它们，例如第三方 <iframe> 那个没有暗黑模式 — 看 配色方案. 重启设置 color-scheme 在页面上和每一页上 iframe 对于你来说，所以你只需要这些工具用于单个元素——参见上面的重启部分。
• Flex 和 Grid 工具：
  • 已添加 .place-items 和 .justify-items 工具类
  • 已添加 .grid-cols-* 公用设施 grid-template-columns （1–4 列和 6 列布局） .grid-cols-fill 用于跨越所有列， .grid-cols-subgrid 用于采用父网格的列轨道，以及 .grid-auto-flow 效用。
• 容器查询工具。 新 .contains-inline 和 .contains-size 公用设施 container-type.
• 比例助手现在由工具类 API 提供支持，并使用简化的数值 calc().
• 状态变体现在使用前缀语法。 类似悬停和聚焦变体的伪状态工具类类现在使用一个 state:class 前缀模式（例如， hover:opacity-50 而不是 opacity-50-hover），匹配响应前缀约定。
• 工具类 API 清理。 已移除 css-var, css-variable-name，和 local-vars 来自工具类 API 的选项。使用 property 用于 CSS 自定义属性的映射方法和 variables 用于工具类中的静态 CSS 自定义属性。
• 阴影现在可以分层并支持主题化。 .shadow, .shadow-sm，和 .shadow-lg 是多站的 box-shadow 用于更自然的衰减的声明，以及新的 .shadow-xs 和 .shadow-xl 尺寸。新 .shadow-{color} 工具类（任何主题颜色，加上 .shadow-current, .shadow-black, .shadow-white) 和 .shadow-opacity-{10-100} 工具类重新调整阴影的色调和比例。两者都设置本地的、不继承的 CSS 变量（--bs-sc, --bs-so)——反映了……的方式 .border-{color} 工具类范围 --bs-bc——所以阴影颜色或不透明度的覆盖永远不会泄漏到嵌套中 .shadow-* 元素。全球 --bs-shadow-color 和 --bs-shadow-strength （在深色模式下自动加深）驱动默认的无色外观。参见 Shadows 文档 详情请参阅。
• 新 .border-keyline 效用。 添加了一个 .5px keyline 选项到 $border-widths （由一个新的支持） --border-width-keyline 用于高密度显示屏的发丝边框的自定义属性。

新组件和插件

• 对话 — 替换了 Modal，基于原生构建 <dialog> 元素。有关完整的迁移，请参见上面的组件部分。
• 步进电机 — 新 .stepper 用于多步骤工作流的组件，与 .stepper-item 和 .stepper-horizontal 变体。仅 CSS。
• 阿凡达 — 新 .avatar 带有尺寸的组件(.avatar-xs 通过 .avatar-xl）、状态指示器（.avatar-status .status-online|offline|busy|away），微妙的变体，和 .avatar-stack 用于分组头像。
• 芯片和芯片输入 — 新 .chip 用于标签/标记的组件和 .chip-input[data-bs-chips] 用于交互式芯片输入。 Chips 带事件的 JavaScript 插件： add.bs.chips, remove.bs.chips, change.bs.chips, select.bs.chips.
• 一次性密码输入 — 新 .otp 一次性密码字段的组件。基于单一 <input> 呈现为独立的数字栏位以实现完全可访问性。 OtpInput 带事件的 JavaScript 插件： input.bs.otpInput, complete.bs.otpInput （两者都暴露 event.value).
• 密码强度 — Strength 用于密码强度测量的 JavaScript 插件 strengthChange.bs.strength 事件。
• 范围 — Range 将...转换的 JavaScript 插件 .form-range 变成一个带有填充轨道、可选数值气泡的样式化滑块，并且 <datalist> 刻度标记，带有一个 changed.bs.range 事件。
• 切换器 — Toggler 用于通过 JavaScript 切换元素上的类或属性的插件 data-bs-toggle="toggler"，与 toggle.bs.toggler 和 toggled.bs.toggler 事件。
• 日期选择器 — Datepicker 基于 Vanilla Calendar Pro 构建的 JavaScript 插件。弹出日期选择器在选择后、外部交互时关闭 Escape，或者当焦点移出时。事件： change.bs.datepicker, show.bs.datepicker, shown.bs.datepicker, hide.bs.datepicker, hidden.bs.datepicker.
• 形式装饰 — 新 .form-adorn 用于向表单输入添加图标或文字装饰的组件。
• 散文 — 新 .prose 用于丰富排版作用域的类和 .not-prose 在散文容器中选择退出散文样式。
• 导航溢出 — 包裹一个 .nav 在 <div class="nav-overflow" data-bs-toggle="nav-overflow"> 将溢出的项目折叠到菜单中。该插件会测量并观察包装器，并触发 update.bs.navoverflow 和 overflow.bs.navoverflow 那里。看见那个 导航溢出文档.
• 子菜单 — 通过嵌套菜单支持 .submenu 在菜单中的类，带有 submenuTrigger (hover, click，或者 both) 和 submenuDelay 选项。

文档

• 已移除所有 AddedIn 徽章。
• 重新整理了工具文档，将包含工具组的大页面拆分开。尺寸、间距、弹性布局、字体等已被拆分到带有新子组标题的较小页面中，并显示在侧边栏。