bootstrap-v6-install

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Add Bootstrap 6 to a Project

将 Bootstrap 6 添加到项目中

This skill sets up Bootstrap 6 in a user's project. Pick the path that matches the project: CDN for the fastest start with no build step, or package manager (npm) for customizing Sass and bundling JS. For a full bundler-specific setup, use the dedicated

bootstrap-npm

bootstrap-vite

bootstrap-webpack

, or

bootstrap-parcel

skills instead.

本技能用于在用户项目中配置 Bootstrap 6。请选择符合项目需求的安装方式：CDN 方式无需构建步骤，可快速上手；包管理器（npm） 方式支持自定义 Sass 和 JS 打包。如果需要针对特定打包工具的完整配置，请改用专门的

bootstrap-npm

、

bootstrap-vite

、

bootstrap-webpack

或

bootstrap-parcel

技能。

Workflow

工作流程

Step 1: Choose an install path

步骤1：选择安装方式

CDN — no build step. Best for static pages, demos, and prototypes. Skip to the CDN section below.
Package manager (npm) — required to customize Bootstrap's Sass tokens or tree-shake JS. Requires Node.js and a Sass compiler. Continue with the npm section.

Bootstrap 6 depends on two optional peer packages:

```
@floating-ui/dom
```
— positioning for menus, popovers, and tooltips. Omit if you don't use them.
```
vanilla-calendar-pro
```
— the datepicker. Omit if you don't use it.

CDN — 无需构建步骤，最适合静态页面、演示和原型项目。请直接跳转到下方的 CDN 章节。
包管理器（npm） — 自定义 Bootstrap 的 Sass tokens 或对 JS 进行 tree-shaking 时必须使用此方式。需要 Node.js 和 Sass 编译器。请继续阅读 npm 章节。

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

```
@floating-ui/dom
```
— 用于菜单、popover 和 tooltip 的定位。如果不使用这些组件可省略。
```
vanilla-calendar-pro
```
— 日期选择器组件。如果不使用可省略。

Step 2 & 3 (CDN): Include via CDN

步骤2 & 3（CDN 方式）：通过 CDN 引入

Add Bootstrap's CSS in

<head>

and the JS bundle before the closing

</body>

. The bundle includes Floating UI and Vanilla Calendar Pro.

html

<!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/bootstrap@6.0.0-alpha.1/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/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-1a/pXj49ZQ1aHEmrJ+gMw1otqoVsYwlEnlD8mIfY2TV03r20Y0CN7uqx1tQogjPL" crossorigin="anonymous"></script>
  </body>
</html>

Copy the exact URLs and hashes from the Install docs when you use a different version. Never guess an SRI hash. The

crossorigin="anonymous"

attribute is required for SRI to work.

To load Floating UI and Vanilla Calendar Pro separately (smaller payload), use the non-bundle JS with an import map:

html

<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/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.min.js" integrity="sha384-BJf/nQgxZJU68GxBse97Vdlc8Rh+z9PzzXiS3/BjV+1nQPR7IKn+iJnD3DJvCMaU" crossorigin="anonymous"></script>

For a CDN setup you're done — skip to Step 5: Verify.

将 Bootstrap 的 CSS 添加到

<head>

标签中，将 JS bundle 添加到

</body>

闭合标签之前。该 bundle 已包含 Floating UI 和 Vanilla Calendar Pro。

html

<!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/bootstrap@6.0.0-alpha.1/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/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-1a/pXj49ZQ1aHEmrJ+gMw1otqoVsYwlEnlD8mIfY2TV03r20Y0CN7uqx1tQogjPL" crossorigin="anonymous"></script>
  </body>
</html>

如果使用其他版本，请从官方安装文档中复制准确的 URL 和哈希值。切勿猜测 SRI 哈希值。

crossorigin="anonymous"

属性是 SRI 正常工作的必要条件。

如果想要单独加载 Floating UI 和 Vanilla Calendar Pro（减小加载体积），请使用非 bundle 版 JS 配合 import map：

html

<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/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.min.js" integrity="sha384-BJf/nQgxZJU68GxBse97Vdlc8Rh+z9PzzXiS3/BjV+1nQPR7IKn+iJnD3DJvCMaU" crossorigin="anonymous"></script>

CDN 方式的配置到此完成 —— 请跳转到 步骤5：验证配置。

Step 2 (npm): Install

步骤2（npm 方式）：安装

npm install bootstrap@6.0.0-alpha.1 @floating-ui/dom vanilla-calendar-pro

Bootstrap 6 requires a Sass compiler (Dart Sass) and PostCSS/Autoprefixer to match the official compiled output. Node Sass is not supported. Install the build tooling your setup needs, e.g.:

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

