大家好，我是 xy。
沉寂多年的 Bootstrap，这次终于放大招了！
就在前几天，官方正式发布了 Bootstrap 6 Alpha 1，迎来一次从底层到组件、从 CSS 到 JavaScript 的全面重构。
更有意思的是，这次连 AI 都安排上了。
官方直接加入 skills/ 和 llms.txt，让 AI 编程工具也能根据最新文档使用 Bootstrap。
从 2011 年发布至今，Bootstrap 官方称累计安装量已经超过 17.5 亿次。如今，这个老牌前端框架开始全面拥抱现代 CSS 和 AI 编程。
01. 浏览器支持，直接拉满！
Bootstrap 6 首先做了一件非常大胆的事：大幅提高浏览器最低版本要求。
Chrome / Edge：130+ Firefox：132+ Safari：18+
相比 Bootstrap 5，这次跨度非常大，过去为了兼容老浏览器而保留的各种处理逻辑，终于可以甩掉了。
Bootstrap 6 直接使用 light-dark()、:has()、oklch()、color-mix() 和 Container Queries 等现代浏览器能力。
不再为低于新版浏览器基线的环境提供兼容方案。
不过 Bootstrap 5 仍然继续维护，老项目暂时不用担心。
02. Sass 彻底重写，主题定制更自由
这次最核心的更新之一，就是 Sass 架构全面重构。
过去想深度定制 Bootstrap，往往需要修改 Sass 变量，再重新编译。
Bootstrap 6 则全面转向：
Sass Modules + CSS Variables + Token Maps
@import 不再支持定制，改用 @use 和 @forward。
例如：
@use "bootstrap/scss/bootstrap" with (
$root-tokens: (
--spacer: 1.5rem,
),
$alert-tokens: (
--alert-padding-x: 2rem,
),
);
大量视觉配置转向 CSS 变量，支持运行时动态修改。
比如修改全局圆角变量，引用对应 Token 的按钮、卡片等组件就能跟着变化。
对于后台系统、主题切换、多品牌 UI 定制来说，这个升级非常实用。
03. 类名大改！开始向 Tailwind 靠拢
这一点非常直观，也最容易引起讨论。
Bootstrap 6 直接修改了响应式类名规则。
来看看新旧写法：
/* Bootstrap 5 */
.d-md-none
.col-lg-6
.justify-content-md-end
/* Bootstrap 6 */
.md:d-none
.lg:col-6
.md:justify-content-end
是不是非常眼熟？
没错，这套写法直接参考了 Tailwind CSS！
而且 Bootstrap 作者 Mark Otto 也公开承认了这一点。
状态修饰符也统一了，例如：
.opacity-50-hover → .hover:opacity-50
新项目写起来可能更顺手，但老项目升级也意味着需要修改不少类名。
04. 现代 CSS 特性全面爆发
除了 Sass，Bootstrap 6 还引入了一大批现代 CSS 能力。
几个比较有代表性的：
CSS Layers：管理样式优先级。oklch()+color-mix()：更灵活的颜色系统。light-dark()：原生明暗主题支持。Container Queries：容器级响应式布局。<dialog>：原生 Dialog 组件。<details>：无需 JS 的 Accordion。:where()：降低复杂选择器的优先级。
尤其是 Accordion，现在结合原生 HTML 和 CSS 动画，就能实现纯 CSS 展开收起。
以前还要靠 JS 计算高度，现在浏览器原生能力就能搞定。
少一点历史兼容，多一点原生能力。
05. JavaScript 和工具链全面升级
这次工程化也迎来了一轮大换血：
TypeScript：源码改为 .ts，自带类型声明。ESM-only：移除 UMD 和 window.bootstrap。Rolldown：替代 Rollup 和 Babel。 Vitest + Playwright：替代 Karma。 Astro 7：重构官方文档站。
对于使用 Vite 等现代构建工具的项目，ESM 导入方式依然正常。
但如果老项目依赖 require() 或 window.bootstrap，升级时就需要调整了。
06. 更炸的是，Bootstrap 6 开始拥抱 AI Agent！
这部分我觉得非常值得关注。
Bootstrap 6 不仅重构了代码，连 AI 编程的使用方式都考虑进去了。
官方直接新增三个重要内容：
llms.txt：大模型使用的文档索引。llms-full.txt：完整文档集合。skills/：AI Agent 专用操作指南。
其中最有意思的是 Skills。
官方已经为版本迁移、构建工具集成、组件开发等场景编写了对应指南。
以后使用 Codex、Claude Code 时，可以直接让 Agent 参考这些 Skill，减少生成过时 API 和错误代码。
未来的前端组件库，不仅需要给开发者写文档，还得教 AI 怎么用。
Bootstrap 6 已经开始这么干了。
07. 如何快速体验 Bootstrap 6？
目前已经可以通过 npm 安装：
npm install [email protected]
或者使用 CDN：
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
></script>
注意，Bootstrap 6 的 JavaScript 已全面转向 ESM，脚本需要加 type="module"。
目前仍处于 Alpha 测试阶段，生产项目建议等稳定版。
写在最后
这次 Bootstrap 6 的升级，确实有点猛。
从 Sass 模块化、CSS Token、原生浏览器 API，到 TypeScript、Rolldown，再到 AI Agent Skills，几乎把整套技术体系重新升级了一遍。
尤其是 类名向 Tailwind 靠拢，以及原生支持 AI Agent，这两点非常有看头。
曾经那个熟悉的 Bootstrap，似乎真的要重新杀回来了。
大家觉得，Bootstrap 6 还有机会重回前端主流吗？
项目地址：
官网： https://getbootstrap.comGitHub： https://github.com/twbs/bootstrap官方公告： https://blog.getbootstrap.com/2026/10/08/bootstrap-6-alpha/