Bootstrap 6 Alpha 版
内容提要
Bootstrap 6 发布首个 Alpha 版，带来重大更新：采用 Sass 模块系统与仅 ESM 的 JavaScript 插件，支持 light-dark()、:has()、容器查询等新 CSS 特性，要求 Chrome/Edge 130、Firefox 132、Safari 18 以上。视觉定制改用 CSS 变量令牌映射，响应式类改为前缀写法（如 .md:d-none）。新增原生 dialog 组件、纯 CSS 手风琴动画，并提供面向 AI 代理的文档与技能文件。
延伸解读
浏览器支持门槛大幅提高
Bootstrap 6 要求 Chrome/Edge 130、Firefox 132、Safari 18 以上，相比 v5 的 Chrome/Firefox 60 和 Safari 12 提升明显。这是因为 v6 直接使用了 light-dark()、:has()、容器查询、oklch()、color-mix() 和原生 <dialog> 等新特性，且不提供降级方案、前缀或 polyfill。如果你的项目需要兼容旧浏览器，官方建议继续使用 Bootstrap 5，v5.4.0 也即将发布。
定制方式转向 CSS 变量令牌
v6 将几乎所有 v5 的 Sass 变量迁移为 CSS 变量，并组织在令牌映射（token maps）中。视觉定制现在通过 CSS 变量完成，可以在编译前或运行时修改，下游组件会实时更新。Sass 仅用于程序化定制，如生成组件变体、工具类等。全局 Sass 选项仅保留在 _config.scss、_colors.scss 和 _theme.scss 中。这种设计让定制更灵活，也减少了对 Sass 编译的依赖。
响应式类改为前缀写法
v6 将响应式工具类和组件变体的中缀改为前缀，例如 .d-md-none 变为 .md:d-none，.col-lg-6 变为 .lg:col-6，.opacity-50-hover 变为 .hover:opacity-50。这一改动覆盖所有工具类、组件、网格布局及状态修饰符，与 Tailwind 的写法类似。如果你有基于断点助手的自定义 Sass，breakpoint-infix() 已更名为 breakpoint-prefix()，相关 mixin 也改用 $prefix 变量。
JavaScript 插件仅支持 ESM
v6 的 JavaScript 插件只提供 ESM 格式，不再有 UMD 包和 window.bootstrap 全局变量。使用 data 属性的项目只需在 script 标签添加 type="module"；通过 CDN 调用 API 需改为显式导入；使用 Vite、Webpack 等打包工具的项目，现有导入方式继续有效，且能更好地 tree shaking。CommonJS 的 require() 必须迁移到 ESM 导入。TypeScript 源码已内置类型声明，可以移除 @types/bootstrap 依
Q&A
Bootstrap 6 Alpha 版对浏览器支持有什么要求？
Bootstrap 6 要求 Chrome 和 Edge 130+、Firefox 132+、Safari 18+。这是因为使用了 light-dark()、:has()、容器查询、oklch()、color-mix()、原生 <dialog> 等新特性，因此不提供降级方案、前缀或 polyfill。
Bootstrap 6 的 Sass 模块系统有哪些主要变化？
Bootstrap 6 使用 @use/@forward 模块系统，定制通过 token maps 进行。几乎所有 v5 的 Sass 变量都变成了 token map 中的 CSS 变量，可以在运行时自定义。全局 Sass 选项减少，仅保留在 _config.scss、_colors.scss 和 _theme.scss 中。
Bootstrap 6 中响应式类的前缀写法有什么变化？
响应式工具类和组件变体从 infix 改为 prefix，例如 .d-md-none 变为 .md:d-none，.col-lg-6 变为 .lg:col-6，.opacity-50-hover 变为 .hover:opacity-50。这适用于所有工具类、组件、网格布局和状态修饰符。
Bootstrap 6 的 JavaScript 插件有什么重大改变？
JavaScript 插件仅支持 ESM，不再提供 UMD 包和 window.bootstrap 全局变量。如果使用 data 属性，只需在 script 标签添加 type="module"；如果通过 CDN 调用 API，需显式导入；使用 CommonJS require() 的项目必须迁移到 ESM 导入。
Bootstrap 6 新增了哪些组件或功能？
新增了原生 <dialog> 元素实现的 Dialog 组件，以及使用原生 <details> 和 <summary> 的纯 CSS 手风琴动画，无需 JavaScript。还引入了 CSS 层、oklch() 颜色、light-dark()、容器查询等现代 CSS 特性。
Bootstrap 6 为 AI 代理提供了哪些支持？
Bootstrap 6 提供了 LLM 友好的文档和技能文件。llms.txt 是文档页面的索引，llms-full.txt 是所有文档的合集。skills/ 目录包含针对特定任务的技能文件，如迁移到 v6、使用构建工具等，帮助 AI 代理遵循维护者的指导。
