Skip to main content Skip to docs navigation

Boostrap 下载

下载Bootstrap以获取编译的CSS和JavaScript、源代码,或将其与包管理器(如npm、RubyGems等)一起使用。

编译的CSS和JS

下载 Bootstrap v5.3.3 的现成编译代码,以便轻松放入项目,其中包括:

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

下载

源码文件

通过下载我们的源Sass、JavaScript和文档文件,使用您自己的资源编译Bootstrap。此选项需要一些工具:

如果您需要我们的构建工具,它们可以用于开发Bootstrap及其文档,但它们可能不适合您自己的用途。

下载源码包

示例

果你想获在我们的全部 examples,可以点击这里下载 :

下载示例

通过CDN jsDelivr

不用下载,以CDN引用方式将Bootstrap编译的CSS和JS的缓存版本交付给您的项目。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Y3IQOsa3niuvpqakr8NIT3EETRv0G6tFumi3detLTSYuXBc6XxbPEt9sOg6OcLgO" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-r5kRSTMtRNVfwqCvIzNkemSRRqsQB3BJN5m7GjomHUT+81f70U37lfRUk9tJSSQO" 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.3/dist/js/bootstrap.min.js" integrity="sha384-BRzTbsDillcZ9cJS3keZSZIggjuMr6yO0NydiQOk5xguSoFlRpj4FALnfgmFMjai" crossorigin="anonymous"></script>

其他 CDN

我们推荐 jsDelivr,并在我们的文档中使用了它。不过,在某些情况下,比如在某些特定国家或环境中,您可能需要使用其他 CDN 提供商,如 cdnjsunpkg

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

请注意,您应该比较相同长度的哈希值,例如 sha384sha384,否则它们可能会不同。因此,您可以使用 SRI Hash Generator 等在线工具来确保给定文件的哈希值相同。或者,假设你已经安装了 OpenSSL,也可以通过 CLI 实现同样的功能:

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

包管理器

将 Bootstrap 的源文件导入到几乎所有使用最流行的软件包管理器的项目中。无论使用哪种软件包管理器,Bootstrap 都需要使用 Sass 编译器Autoprefixer,以便与我们的官方编译版本相匹配。

npm

使用 npm 软件包 在 Node.js 支持的应用程序中安装 Bootstrap:

npm install bootstrap@5.3.3

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 Icons图标。

yarn

使用yarn 包在Node.js应用中安装Bootstrap:

yarn add bootstrap@5.3.3

RubyGems

使用Bundler推荐)和 RubyGems 在Ruby应用程序中安装Bootstrap,方法是在Gemfile中添加以下行:

gem 'bootstrap', '~> 5.3.3'

另外,如果不使用 Bundler,也可以运行此命令安装 gem:

gem install bootstrap -v 5.3.3

详细了解 gem’s README

Composer

您还可以使用 Composer 安装和管理 Bootstrap 的 Sass 和 JavaScript:

composer require twbs/bootstrap:5.3.3

NuGet

如果使用 .NET Framework 开发,还可以使用 NuGet 安装和管理 Bootstrap 的CSSSass 和 JavaScript。较新的项目应使用 libman 或其他方法,因为 NuGet 是为编译代码而不是前端资产设计的。

Install-Package bootstrap
Install-Package bootstrap.sass