安装 · Bootstrap 6.0 中文文档

安装

使用包管理器，即可把 Bootstrap 的源文件引入几乎任何项目。通过包管理器安装的内容不包含文档和完整的构建脚本。你也可以使用示例仓库中的任何演示来快速启动 Bootstrap 项目。

npm install bootstrap

pnpm add bootstrap

yarn add bootstrap

bun add bootstrap

安装完成后，请参阅 npm 指南获取完整安装说明。

使用 Bootstrap npm 起始项目！前往 Sass & JS 示例模板仓库，了解如何在自己的 npm 项目中构建和自定义 Bootstrap。其中包含 Sass 编译器、Autoprefixer、Stylelint、PurgeCSS 和 Bootstrap 图标。

使用 npm

使用 import * as bootstrap from 'bootstrap' 会把 Bootstrap 的所有插件加载到 bootstrap 对象上。你也可以单独导入插件，以便自动 tree shaking：

JavaScript

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

也可以直接加载包顶层目录下的 /js/dist/*.js 文件来导入插件。

Bootstrap 的 package.json 在以下键中提供了一些额外元数据：

sass - Bootstrap 主 Sass 源文件的路径
style - 使用默认设置（未自定义）编译的 Bootstrap 非压缩 CSS 的路径

此外，Bootstrap 在包根目录附带一个 .browserslistrc 文件，为 Browserslist 和 Autoprefixer 等工具定义浏览器目标。完整支持策略请参阅浏览器与设备。

使用 Yarn

Yarn 2+（也称 Yarn Berry）默认不支持 node_modules 目录，因此我们的 Sass & JS 示例需要做一些调整：

Shell

          yarn config set nodeLinker node-modules # Use the node_modules linker
touch yarn.lock # Create an empty yarn.lock file
yarn install # Install the dependencies
yarn start # Start the project

CDN

通过 CDN 引入 Bootstrap 的 CSS 和 JavaScript 文件。CDN（内容分发网络）是为网站提供库副本的服务。与通过包管理器安装不同，你只需在网站中链接 CDN 托管的文件。

以下是我们用于 CSS 和 JavaScript 的主要 CDN 链接：

HTML

          <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">
<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>

如果你更愿意单独引入 Floating UI 和 Vanilla Calendar Pro，而不是使用捆绑包，请使用 import map 解析裸模块标识符：

HTML

          <script type="importmap">
{
  "imports": {
    "@floating-ui/dom": "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.7.6/dist/floating-ui.dom.esm.min.js",
    "vanilla-calendar-pro": "https://cdn.jsdelivr.net/npm/vanilla-calendar-pro@3.4.0/index.mjs"
  }
}
</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>

文件类型	网址
CSS	`https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css`
JS 包（含 Floating UI 和 Vanilla Calendar Pro）	`https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js`

使用 CDN

你也可以使用 CDN 获取我们的其他构建版本。

使用 CDN 链接时，请务必通过 integrity 属性校验文件与版本是否正确。这些哈希值对每个 Bootstrap 文件和版本都是唯一的，因此升级版本时也要同步更新 integrity 属性。

我们还提供了 crossorigin="anonymous" 属性，以避免 CORS 错误。

其他 CDN

我们推荐 jsDelivr，并在自己的文档中使用它。不过在某些情况下——例如特定国家或环境——你可能需要使用 cdnjs 或 unpkg 等其他 CDN 提供商。

在这些 CDN 提供商上可以找到相同的文件，只是 URL 不同。使用 cdnjs 时，你可以通过这个 Bootstrap 包直达链接，复制粘贴任意版本 Bootstrap 各 dist 文件的现成 HTML 片段。

安全警告 —— 如果某个文件的 SRI 哈希值不一致，就不应使用该 CDN 上的文件，因为这意味着文件已被他人修改。

注意应比较长度相同的哈希值，例如 sha384 与 sha384，否则它们不同是正常的。你可以使用 SRI Hash Generator 之类的在线工具确认给定文件的哈希值是否一致。或者，在已安装 OpenSSL 的前提下，也可以通过命令行完成同样的校验，例如：

Shell

          openssl dgst -sha384 -binary bootstrap.min.js | openssl base64 -A

下载

你也可以采用传统方式手动下载 Bootstrap。可以在编译好的 dist（分发）文件和源文件之间选择。后者需要一些额外工具才能编译并在项目中使用 Bootstrap。

类型	描述	链接
分发文件	可直接使用的已编译并压缩的 CSS 和 JavaScript 文件。不包含文档、源文件，也不包含 Floating UI 和 Vanilla Calendar Pro 等依赖。	下载
源文件	用于通过自己的资源管线编译的 Sass、JavaScript 和文档文件。需要 Sass 编译器、Autoprefixer，以及 Rollup 或 Webpack 等 JavaScript 打包工具。	下载

如果你需要完整的构建工具，它们随 Bootstrap 及其文档的开发一起提供，但可能不适合你自己的用途。

面向 AI 工具与大语言模型

Bootstrap 文档提供机器可读格式，我们还为 AI 编程工具提供了AI 编程助手技能。请参阅 AI，了解我们的 llms.txt 文件和完整技能列表。

安装

本页目录

安装

使用 npm

使用 Yarn

更多安装方式

使用 RubyGems

使用 NuGet

CDN

使用 CDN

其他 CDN

下载

面向 AI 工具与大语言模型