跳到正文
Hacker News· hbcondo714·· 10 天前AI 评分22

Bootstrap 6 Alpha 发布：全面现代化改造

Bootstrap 6 Alpha

AI 导读

Bootstrap 发布首个 v6 Alpha 版本，基于 Sass 模块系统从底层重构，仅支持 ESM 格式 JavaScript 插件，并引入大量新 CSS 标准。浏览器支持门槛提升至 Chrome/Edge 130、Firefox 132 和 Safari 18，不再提供降级方案或 polyfill。该版本已上线 npm 和 jsDelivr，Bootstrap 5 仍继续维护。

正文 · AI 翻译

今天我们发布 Bootstrap 6 的首个 alpha 版本，这是该项目的一次重大革新，对史上最高产的开放源代码设计系统之一进行了现代化改造与扩展。过去一年里投入这项工作既充满乐趣又收获颇丰，我很高兴能与大家分享。

Bootstrap 6 从底层开始全面现代化，采用了 Sass 模块系统，支持更多原生浏览器 API 和元素，仅提供 ESM 格式的 JavaScript 插件，并引入了一系列新的 CSS 标准。我们将这篇文章拆分为多个条目逐一发布，首先从 v6 概览以及我们全新的 Sass 与 CSS 实现开始。

本系列文章

  1. Bootstrap 6 Alpha 版！
  2. 扩展的颜色与焕然一新的主题
  3. 新增与改进的组件
  4. 网格系统更新
  5. 新增与改进的表单
  6. 前缀与工具类
  7. JavaScript 插件

等等……

你大概会问自己：“搞什么，新的 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 获取。请注意，我们的 JavaScript 在 v6 中仅支持 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>

然后阅读我们的 安装 或 快速开始 页面。如果你是从 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、完整的 pretty text 支持或 Safari 中的对比色等功能，但我们预计 v7 会比以往的主要版本更快到来。

如果这一底线不适合你的项目，Bootstrap 5 仍然可用并受支持。我们会在公布 Bootstrap 5 生命周期结束日期之前尽快发布 v5.4.0。

聚焦：CSS 优先的 Sass 模块

将 Bootstrap 更新为使用 Sass 模块是一项浩大的工程，在 v5 中无法在不引入破坏性变更的情况下完成。因此我们在 v6 中大刀阔斧地推进。

Bootstrap 6 使用 @use/@forward 模块系统，自定义现在通过 token map 进行。Sass 仍用于程序化自定义（生成组件变体、工具类、函数等），而所有视觉自定义则通过 CSS 完成。

Token map 是 Sass map，存放我们在 :root 中的全局设置以及各个组件上的所有 CSS 变量。这统一了自定义的路径，并让 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 中的一个值而重新声明整个 map，并且你可以在我们的 token 旁边添加自己的 token。说到这个，以下是在新的模块系统中使用 token map 自定义这些 token 的方法。

通过 @use ... with 导入 Bootstrap，并开始修改未命名空间的 token map。你可以用 $root-tokens map 覆盖根 token；组件拥有以组件命名的专属 token map。此外，这也是自定义我们剩余少数全局 Sass 变量的方法。

@use "../node_modules/bootstrap/scss/bootstrap" with (
  // Manage global options
  $enable-smooth-scroll: true,

  // Move the entire radius scale by changing its base
  $radius: .25rem,

  // Modify global tokens
  $root-tokens: (
    --spacer: 1.5rem,
    --focus-ring-width: 3px,
  ),

  // Modify component tokens
  $alert-tokens: (
    --alert-padding-x: calc(var(--spacer) * 2),
    --alert-border-radius: var(--radius-8),
  ),
);

注意这里的 token 没有 bs 前缀。在 v5 中，前缀是一个 Sass 变量 $prefix，贯穿于每个声明中。在 v6 中，我们在源码中编写不带前缀的自定义属性，并在构建时用 PostCSS 添加命名空间，因此 $prefix 已不复存在，你改为在 PostCSS 配置中配置前缀。

$radius 这一行也值得特别说明。我们的圆角尺度源自单个基础值，因此改动那一个数字就会同时移动全部十个层级，所有读取它们的组件也会随之变化。$spacer 和间距尺度也是同样的道理。

这让我们能够同时使用 Sass 和 CSS 构建出最灵活的系统，并且既可以在编译前也可以在编译后自定义。在浏览器中更新全局 token，下游组件就会实时更新。相比 v5 的 Sass-CSS 混合系统，这是一次巨大的改进，我希望你会喜欢。

圆角

间距

主色

一次 token 变更即可同时作用于所有组件。

卡片

内边距跟随间距，圆角跟随圆角尺度。

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

前缀

v6 中一个非常明显且具有破坏性的变化，是将响应式工具类和组件变体从中缀改为前缀。没错，这是直接照搬 Tailwind 处理响应式的方式，没错，它比 v5 中那种位置随意的中缀更好。

下面是一些 Bootstrap 类的前后对比：

  • .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（重命名是有意为之）

这一变化适用于所有工具类、组件、网格布局等。它还包括 :hover、:focus 等状态修饰符。它们的使用体验完全一致。

如果你基于我们的断点辅助工具编写了自定义 Sass，breakpoint-infix() 现在是 breakpoint-prefix() 并返回前缀字符串，而 loop-breakpoints-up 和 loop-breakpoints-down mixin 暴露的是 $prefix 而不是 $infix。

现代化

