Bootstrap 6 与 5.3 的区别：新组件、工具类拆分与迁移取舍
把两版目录逐页比对后的结论：6.0 新增 Dialog、Stepper、Avatar、Chips、OTP、Datepicker 等组件，工具类被拆细并新增容器查询与主题 token。附「该不该现在迁」的判断。
一句话结论
6.0 不是 5.3 的小版本升级：新组件补齐了交互层，工具类从「大而全」拆成按属性命名的细类，主题色改成 token 组合。现有 5.3 项目没必要为了追新而迁移，新项目可以直接用 6.0。
新组件
| 组件 | 说明 |
|---|---|
| Dialog 对话框 | 基于原生 <dialog>，取代 Modal 的大部分用法 |
| Drawer 抽屉 | 侧边滑出的面板 |
| Menu 菜单 | 独立的菜单组件，取代 Dropdown 的部分场景 |
| Stepper 步骤条 | .stepper + .stepper-item |
| Avatar 头像 | .avatar 尺寸从 xs 到 xl，带在线状态与头像堆叠 |
| Chips 标签片 | .chip，输入式用 .chip-input[data-bs-chips] |
| OTP 验证码输入 | .otp，按位自动跳格 |
| 密码强度 | Strength，触发 strengthChange.bs.strength 事件 |
| Datepicker 日期选择器 | 基于 Vanilla Calendar Pro |
| Combobox 组合框 | 输入 + 下拉筛选合一 |
| Toggler 切换器 | 通过 data-bs-toggle="toggler" 切换元素状态 |
| Nav overflow | 导航项过多时自动收纳进「更多」 |
工具类的拆分
5.3 里字号和字重挤在 .fs-*、.fw-* 一类工具类里，6.0 按 CSS 属性拆成独立页面：font-size、font-weight、line-height、font-family，另外新增 gap、space、divide、motion（动效）、color-scheme、container-queries。
主题色不再是「一个类一个颜色」，而是 token 组合：
<!-- 5.3 -->
<div class="bg-primary text-white border border-primary">...</div>
<!-- 6.0 -->
<div class="theme-primary theme-bg theme-contrast theme-border">...</div>
好处是深色模式、悬浮态、焦点环自动跟着走；代价是老代码里成套写死颜色的地方要重写。
Sass 侧的变化
- 负边距工具类改为始终生成，
$enable-negative-margins已移除，改由$negative-spacers映射控制取值 add()、subtract()、create-css-vars()被移除breakpoint-infix()更名为breakpoint-prefix()，返回的是前缀（md:）而不是中缀（-md）- CSS 变量前缀改由 PostCSS 处理，
$prefix变量移除
如果项目里有自定义 Sass 覆盖这些函数或变量，迁移前先搜一遍。
该不该现在迁
- 新项目：直接用 6.0，但要注意它仍是 Alpha，小版本之间可能还有破坏性调整，锁版本号。
- 维护中的 5.3 项目：留在 5.3。6.0 的组件 API 还没稳定，迁移成本主要在自定义 Sass 和工具类改写上，收益只是新组件。
- 想尝鲜某个新组件（比如 Datepicker）：单独引 6.0 的 JS/CSS 和 5.3 混用风险高，不建议。
判断清单
- 项目里有没有直接覆盖
$theme-colors之外的 Sass 内部函数？有 → 迁移成本高。 - 有没有大量手写
bg-*+text-*的成套配色？有 → 需要改成 token 组合。 - 是否依赖 Modal 的
.modal-dialog-centered、.modal-*这类结构类？是 → 要整体换成 Dialog。 - 目标浏览器是否需要支持较老版本？6.0 的基线更高，先查兼容范围。
四个问题里命中两个以上，就先别迁。
对应文档页