×

惊了！Bootstrap 6 Alpha 发布了，历史最强更新来了

独孤求败 独孤求败 发表于2026-10-20 08:48:39 浏览18 评论0

抢沙发发表评论

前言

10 月 8 日，Bootstrap 6 Alpha 1 发布了。这一代从底层重写，全面进化到了超现代浏览器时代，最关键的是：它从一开始就把"AI 也能用"当作正式目标，仓库里放进了给 agent 用的 skill 文件和 llms.txt！

正文

一、浏览器基线：直接拉满

Bootstrap 6 的现代浏览器支持要求如下：

  • • Chrome / Edge：130+
  • • Firefox：132+
  • • Safari：18+

作为对比，v5 还支持到 Chrome/Firefox 60 和 Safari 12。这次的"地板"抬得这么猛，是因为 v6 用上了一大批几年前的浏览器还拿不出来的能力：light-dark()、:has()、Container Queries、oklch()、color-mix()、原生 <dialog>……所以 v6 不再为这些"老旧"基线提供 fallback、prefix 或 polyfill。

像 CSS Anchor Positioning、完整的 pretty text 支持、跨浏览器的 contrast-color 这些能力，v6 也还没拿到手，但作者表示 v7 不会像过去几个大版本那样拖那么久。

需要注意，Bootstrap 5 仍然可用，5.4.0 会在 v6 稳定前发布，之后才会公布 v5 的 EOL 日期。

二、核心重头戏：CSS-first 的 Sass 模块化

这是 v6 改动最重的一环——也是普通开发者"切身体感"最强的一环。

1. @use / @forward 全面替代 @import
所有源码都按现代 Sass 模块系统重写，@import 不再受支持（也不允许用来做定制了）。

2. Token Map：Sass 时代的"配置中心"
v5 里那些 Sass 变量几乎全部升级为 token map 中的 CSS 变量。所谓的 token map 本质上就是装着 CSS 自定义属性的 Sass map，全局配置塞在 :root 里，每个组件有自己命名的 token map。

举个例子，alert 组件的 token 定义长这样：

$alert-tokens: () !default;

$alert-tokens: defaults(
  (
    --alert-padding-x: var(--spacer),
    --alert-border-radius: var(--radius-5),
    --alert-bg: var(--theme-bg-subtle, var(--bg-1)),
    // ...
  ),
  $alert-tokens
);

defaults() 这个工具函数保证"只往 map 里塞你新加/覆盖的部分"，合并而不是替换——你不再需要为改一个值重新声明整张 map。

3. 全局级 token 也是同样的套路
在 :root 那一层，Sass 函数循环吐出 token map 里几乎所有的 root 自定义属性。改一处，全局跟着走。

4. 定制方式：和以前完全不同
v5 时代你写 @import "bootstrap/scss/variables"; 然后改 $primary 之类的变量。v6 改成了：

@use "../node_modules/bootstrap/scss/bootstrap" with (
  $enable-smooth-scroll: true,
  $radius: .25rem,
  $root-tokens: (
    --spacer: 1.5rem,
    --focus-ring-width: 3px,
  ),
  $alert-tokens: (
    --alert-padding-x: calc(var(--spacer) * 2),
    --alert-border-radius: var(--radius-8),
  ),
);

视觉效果与 Sass 变量解耦后，"运行时改 CSS 变量" 第一次变成了可行的事——你在浏览器里调一个 token，下游所有组件实时跟着变。这件事在 v5 的混合体系下是做不到的。

5. 改一个值，整套系统跟着变
比如 $radius: .25rem 改一下，整个 radius 阶（10 步）一起跟着挪，所有引用它们的组件自动适配。$spacer 同理。

6. 移除 prefix 变量
v5 里 $prefix 是塞进每个声明里的 Sass 变量，v6 直接在源码里写不带前缀的自定义属性，build 时由 PostCSS 加前缀。所以 $prefix 没了，配置 prefix 的地方挪到了 PostCSS。

三、类名风格大改：Infix → Prefix

这一改是"看得见、摸得着" 最直接的一次，作者自己也调侃这是"明显借鉴 Tailwind 的做法"。

  • • .d-md-none → .md:d-none
  • • .col-lg-6 → .lg:col-6
  • • .opacity-50-hover → .hover:opacity-50
  • • .justify-content-md-end → .md:justify-content-end
  • • .offcanvas-md → .md:drawer（顺便改了个名）

这套规则适用于所有 utility、组件、grid 布局。state 修饰符（:hover、:focus）也是同一种 ergonomics。

