奇链 奇链
← 文章 / 开源项目
getbootstrap 5小时前 · 2026-10-09 02:28:53 · 1 阅读

Bootstrap 6 测试版

Bootstrap 6 Alpha

今天，我们发布了 Bootstrap 6 的首个 Alpha 版本。这次发布对该项目进行了全面重构，旨在现代化并扩展有史以来最具影响力的开源设计系统之一。过去一年来，参与这项工作既充满乐趣又极具成就感，我很高兴能与大家分享。

Bootstrap 6 从底层开始进行了现代化改造，采用了 Sass 模块系统，增强了对原生浏览器 API 和元素的支持，插件改为纯 ESM JavaScript，并引入了大量新的 CSS 标准。我们将本文拆分为多个部分逐一发布，首先介绍 v6 的总体概览，重点讲解新的 Sass 和 CSS 实现。

等等……

你可能正在疑惑：“什么？新的 Bootstrap？这是 2015 年吗？”我不怪你。很长一段时间以来，Bootstrap 这边一直风平浪静，因为我把精力集中在了 Pierre 上，尤其是在 Diffs、Trees 和 Code Storage 的项目中。

在此期间，尽管 AI 让开发者无需再手动编写代码，但我脑海中始终萦绕着关于 Bootstrap 的一些想法。没错，现在由出色开发者打造的各类设计库层出不穷。但当初我们创建 Bootstrap 的原因，如今比以往任何时候都更具现实意义。

帮助用户更快、更轻松地构建更多软件。

当今构建软件的人数空前众多，我预计这一趋势将在余生中持续下去。自 2011 年发布以来，它已被下载超过 17.5 亿次。因此，Bootstrap 6 旨在继续作为面向所有用户——无论是人类还是 AI，是新手还是专家——的开源设计系统。

希望你喜欢它，感谢多年来支持该项目的每一位。

致谢社区

在介绍精彩部分之前，我想感谢我的共同维护者 Julien，感谢他在过去几年里为 Bootstrap 投入的大量精力。没有他，我将淹没在代码审查、依赖管理和迁移等事务中。他是绝对的大师，Bootstrap 对他怀有巨大的感激之情。

同样感谢所有为 v6 开发分支做出贡献的朋友们：

@julien-deramond@coliff@pricop@ThomasLandauer@Rishikesh183@pardeyke@meenalsingh0@ifer47@Hashim1999164@fauzan171@claudiob@aljojoby9@VividLemon@cccabinet@Rawal27@jonnysp@kwy404@andreas-venturini

最重要的是，感谢每一位通过 Open Collective 支持 Bootstrap 的赞助者，以及每一位提交 Issue、发送补丁或在 Pull Request 中与我讨论的贡献者。

快速开始

Bootstrap 6 Alpha 1 现已发布在 npm 和 jsDelivr 上。

npm i bootstrap@6.0.0-alpha.1

也可以直接从 CDN 引入。注意 v6 的 JavaScript 仅支持 ESM，因此 <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 迁移过来的，建议先看下一节内容，再查阅迁移指南。

现代浏览器支持

Chrome

130+

Edge

130+

Firefox

132+

Safari

18+

Bootstrap 6 要求 Chrome 和 Edge 130、Firefox 132 以及 Safari 18 及以上版本。作为对比，v5 曾支持到 Chrome 和 Firefox 60、Safari 12 这样老的版本。之所以提高支持底线，是因为我们使用了几年前浏览器还不具备的特性：light-dark()、:has()、容器查询、oklch()、color-mix()、原生 <dialog> 元素等等。这意味着 v6 不会再为低于该底线的浏览器提供任何回退方案、前缀或 polyfill。

当然，这还无法让我们用上 CSS Anchor Positioning、完整的文本美化支持或 Safari 的对比色功能，不过我们预计 v7 的发布周期会比以往的大版本更短。

如果这条支持底线不适合你的项目，Bootstrap 5 依然可用并持续维护。我们会尽快发布 v5.4.0，之后才会公布 Bootstrap 5 的生命周期终止日期。

亮点：CSS 优先的 Sass 模块

把 Bootstrap 升级为 Sass 模块是一项浩大的工程，在 v5 中不引入破坏性变更根本无法实现。所以我们在 v6 里干脆来了一次彻底的革新。

