Skip to main content Skip to docs navigation

下载

下载 Bootstrap 以获取已编译的 CSS 和 JavaScript、源代码，或将其包含在你最喜欢的包管理器中，例如 npm、RubyGems 等。

目录

编译 CSS 和 JS

🌐 Compiled CSS and JS

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

🌐 Download ready-to-use compiled code for Bootstrap v5.3.8 to easily drop into your project, which includes:

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

🌐 This doesn’t include documentation, source files, or any optional JavaScript dependencies like Popper.

下载

源文件

🌐 Source files

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

🌐 Compile Bootstrap with your own asset pipeline by downloading our source Sass, JavaScript, and documentation files. This option requires some additional tooling:

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

🌐 Should you require our full set of build tools, they are included for developing Bootstrap and its docs, but they’re likely unsuitable for your own purposes.

下载源代码

示例

🌐 Examples

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

🌐 If you want to download and examine our examples, you can grab the already built examples:

下载示例

通过 jsDelivr 的 CDN

🌐 CDN via jsDelivr

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

🌐 Skip the download with jsDelivr to deliver cached version of Bootstrap’s compiled CSS and JS to your project.

<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，请将 Popper 添加到我们的 JS 代码之前，最好通过 CDN 进行添加。

🌐 If you’re using our compiled JavaScript and prefer to include Popper separately, add Popper before our JS, via a CDN preferably.

<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

🌐 Alternative CDNs

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

🌐 We recommend jsDelivr and use it ourselves in our documentation. However, in some cases—like in some specific countries or environments—you may need to use other CDN providers like cdnjs or unpkg.

你会在这些 CDN 提供商上找到相同的文件，只是 URL 不同。使用 cdnjs，你可以使用这个直接的 Bootstrap 包链接来复制并粘贴每个 dist 文件的即用型 HTML 片段，适用于任意版本的 Bootstrap。

🌐 You’ll find the same files on these CDN providers, albeit with different URLs. With cdnjs, you can use this direct Bootstrap package link to copy and paste ready-to-use HTML snippets for each dist file from any version of Bootstrap.

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

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

🌐 Note that you should compare same length hashes, e.g. sha384 with sha384, otherwise it’s expected for them to be different. As such, you can use an online tool like SRI Hash Generator to make sure that the hashes are the same for a given file. Alternatively, assuming you have OpenSSL installed, you can achieve the same from the CLI, for example:

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

包管理器

🌐 Package managers

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

🌐 Pull in Bootstrap’s source files into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will require a Sass compiler and Autoprefixer for a setup that matches our official compiled versions.

npm

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

🌐 Install Bootstrap in your Node.js powered apps with the npm package:

npm install bootstrap@5.3.8

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

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

🌐 Bootstrap’s package.json contains some additional metadata under the following keys:

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

Get started with Bootstrap via npm with our starter project! Head to the Sass & JS example template repository to see how to build and customize Bootstrap in your own npm project. Includes Sass compiler, Autoprefixer, Stylelint, PurgeCSS, and Bootstrap Icons.

yarn

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

🌐 Install Bootstrap in your Node.js powered apps with the yarn package:

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

使用 Bun CLI 在你的 Bun 或 Node.js 驱动的应用中安装 Bootstrap：

🌐 Install Bootstrap in your Bun or Node.js powered apps with the Bun CLI:

bun add bootstrap@5.3.8

RubyGems

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

🌐 Install Bootstrap in your Ruby apps using Bundler (recommended) and RubyGems by adding the following line to your Gemfile:

gem 'bootstrap', '~> 5.3.8'

或者，如果你不使用 Bundler，可以通过运行以下命令安装该 gem：

🌐 Alternatively, if you’re not using Bundler, you can install the gem by running this command:

gem install bootstrap -v 5.3.8

有关更多详细信息，请参见此 gem 的 README。

Composer

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

🌐 You can also install and manage Bootstrap’s Sass and JavaScript using Composer:

composer require twbs/bootstrap:5.3.8

NuGet

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

🌐 If you develop in .NET Framework, you can also install and manage Bootstrap’s CSS or Sass and JavaScript using NuGet. Newer projects should use libman or another method as NuGet is designed for compiled code, not frontend assets.

Install-Package bootstrap

Install-Package bootstrap.sass

IntelliSense 扩展

🌐 IntelliSense extension

安装社区维护的 IntelliSense 扩展 到 Visual Studio Code，以便为 Bootstrap 类获得 IntelliSense 自动补齐。

🌐 Install the community-maintained IntelliSense extension for Visual Studio Code to get IntelliSense auto-completion for Bootstrap classes.

在 VS Code 商店查看