预编译的Bootstrap

Bootstrap预编译文件不包含文档和最初的源代码文件，可以直接使用到Web项目中。将预编译的Bootstrap下载成功后，解压bootstrap-4.4.1-dist.zip文件，会看到css和js两个文件夹，这两个文件夹下还有很多个子文件，其结构如下所示。

bootstrap/
├── css/
│  ├── bootstrap-grid.css
│  ├── bootstrap-grid.css.map
│  ├── bootstrap-grid.min.css
│  ├── bootstrap-grid.min.css.map
│  ├── bootstrap-reboot.css
│  ├── bootstrap-reboot.css.map
│  ├── bootstrap-reboot.min.css
│  ├── bootstrap-reboot.min.css.map
│  ├── bootstrap.css
│  ├── bootstrap.css.map
│  ├── bootstrap.min.css
│  └── bootstrap.min.css.map
└── js/
  ├── bootstrap.bundle.js
  ├── bootstrap.bundle.js.map
  ├── bootstrap.bundle.min.js
  ├── bootstrap.bundle.min.js.map
  ├── bootstrap.js
  ├── bootstrap.js.map
  ├── bootstrap.min.js
  └── bootstrap.min.js.map

上述bootstrap目录的基本结构中，bootstrap.表示预编译好的文件；bootstrap.min.表示经过压缩的文件；bootstrap..map表示CSS源码映射表文件，这些文件可直接在某些浏览器的开发工具中使用；bootstrap.bundle.js和bootstrap.bundle.min.js是捆绑的JavaScript文件，包括Popper，但不包括jQuery。值得一提的是，map文件只有在自定义的高级开发时才会用到，在实际开发中通常进行整体的复制，所以该部分作为了解即可。

在了解了预编译Bootstrap的文件结构之后，下面主要讲解如何在HTML中引入预编译的Bootstrap的核心CSS和JavaScript文件，示例代码如下。

<!-- 引入Bootstrap 4核心CSS文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- 引入Bootstrap 4核心JavaScript 文件 -->
<script src="bootstrap/js/bootstrap.min.js"></script>

上述代码中，通过link标签引入bootstrap.min.css文件，其中，href属性的值为本地文件路径；通过script标签引入bootstrap.min.js文件，设置src属性值为本地文件路径地址。