跳到主要内容
在 GitHub 查看原文

下载

下载 Bootstrap 以获取已编译的 CSS 和 JavaScript、源代码，或通过你喜欢的包管理器如 npm、RubyGems 等进行引入。

本页目录

已编译的 CSS 和 JS

下载可直接使用的 Bootstrap v5.3.8 编译代码，轻松加入到你的项目中，包含：

这不包括文档、源文件或任何可选的 JavaScript 依赖项，如 Popper。

下载

源文件

通过下载我们的源 Sass、JavaScript 和文档文件，使用你自己的资源管道编译 Bootstrap。此选项需要一些额外的工具：

如果你需要我们完整的构建工具，它们包含用于开发 Bootstrap 及其文档，但可能不适合你自己的用途。

下载源代码

示例

如果你想下载并查看我们的 示例，你可以获取已经构建好的示例：

下载示例

通过 jsDelivr 的 CDN

使用 jsDelivr 跳过下载，将 Bootstrap 已编译的 CSS 和 JS 缓存版本交付到你的项目中。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

如果你使用我们编译好的 JavaScript 并且希望单独引入 Popper，请在我们的 JS 之前添加 Popper，最好通过 CDN 引入。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>

替代 CDN

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

你可以在这些 CDN 提供商上找到相同的文件，尽管 URL 不同。使用 cdnjs，你可以 使用这个直接的 Bootstrap 包链接 来复制并粘贴每个 Bootstrap 版本的 dist 文件的现成 HTML 代码片段。

如果某个文件的 SRI 哈希值不同，你不应使用来自该 CDN 的文件，因为这意味着文件被其他人修改过。

请注意，你应当比较相同长度的哈希值，例如 sha384 与 sha384，否则它们不同是正常的。因此，你可以使用像 SRI Hash Generator 这样的在线工具来确保给定文件的哈希值相同。或者，假设你已经安装了 OpenSSL，你也可以通过命令行实现相同的操作，例如：

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

包管理器

通过一些最受欢迎的包管理器，将 Bootstrap 的 源文件 导入几乎任何项目。无论使用哪种包管理器，Bootstrap 都将 需要一个 Sass 编译器 和 Autoprefixer 来设置与我们官方编译版本相匹配的环境。

npm

在你的 Node.js 应用中通过 npm 包 安装 Bootstrap：

npm install bootstrap@5.3.8

const bootstrap = require('bootstrap') 或 import bootstrap from 'bootstrap' 会将所有 Bootstrap 插件加载到 bootstrap 对象上。bootstrap 模块本身导出我们所有的插件。你可以通过加载包顶层目录下的 /js/dist/*.js 文件来手动单独加载 Bootstrap 的插件。

Bootstrap 的 package.json 在以下键下包含一些额外的元数据：

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

通过我们的入门项目使用 npm 开始使用 Bootstrap！ 前往 Sass & JS 示例 模板仓库，看看如何在你自己的 npm 项目中构建和自定义 Bootstrap。包括 Sass 编译器、Autoprefixer、Stylelint、PurgeCSS 和 Bootstrap 图标。

Yarn

在你的 Node.js 应用中通过yarn 包安装 Bootstrap：

yarn add bootstrap@5.3.8

Yarn 2（也称为 Yarn Berry）不支持 node_modules 默认目录: 使用我们的 Sass 和 JS 示例 需要一些调整：

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

小圆面包

在你的 Bun 或 Node.js 应用中通过 Bun CLI 安装 Bootstrap：

bun add bootstrap@5.3.8

RubyGems

在你的 Ruby 应用中使用 Bundler（推荐）和 RubyGems 安装 Bootstrap，只需将以下行添加到你的 Gemfile：

gem 'bootstrap', '~> 5.3.8'

或者，如果你没有使用 Bundler，你可以通过运行以下命令来安装这个 gem：

gem install bootstrap -v 5.3.8

有关更多详情，请参阅该 RubyGem 的自述文件（README）。

作曲家

你也可以使用 Composer 安装和管理 Bootstrap 的 Sass 和 JavaScript：

composer require twbs/bootstrap:5.3.8

NuGet

如果你在 .NET Framework 中开发，你也可以使用 NuGet 安装和管理 Bootstrap 的 CSS 或 Sass 以及 JavaScript。新项目应使用 libman 或其他方法，因为 NuGet 是为已编译的代码设计的，而不是前端资源。

Install-Package bootstrap

Install-Package bootstrap.sass

IntelliSense 扩展

安装社区维护的 IntelliSense 扩展 为 Visual Studio Code 获取 Bootstrap 类的 IntelliSense 自动完成。

在 VS Code 市场中查看