我们在使用BootStrap时候，需要对它的环境进行安装
具体安装步骤我分为以下几步
下载BootStrap
我们可以从 getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页：
如果你看到的不是这个官网，你可能使用的是最新版的官网或者是之前的官网，你现在看到的是目前最新版本的UI界面，可能以后会在更新，所有需要你关注博主随时更新最新的文章来获取知识
下载的方式有很多种，我们可以使用官网提供的node命令来安装，也可以使用官方为我们提供的安装包来进行下载
- 使用node命令进行下载：npm i bootstrap@5.3.0-alpha3
- 使用下载官方提供的安装包
具体步骤如下：
点击首页中的Download按钮，当然需要文档的伙伴也可以点击旁边的下载文档的按钮进行下载
点击进入以后，我们看到会有下载的很多样式
下载Bootstrap来获得编译后的CSS和JavaScript，源代码，或者将其包含在你最喜欢的包管理器中，如npm, RubyGems等。
以上有，预编译好的js和css，以及源代码和提供的实例，我们需要下载的话，下载预编译好的就可以了
我们来说明一下预编译好的js和css 以及源代码之间的区别
- Download ：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
- Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
如果我们使用的是未编译的源代码，我们需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持 Recess，这是 Twitter 的基于 less.js 的 CSS 提示。
为了更好的了解和更方便的使用，我们将在本讲解中使用 Bootstrap 的预编译版本。
由于文件是被编译过和压缩过的，在独立的功能开发中，我们不必每次都包含这些独立的文件。
本讲解编写时，使用的是最新版（Bootstrap 5.3.0-alpha3）
下载下来以后，我们来看看它的文件结构
文件结构
预编译的 Bootstrap
当我们下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：
如上图所示，可以看到已编译的 CSS 和 JS（bootstrap.*），以及已编译压缩的 CSS 和 JS（bootstrap.min.*）。同时也包含了 一些工具，非常的实用，以前还有一个Glyphicons 的字体，这是一个可选的 Bootstrap 主题。最新版以后，就脱离的这个font包
Bootstrap 源代码
如果我们下载了 Bootstrap 源代码，那么文件结构将如下所示：
源文件
通过下载我们的源文件，源文件中包括 Sass、JavaScript和文档文件，并且使用我们的开发工具进行编译和引入bootstrap，此选项需要一些额外的工具
- Sass编译器 ：用于将Sass源文件编译为CSS文件
- Autoprefixer：用于为一些特殊的CSS属性添加特定于厂商的属性前缀
Bootstrap自带的全套构建工具已包含在源码中，可以用来开发Boostrap及其文档，有时候我们也需要自定义一些功能呢，官网给出的方案也不符合我们的胃口
文件目录对应的内容都有什么呢，我来为大家解释一下
- less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
- dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
- docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。
jsDelivr
使用 jsDelivr 的话可以跳过下载文件的操作，直接在你的项目中使用 Bootstrap 编译过的 CSS 和 JS 文件。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" 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呢？
接下来我们将引入bootstrap到html文件中，
引入bootstrap至html文件中
代码搞起来
我们将下载的预编译过的文件包拷贝到vscode当中，放在当前项目的根目录下
我们需要哪些js和css样式我们就直接引入即可
注意：我们在玩bootstrap时，还需要依赖于jQuery，所以我们要将jquery.js引入进来
<script src="../bootstrap/js/bootstrap.min.js"></script> <script src="../bootstrap/js/jquery.js"></script>
看一下我们引入的bootstrap代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <title>bootstrap引入方式</title></head><body> <h1>bootstrap前端框架初期</h1> <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --> <script src="../bootstrap/js/bootstrap.min.js"></script> <!-- 包括所有已编译的插件 --> <script src="../bootstrap/js/jquery.js"></script></body></html>
在这里，我们可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。
Staticfile CDN 推荐使用
国内推荐使用 Staticfile CDN 上的库
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
此外，你还可以使用以下的 CDN 服务：
- 国际推荐使用：cdnjs.com/
