bootstrap-v6-install

将 Bootstrap 6 添加到项目

此技能可在用户的项目中设置 Bootstrap 6。选择适合项目的方式：CDN，无需构建步骤即可快速开始；或包管理器（npm），用于自定义 Sass 和打包 JS。若要进行针对特定打包器的完整设置，请改用专用的 bootstrap-npm、bootstrap-vite、bootstrap-webpack 或 bootstrap-parcel 技能。

工作流

• 第 1 步：选择安装方式（CDN 或包管理器）
• 第 2 步：安装 Bootstrap 和依赖项
• 第 3 步：引入 Bootstrap 的 CSS
• 第 4 步：引入 Bootstrap 的 JavaScript
• 第 5 步：验证

---

第 1 步：选择安装方式

• CDN — 无需构建步骤。最适合静态页面、演示和原型。跳转到下方的 CDN 部分。
• 包管理器（npm） — 自定义 Bootstrap 的 Sass 令牌或对 JS 进行 tree-shaking 时必须使用。需要 Node.js 和 Sass 编译器。继续阅读 npm 部分。

Bootstrap 6 依赖两个可选的 peer 包：

• @floating-ui/dom — 用于菜单、弹出框和工具提示的定位。不使用这些功能时可省略。
• vanilla-calendar-pro — 日期选择器。不使用时可省略。

---

第 2 和第 3 步（CDN）：通过 CDN 引入

在 <head> 中添加 Bootstrap 的 CSS，并在结束标签 </body> 前添加 JS bundle。该 bundle 包含 Floating UI 和 Vanilla Calendar Pro。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-B/GM4XqrwHnWXNOWMbloTmrYXZg10cakYGmpfsR/bbzQ6JAJI4ihuyADKLnBgrCe" crossorigin="anonymous">
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap!</h1>
      <button class="btn-solid theme-primary">Primary button</button>
    </div>
    <script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-1a/pXj49ZQ1aHEmrJ+gMw1otqoVsYwlEnlD8mIfY2TV03r20Y0CN7uqx1tQogjPL" crossorigin="anonymous"></script>
  </body>
</html>

使用其他版本时，请从安装文档中复制准确的 URL 和哈希值。切勿猜测 SRI 哈希值。要使 SRI 正常工作，必须使用 crossorigin="anonymous" 属性。

若要分别加载 Floating UI 和 Vanilla Calendar Pro（减小载荷），请将非 bundle 版 JS 与导入映射配合使用：

<script type="importmap">
{
  "imports": {
    "@floating-ui/dom": "https://cdn.jsdelivr.net/npm/@floating-ui/dom/+esm",
    "vanilla-calendar-pro": "https://cdn.jsdelivr.net/npm/vanilla-calendar-pro/+esm"
  }
}
</script>
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-BJf/nQgxZJU68GxBse97Vdlc8Rh+z9PzzXiS3/BjV+1nQPR7IKn+iJnD3DJvCMaU" crossorigin="anonymous"></script>

CDN 设置到此完成 — 跳转到 第 5 步：验证。

---

第 2 步（npm）：安装

npm install [email protected] @floating-ui/dom vanilla-calendar-pro

Bootstrap 6 需要Sass 编译器（Dart Sass）和 PostCSS/Autoprefixer，以匹配官方编译后的输出。不支持 Node Sass。请安装所用设置需要的构建工具，例如：

npm install --save-dev sass autoprefixer postcss postcss-cli

第 3 步（npm）：引入 Bootstrap 的 CSS

使用现代的 @use 规则导入 Bootstrap 的 Sass 源码（不要使用 @import — 它已从 Dart Sass 中移除，且 v6 不支持）：

// Import all of Bootstrap's CSS
@use "bootstrap/scss/bootstrap";

使用 with () 语法自定义令牌。只需包含要更改的键 — Bootstrap 会将覆盖项与默认值合并：

@use "bootstrap/scss/bootstrap" with (
  $root-tokens: (
    --border-radius: .25rem,
    --spacer: 1.5rem,
  )
);

通过令牌映射（$root-tokens 以及各组件的 $*-tokens 映射）覆盖 CSS 自定义属性，参见 Customize › Sass。在 Sass 中，令牌名称不带前缀（例如 --border-radius、--spacer）；Bootstrap 的 dist/CDN CSS 会通过 PostCSS 添加 --bs- 前缀，因此自行编译源码时令牌会保持无前缀。

使用 --load-path=node_modules 编译 Sass 为 CSS，以便解析 bootstrap，然后通过 PostCSS 运行 Autoprefixer。

第 4 步（npm）：引入 Bootstrap 的 JavaScript

Bootstrap 6 的 JavaScript 仅提供 ESM。将所有插件导入到 bootstrap 对象：

import * as bootstrap from 'bootstrap'

或者只导入所需内容，以便自动进行 tree-shaking：

import { Tooltip, Toast, Popover } from 'bootstrap'

你也可以直接从 bootstrap/js/dist/ 下的文件导入单个插件。

使用打包器时，Bootstrap 会自动导入 Floating UI 和 Vanilla Calendar Pro。

---

第 5 步：验证

1. 加载页面（或运行开发服务器），确认示例 .btn-solid.theme-primary 按钮和 .container 已应用样式 — 这可以证明 Bootstrap 的 CSS 已加载。
2. 触发一个 JS 组件（例如工具提示或对话框），确认 JavaScript 已加载且控制台没有报错。
3. 对于 CDN 设置，请确认 integrity 哈希值与所链接的版本匹配（哈希值不匹配会阻止文件加载）。
4. 如果 Sass 编译失败，请确认使用了 @use（而非 @import），并传入了 --load-path=node_modules。
5. Bootstrap 6 需要支持 oklch() 和 color-mix() 的浏览器。