如果你的自定义 Sass 用了 v5 的 breakpoint 工具函数，名字也变了：breakpoint-infix() 改成 breakpoint-prefix()，返回 prefix 字符串；loop-breakpoints-up 和 loop-breakpoints-down mixin 暴露的不再是 $infix 而是 $prefix。

五、用现代浏览器特性重写

这一节是 v6 真正"现代"的地方。HTML/CSS 这边亮点有：

  • • CSS Layer：整框架的特异性可预测，utility 处于最高层。
  • • oklch() + color-mix()：感知均匀的、随主题自适应的色板，base 颜色一动全部跟着动。
  • • light-dark()：原生 color mode 支持，相同属性值对里直接处理暗色，不再为暗色重复声明。
  • • Range Media Query：(width >= 768px) 替代 min-width/max-width 的老式 hack。
  • • Container Query：根据父元素而不是视口做响应式，包含 mixins、helpers、每个组件的适配。
  • • 原生 <details> 支撑 Accordion：完全不需要 JavaScript。
  • • 原生 <dialog> 撑起新 Dialog 组件。
  • • :where() 选择器：复杂选择器的特异性降低。
  • • content-visibility + allow-discrete transitions + interpolate-size + ::details-content 伪元素：accordion 展开收起的纯 CSS 动画，从此告别 JS 量高度的邪门做法。
  • • @property：把 utility API 合成的自定义属性注册为 non-inheriting，避免值漏到子元素里。

JS / 工具链这边则是另一番"硬核" 操作：

  • • TypeScript 升级：源码改 .ts，自己带类型声明，@types/bootstrap 可以从依赖里删了。bootstrap/js/src/alert.js 这种 deep import 仍然能解析。
  • • Rolldown 取代 Rollup + Babel：自己剥类型、自己降级语法，省掉了一层构建工具。
  • • Vitest + 真实 Chromium（Playwright）取代 Karma：测试更接近真实环境。
  • • Astro 7 重构文档站：自带 Pagefind 搜索、新页面、新导航与新布局。

五、为人类和 Agent 同时设计

这部分几乎可以单独拎出来当成"AI 时代设计系统怎么做" 的样板。

v6 提供：

  • • llms.txt：每篇文档页的精选索引，附描述。
  • • llms-full.txt：把全部文档拼成单文件。
  • • skills/ 目录：仓库里直接放 playbooks，覆盖迁移到 v6、配合不同 build 工具使用、编写组件等场景。

作者的原话是：

让你的 agent 指向对应 skill 文件，它会遵循我们维护者给的正确指引，而不是依赖可能过时或错误的训练数据。

这是 v6 在 "AI 也能用" 这件事上最实质的投入——它不只是"文档做得让 AI 容易爬"，而是把"如何正确使用我们" 当成软件的一部分交付出来。

六、顺手的副产物：博客与 Icons 站升级

  • • 博客站：新首页、Pagefind 搜索、新的分类页、新的文章版式（你现在读的这篇就用了新模板）。
  • • Icons 站：首页直接以图标网格为视觉中心，加了 Pagefind 搜索（支持 ?tag= 查询），侧边栏分类导航与分类页都重做了，图标详情页也翻新。

支撑这一切的还有一个新私有包 @twbs/bui——专门用来在主站、Icons 站、博客站之间共享文档组件，让维护者不用为了一致性全盘切到 monorepo。

七、写在最后

这还是一个 alpha，意味着 beta 之前很多东西还可能变。会有更多 alpha 版本发布，然后才是 beta、RC。作者明确请求反馈：

  • • v6 总体反馈：到 GitHub Discussions 的 v6 feedback 分类
  • • 具体的 bug 或 feature request：开 GitHub Issues
  • • 直接贡献代码：发 pull request（建议先在 issue 或 discussion 里同步一下，避免双方白做工）

如果你正打算升级或者开新项目，不妨从 alpha 1 装起：

npm i bootstrap@6.0.0-alpha.1

或者直接走 CDN（注意 script 标签要加 type="module"）：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js"></script>

详细的安装与快速上手可以看 Install] 与 Quickstart，从 v5 迁过来的同学先读 migration guide。

最后

Bootstrap 6 看起来是"经典 UI 库的又一次更新"，骨子里其实是一次非常完整的"现代化手术"——Sass 模块化、CSS 变量运行时可控、容器查询、light-dark()、原生 <dialog>/<details>、ESM-only、TypeScript 化、给 agent 的 skill 文件……这些单独拿出来每一件都是行业当下最被反复讨论的"现代化清单"。

今天的分享就这些了，感谢大家的阅读，如果文章中存在错误的地方欢迎指正！


群贤毕至

访客