Bootstrap 6 经过全面改造，尽可能使用最新的浏览器原生特性，并更新了构建工具。这让 Bootstrap 更易访问、更易自定义，也为未来的浏览器更新做好了准备。与此同时，我们围绕现代模块系统和新版 Dart Sass 重写了源码 Sass。@import 已弃用，不再支持用于自定义；请改用 @use 和 @forward。

Sass 文件也重新组织过，并且由于所有视觉自定义都改用 CSS 变量、通过 light-dark() 实现自动颜色模式适配等变化，若干 Sass 文件已被移除。我们还清理了围绕 _maps.scss 文件、_variables.scss 和 _variables-dark.scss 的种种乱象，后两者已不复存在。

在 HTML 和 CSS 方面，一些亮点包括：

  • CSS 层，在整个框架中实现可预测的优先级，其中 utilities 作为最顶层。
  • oklch() 颜色和 color-mix()，用于感知均匀、可主题化的调色板，能自动适应基础颜色变化。
  • light-dark()，原生支持颜色模式，无需重复样式，且在同一属性-值配对中完成。
  • 范围媒体查询，例如用 (width >= 768px) 取代 min-width/max-width 的权宜写法。
  • 容器查询，让响应式设计适应父元素而不仅仅是视口。包括 mixin、辅助工具以及各组件的变化。
  • 原生 <details> 和 <summary> 驱动手风琴——无需 JavaScript
  • 原生 <dialog> 元素支撑新的 Dialog 组件
  • :where() 选择器，用于降低复杂选择器的优先级
  • content-visibility 配合 allow-discrete 过渡，再加上 interpolate-size 和 ::details-content 伪元素，让手风琴以纯 CSS 实现展开和收起的动画。过去，在展开式控件上做高度动画意味着要用 JavaScript 测量元素。
  • @property，将我们的工具 API 组合出的自定义属性注册为非继承属性，防止其值泄漏到子元素。

在 JS 和工具链方面：

  • ESM-only plugins. There’s no UMD bundle and no window.bootstrap global anymore. What this means for you depends entirely on how you use our JavaScript, so here are the three cases.
    • 如果你只使用像 data-bs-toggle 这样的数据属性，只需在 script 标签中添加 type="module" 即可——其他一切照常工作。
    • 如果你从 CDN 构建版本调用我们的 API，请改用显式导入：import { Tooltip } from './bootstrap.bundle.min.js'。
    • 对于 Vite、Webpack 或 Parcel 等基于 ESM 的现代打包工具，现有导入继续有效——import { Tooltip } from 'bootstrap' 现在可以正确进行 tree shaking，而 sideEffects 元数据会保留 Data API 监听器。使用 CommonJS require() 的项目必须迁移到 ESM 导入。
  • TypeScript。我们的源码现在是 .ts，并且我们自带类型声明，因此你可以从依赖项中删除 @types/bootstrap。像 bootstrap/js/src/alert.js 这样的深层导入仍然可以解析。
  • Rolldown 在我们的工具链中同时取代了 Rollup 和 Babel。它会自行剥离 TypeScript 类型并降级语法，从而从仓库中移除了一整层构建工具。只有当你从源码构建 Bootstrap 时才会受到影响。
  • Vitest 通过 Playwright 在真实 Chromium 中运行，取代了 Karma。
  • Astro 7 用于文档，它带来了基于 Pagefind 的全新搜索体验、新页面，以及更新的导航和布局。

为人类和智能体而构建

Bootstrap 6 包含对 LLM 友好的文档和技能文件，满足你所有的智能体编码需求。

为了更高效地与智能体协作，我们提供了纯文本版本的文档。llms.txt 是每个文档页面的精选索引，附带描述，而 llms-full.txt 则是我们所有文档拼接成的一个文件。

技能文件已添加到仓库中 一个新的 skills/ 目录。技能是针对特定任务的行动手册，在这里就是针对使用 Bootstrap 6。首先，我们起草了迁移到 v6、在不同构建工具中使用 Bootstrap、编写组件等技能文件。把你的智能体指向相关文件，它就会遵循我们维护者提供的正确指导，而不是任何可能过时或错误的内容。

还有两件事……

我们还更新了博客和 Icons 网站的设计。

  • 博客有了新的主页、通过 Pagefind 实现的搜索、新的分类页面，以及像你现在读到的这种新文章布局。

  • Icons 网站也有了新主页——立即以图标网格为中心。我们在这里也添加了 Pagefind 搜索（包括 ?tag= 查询）、新的侧边栏分类导航和分类页面，以及焕然一新的图标展示页。

此外，我们还构建了一个新的私有仓库和包，用于在主站、Icons 和博客之间共享 Bootstrap 文档组件。它叫做 @twbs/bui，让我们作为维护者能更好地控制所有独立站点，而无需完全投入 monorepo。

接下来是什么

这是一个 alpha 版本，因此在 beta 之前仍可能有重大变化。在我们通过 beta 和 RC 阶段开始稳定之前，还会有更多 alpha 版本。请分享你的所有反馈，我们会尽力解决：

  • 如果你对 v6 版本有一般性问题或反馈，请使用 GitHub Discussions 中的 v6 反馈分类。
  • 如果你有具体的 bug 或功能请求，请在 GitHub Issues 中提交 issue。
  • 提交包含你更改的 pull request（最好先在讨论或 issue 中审查，以免浪费大家的时间！）

再次感谢所有贡献者，感谢阅读，希望你喜欢 Bootstrap 6！

来源：Hacker News · blog.getbootstrap.com

开源生态部署工程MCP 与工具调用产品更新#产品更新#开源/仓库#部署/工程#MCP/工具调用