Bootstrap 6 采用 @use/@forward 模块系统，定制现在通过 token map 完成。Sass 仍用于程序化定制（生成组件变体、工具类、函数等），而所有视觉层面的定制则完全交给 CSS。

Token map 是存储所有 CSS 变量的 Sass map，既包含 :root 中的全局设置，也涵盖各个独立组件。这种方式统一了定制路径，让 Bootstrap 聚焦于 CSS 的未来发展方向，同时利用强大的预处理器基础来管理大型代码库。v5 中几乎每一个 Sass 变量如今都已转变为 token map 中的 CSS 变量。这意味着你可以在运行时定制 Bootstrap 的 CSS 变量，而不再局限于编译前。

以下是这种思路在组件（如alert）中的具体体现：

$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
);

@layer components {
  .alert {
    @include tokens($alert-tokens);
    // Rest of alert styles…
  }
}

实际上，这意味着 v5 中几乎所有 Sass 变量如今都成了 token map 中的 CSS 变量。少数剩余的全局 Sass 选项现在位于 _config.scss、_colors.scss 和 _theme.scss 中。

在 :root 层面，我们通过 Sass 函数以编程方式生成大量 token：

$root-tokens: () !default;
$root-tokens: defaults(
  (
    // Individually set CSS variables…
  )
  $root-tokens
);

// Most root tokens are loop-generated
@each $key, $value in $theme-bgs {
  $root-tokens: map.set($root-tokens, --bg-#{$key}, $value);
}

defaults() 函数确保当用户向 token map 添加新 token 或覆盖现有 token 值时，输出结果中只包含相应的变化——一个新的 CSS 变量或现有变量的一个新值。它执行的是合并而非替换，因此你无需为了改变其中一个值而重新声明整个 map，也可以在我们定义的 token 旁边添加自己的 token。说到自定义，以下是如何使用新的模块系统和 token map 来定制这些 token 的方法。

通过 @use ... with 导入 Bootstrap，并修改无命名空间的 token map。你可以用 $root-tokens 地图覆盖根 token；每个组件都有以自己命名的独立 token map。此外，这也是我们定制仅剩的少数全局 Sass 变量的方式。

@use "../node_modules/bootstrap/scss/bootstrap" with (
  // 管理全局选项
  $enable-smooth-scroll: true,

  // 通过改变基础值移动整个圆角刻度
  $radius: .25rem,

  // 修改全局 tokens
  $root-tokens: (
    --spacer: 1.5rem,
    --focus-ring-width: 3px,
  ),

  // 修改组件 tokens
  $alert-tokens: (
    --alert-padding-x: calc(var(--spacer) * 2),
    --alert-border-radius: var(--radius-8),
  ),
);

注意这里的 token 没有 bs 前缀。在 v5 中，前缀是一个名为 $prefix 的 Sass 变量，贯穿每一条声明。在 v6 中，我们在源码中写无统一前缀的自定义属性，并在构建时通过 PostCSS 添加命名空间，因此 $prefix 已被移除，你需要在 PostCSS 配置中设置前缀。

值得特别指出 $radius 这一行。我们的圆角刻度源自单一基础值，因此改变这个数值会同步移动全部十级刻度，所有读取这些值的组件也会随之更新。$spacer 及间距刻度同理。

这为我们构建了一套尽可能灵活的体系，同时利用 Sass 和 CSS，优势在于编译前后均可定制。在浏览器中更新全局 tokens，下游组件会实时更新。相比 v5 的 Sass-CSS 混合系统，这是巨大的进步，希望你会喜欢。

Radius0.5rem0rem0.25rem0.5rem0.75rem1rem1.25rem1.5remSpacer1rem0.75rem1rem1.25rem1.5remPrimaryButton一处 token 变更即可同步影响所有组件。

Card

内边距跟随 spacer，圆角跟随 radius。

CSS
.token-demo {
  --bs-radius-5: 0.5rem;
  --bs-spacer: 1rem;
  --bs-primary-base: var(--bs-blue-500);
  --bs-primary-bg: var(--bs-primary-base);
  --bs-primary-bg-subtle: light-dark(var(--bs-blue-100), var(--bs-blue-900));
  --bs-primary-fg: light-dark(var(--bs-blue-600), var(--bs-blue-400));
  --bs-primary-border: light-dark(var(--bs-blue-300), var(--bs-blue-600));
}

前缀

一个非常明显的

原始来源： getbootstrap

评论 (0)