Bootstrap下载安装教程- 站长百科

Bootstrap是一套用于 HTML、CSS 和 JS 开发的开源工具集。要下载 Bootstrap，可以选择获取编译后的 CSS 和 JavaScript 文件、源码，或者通过各种软件包管理器，例如 npm、RubyGems 等，将 Bootstrap 添加到项目中。

一、经过编译的CSS和JS

下载 Bootstrap v4.6.2 版本，这些文件已经编译并压缩过，可以直接用于项目。下载的文件包括：

1、编译并压缩过的 CSS 集成包；

2、编译并压缩过的 JavaScript 插件。

注意：不包括文档、源文件或任何可选的 JavaScript 依赖项（jQuery 和 Popper）。

二、源文件

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

1、Sass 编译器用于将 Sass 源文件编译为 CSS 文件；

2、Autoprefixer 用于为某些 CSS 属性添加特定于厂商的属性前缀。

Bootstrap 自带的全套构建工具已包含在源码中，可以用来开发 Bootstrap 及其文档，但很可能不符合你的目的。

三、jsDelivr

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="external nofollow"  integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script>

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

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-Lge2E2XotzMiwH69/MXB72yLpwyENMiOKX8zS8Qo7LDCvaBIWGL+GlRQEKIpYR04" crossorigin="anonymous"></script>

四、软件包管理器

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

1、npm

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

npm install bootstrap

require(‘bootstrap’) 会将所有 Bootstrap 的 jQuery 插件加载到 jQuery 对象上。bootstrap 模块本身不导出（export）任何内容。Bootstrap 的所有 jQuery 插件都放在软件包顶级目录下的 /js/*.js 中，每个插件都可以独立加载。

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

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

2、yarn

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

yarn add bootstrap

3、RubyGems

在 Gemfile 中添加如下代码行，然后利用 Bundler (recommended) 和 RubyGems 在你 Ruby 项目中安装 Bootstrap：

gem 'bootstrap', '~> 4.6.2'

另外，如果不使用 Bundler，则可以通过运行以下命令来安装 Bootstrap 的 gem 软件包：

gem install bootstrap -v 4.6.2

4、Composer

还可以利用 Composer 来安装并管理 Bootstrap 的 Sass 和 JavaScript 文件：

composer require twbs/bootstrap:4.6.2

5、NuGet

如果你是 .NET 开发者，那么可以利用 NuGet 来安装并管理 Bootstrap 的 CSS 或 Sass 以及 JavaScript 文件：

Install-Package bootstrap

Install-Package bootstrap.sass

五、下载Bootstrap4

Bootstrap4 是 Bootstrap 的最新版本，接下来介绍如何下载安装 Bootstrap 4。

1、Bootstrap 4 CDN

国内推荐使用 BootCDN 上的库：

<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="external nofollow"  rel="external nofollow" target="_blank" >

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow" ></script>

<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow" ></script>

<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow" ></script>

2、Bootstrap4官方下载

Bootstrap4官方下载地址：https://getbootstrap.com/

注意：还可以通过包的管理工具 npm、 gem、 composer 等来安装：

npm install bootstrap@4.0.0-beta.2
gem 'bootstrap', '~> 4.0.0.beta2'
composer require twbs/bootstrap:4.0.0-beta.2