本文最后更新于337天前，请注意内容是否还可用。

下载 Bootstrap 以获得编译后的 CSS 和 JavaScript 文件、源码，或者通过你所喜欢的软件包管理器，例如 npm、RubyGems 等，将 Bootstrap 添加到你的项目中。

经过编译的 CSS 和 JS

下载 Bootstrap v5.1.3 版本经过编译并立即可用的文件，以便直接用于你的项目。下载的文件包括：

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

下载 Bootstrap 生产文件

源文件

下载 Bootstrap 的 Sass、JavaScript 和文档源码，并使用你自己的电脑进行编译。此方式需要一些额外的工具：

  • Sass 编译器 用于将 Sass 源文件编译为 CSS 文件
  • Autoprefixer 用于为某些 CSS 属性添加特定于厂商的属性前缀

Bootstrap 自带的全套 构建工具 已包含在源码中，它们被用来开发 Bootstrap 及其文档，但很可能不适合用到你自己的项目中。

使用 jsDelivr 免费 CDN

使用 jsDelivr 的话可以跳过下载文件的操作，直接在你的项目中使用 Bootstrap 编译过的 CSS 和 JS 文件。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LY6QZQpYtqgQLJeUeh2disXkUUa+fRYfq/3dxdpkU5PQZUCqg/BK4wrhQ9idOojx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-3JyvMmfSMpWbSPyCjNwU5lHJFeswLerSwlOGCGjyuhQ+HKQNQKCbIzEgGTP1MfyY" crossorigin="anonymous"></script>

如果你使用的是经过编译的 JavaScript 文件，并且希望单独引入 Popper，那么最好是在 Popper 之后引入 Bootstrap 的 JS 文件。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-sy7xrBVBIaMK3slILGYC/U63fKx1UrfD8TRvvm7ofBK58y8tUNR4GWLKo+k+Yx8K" crossorigin="anonymous"></script>

软件包管理器

通过一些常用的软件包管理器可以将 Bootstrap 的 源文件 添加到任何项目中。无论使用的是哪个软件包管理器，Bootstrap 都 依赖 Sass 编译器 和 Autoprefixer 以保证编译出的文件与官方的一致。

npm

在你的 Node.js 项目中安装 Bootstrap 的 npm 软件包：

npm install bootstrap

const bootstrap = require('bootstrap') 或 import bootstrap from 'bootstrap' 会将所有 Bootstrap 的插件加载到一个 bootstrap 对象上。 bootstrap 模块本身导出（export）所有插件。Bootstrap 的所有 jQuery 插件都放在软件包顶级目录下的 /js/dist/*.js 中，每个插件都可以独立加载。

Bootstrap 的 package.json 文件中包含以下一些元数据信息：

  • sass – 指向 Bootstrap 的 Sass 入口源码文件路径
  • style – 指向使用默认设置（没有自定义）预编译的 Bootstrap 的非压缩 CSS 文件的路径

利用 npm 和我们提供的模板项目快速上手 Bootstrap！ 请前往 twbs/bootstrap-npm-starter 模板仓库，以了解如何如何在你自己的 npm 项目中构建和定制 Bootstrap。包括 Sass 编译器、Autoprefixer、Stylelint、PurgeCSS 以及 Bootstrap 图标库。

yarn

在你的 Node.js 项目中安装 Bootstrap 的 yarn 软件包：

yarn add bootstrap

 

本文系作者 @ suxing 原创发布在 Maggie 主题演示站 ，未经许可，禁止转载。