1.4 下载Bootstrap

Bootstrap的安装比较简单，用户可以从Bootstrap中文网下载Bootstrap的最新版本。本书使用的是Bootstrap 4.6.0版本，下载界面如图1-1所示。

图1-1 官网下载 Bootstrap

单击“下载Bootstrap”按钮进入下载页面，有3个按钮可以选择，分别是“下载Bootstrap生产文件”“下载Bootstrap源码”“下载Bootstrap示例”，如图1-2所示。由于我们现在处于初级使用阶段，所以单击“下载Bootstrap生产文件”按钮即可。

图1-2 下载用于生产环境的 Bootstrap

下载成功后可以得到一个.zip的文件，解压后我们可以得到一个包含CSS和JS文件的文件夹。

Bootstrap提供了以下两种形式的压缩包（在本书中，我们将使用Bootstrap的预编译版本）。

1.预编译版

如果下载了 Bootstrap（单击“下载 Bootstrap 生产文件”按钮）的已编译的版本，解压缩 ZIP文件，我们将看到下面的文件/目录结构。

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的基本文件结构：预编译文件可以直接使用到任何Web项目中。除了编译好的CSS和 JS文件，Bootstrap还提供了经过压缩的CSS和JS文件（文件名中含有min），以及CSS源码映射表（bootstrap.*.map），可以在某些浏览器的开发工具中使用。

表1-1列举了CSS文件所涵盖的内容。

表1-1 CSS文件涵盖的内容

续表

表1-2列举了JS文件所包含的内容。

表1-2 JS文件所包含的内容

2.Bootstrap源代码

如果读者下载了Bootstrap源代码（单击“下载 Bootstrap源码”按钮），则读者将看到下面的文件/目录结构。

bootstrap/
├── dist/
│   ├── css/
│   └── js/
├── site/
│   └──content/
|      └──docs/
|          └──4.6/
|              └── examples/
├── js/
└── scss/

scss/、js/目录分别包含了 CSS 和 JS 的源码。dist/中包含了上面所说的预编译 Bootstrap包内的所有文件，site/docs/中包含的是源码文档，examples/中包含的是Bootstrap的用法实例。除了这些，其他文件还包含Bootstrap安装包的定义文件、许可证文件和编译脚本等。

因为本书使用的是预编译版，故不需要重新进行编译，对编译工具node-sass也就不做介绍。 p9XaQdPrpOCkyhO8313WWuHV7tMee/N7vS44tRa0cJ5jQgDInKxUcwi6S/752GIa