npm install bootstrap@6.0.0-alpha.1 @floating-ui/dom vanilla-calendar-pro

Bootstrap 6 需要 Sass 编译器（Dart Sass） 和 PostCSS/Autoprefixer 才能生成与官方一致的编译产物。不支持 Node Sass。请根据你的配置安装所需的构建工具，例如：

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

Step 3 (npm): Include Bootstrap's CSS

步骤3（npm 方式）：引入 Bootstrap 的 CSS

Import Bootstrap's source Sass with the modern

@use

rule (never

@import

— it's removed in Dart Sass and unsupported in v6):

scss

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

Customize tokens with the

with ()

syntax. Only include the keys you want to change — Bootstrap merges overrides with its defaults:

scss

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

Override CSS custom properties through the token maps (

$root-tokens

and each component's

$*-tokens

map), following Customize › Sass. Token names are written unprefixed in Sass (e.g.

--border-radius

--spacer

); Bootstrap's dist/CDN CSS runs PostCSS to add the

--bs-

prefix, so compiling the source yourself keeps them unprefixed.

Compile the Sass to CSS with a

--load-path=node_modules

bootstrap

resolves, then run Autoprefixer via PostCSS.

使用现代的

@use

规则引入 Bootstrap 的 Sass 源码（切勿使用

@import

—— Dart Sass 已移除该语法，Bootstrap v6 也不再支持）：

scss

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

使用

with ()

语法自定义 tokens。仅需填写你想要修改的键 —— Bootstrap 会将你的覆盖配置与默认值合并：

scss

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

通过 token 映射（

$root-tokens

以及各组件的

$*-tokens

映射）覆盖 CSS 自定义属性，可参考自定义 › Sass。在 Sass 中，token 名称不带前缀（例如

--border-radius

、

--spacer

）；Bootstrap 的 dist/CDN 版 CSS 会通过 PostCSS 添加

--bs-

前缀，因此自行编译源码时不会带有此前缀。

使用

--load-path=node_modules

参数将 Sass 编译为 CSS，以正确解析

bootstrap

路径，然后通过 PostCSS 运行 Autoprefixer。

Step 4 (npm): Include Bootstrap's JavaScript

步骤4（npm 方式）：引入 Bootstrap 的 JavaScript

Bootstrap 6 JavaScript is ESM-only. Import all plugins onto a

bootstrap

object:

import * as bootstrap from 'bootstrap'

Or import only what you need for automatic tree-shaking:

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

You can also import a single plugin directly from its file under

bootstrap/js/dist/

Floating UI and Vanilla Calendar Pro are imported automatically through Bootstrap when a bundler is used.

Bootstrap 6 的 JavaScript 仅支持 ESM 格式。你可以将所有插件导入到

bootstrap

对象中：

import * as bootstrap from 'bootstrap'

或者仅导入你需要的模块，以自动启用 tree-shaking：

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

你也可以直接从

bootstrap/js/dist/

目录下的对应文件中导入单个插件。

使用打包工具时，Floating UI 和 Vanilla Calendar Pro 会通过 Bootstrap 自动导入。

Step 5: Verify

步骤5：验证配置

Load the page (or run the dev server) and confirm the sample
```
.btn-solid.theme-primary
```
button and
```
.container
```
are styled — that proves Bootstrap's CSS is loaded.
Trigger a JS component (e.g. a tooltip or dialog) to confirm the JavaScript loaded without console errors.
For CDN setups, confirm the
```
integrity
```
hashes match the version you linked (mismatched hashes block the file from loading).
If Sass fails to compile, confirm you used
```
@use
```
(not
```
@import
```
) and passed
```
--load-path=node_modules
```
.
Bootstrap 6 requires a browser that supports
```
oklch()
```
and
```
color-mix()
```
.

加载页面（或运行开发服务器），确认示例中的
```
.btn-solid.theme-primary
```
按钮和
```
.container
```
已应用样式 —— 这证明 Bootstrap 的 CSS 已成功加载。
触发一个 JS 组件（例如 tooltip 或对话框），确认 JavaScript 加载正常，控制台无报错。
对于 CDN 方式的配置，请确认
```
integrity
```
哈希值与你引用的版本匹配（哈希不匹配会阻止文件加载）。
如果 Sass 编译失败，请确认你使用的是
```
@use
```
（而非
```
@import
```
），并且添加了
```
--load-path=node_modules
```
参数。
Bootstrap 6 需要浏览器支持
```
oklch()
```
和
```
color-mix()
```
函数。