用途:指导把使用 Bootstrap 5 的项目升级到 Bootstrap 6,适合需要迁移 v5 类名、组件、Sass 或脚本的场景。
主要能力与步骤:按固定顺序推进——先更新依赖与构建,再重命名 CSS 类与 data 属性,随后重构组件 HTML、更新 JavaScript,最后更新 Sass 并验证。每步完成后应在代码库中搜索残留的 v5 写法。
依赖与构建:package.json 中升级 bootstrap 至 6.0.0-alpha.1;用 @floating-ui/dom 替换 @popperjs/core;若使用 Datepicker 需加入 peer 依赖 vanilla-calendar-pro;Sass 中把所有 @import 改为 @use(不再支持 Node Sass)。自定义应改为覆盖 CSS token 映射(如 $root-tokens 及各组件 $*-tokens),而非旧 Sass 标量;源码属性名不带前缀,发行版 CSS 由 PostCSS 添加 --bs- 前缀。
类名与属性变更:响应式与状态前缀改为冒号前置(如 .d-md-none 变为 .md:d-none),xxl 改名 2xl;Modal 改名 Dialog、Offcanvas 改名 Drawer、Dropdown 改名 Menu,涉及类名、data 属性、JS 导出、事件与 CSS 变量;按钮与徽章改用 .btn-solid/.btn-outline 等配合 .theme-* 组合;文字颜色类改为 .fg-*;字号由数字改为 xs 到 6xl 的尺码;间距键值 2-5 变更,负外边距仅保留有限的 ms--/me-- 写法。
结构性改写:Dialog 移除 .modal-dialog 与 .modal-content 包裹,改用原生 dialog;Drawer 也使用 dialog 元素;Accordion 改用 details/summary 与 name 分组;Menu 移除 .dropdown 包裹与 .dropdown-toggle;复选框/单选/开关、切换按钮、range、面包屑、卡片等均有新标记。
JavaScript:发行文件均为 ESM,需加 type="module",不再有 window.bootstrap 全局;改用显式 import。popperConfig 改名 floatingConfig;show/hide/toggle/close 现返回 Promise。
限制:本文档未提供完整的验证流程细节、兼容性范围与时间线;具体项目需自行测试。部分主题类(如 theme-light/theme-dark)不存在,需手动处理浅色与深色变体。