- Bootstrap基础教程
- 赵丙秀 汪晓青 李文蕙主编
- 775字
- 2025-02-08 17:18:02
1.4 下载Bootstrap
Bootstrap的安装比较简单,用户可以从Bootstrap中文网下载Bootstrap的最新版本。本书使用的是Bootstrap 4.6.0版本,下载界面如图1-1所示。
![](https://epubservercos.yuewen.com/5D9695/31751384504064006/epubprivate/OEBPS/Images/figure-0012-0001.jpg?sign=1739675688-vJtatHkxgKdCEH4oIkTFPtgj1fpoxSCN-0-44e9185acaa74c624ddafa6d08a5f2cc)
图1-1 官网下载 Bootstrap
单击“下载Bootstrap”按钮进入下载页面,有3个按钮可以选择,分别是“下载Bootstrap生产文件”“下载Bootstrap源码”“下载Bootstrap示例”,如图1-2所示。由于我们现在处于初级使用阶段,所以单击“下载Bootstrap生产文件”按钮即可。
![](https://epubservercos.yuewen.com/5D9695/31751384504064006/epubprivate/OEBPS/Images/figure-0012-0002.jpg?sign=1739675688-nXQ4J0mQTFAn5b7PQG0huJWbTiVoecuu-0-620508574524dea4b0b51f1d40272fc1)
图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文件涵盖的内容
![](https://epubservercos.yuewen.com/5D9695/31751384504064006/epubprivate/OEBPS/Images/figure-0013-0003.jpg?sign=1739675688-dwyqfeP6nymFucjLTXLL31saQLWBxKwB-0-73c0e9c7201c8e9bc700888ffa2f477c)
续表
![](https://epubservercos.yuewen.com/5D9695/31751384504064006/epubprivate/OEBPS/Images/figure-0014-0004.jpg?sign=1739675688-wvJeVRIHIz5onJULtTdH9NhbTDB7QnrV-0-1cbcaf353029fb04060d34547f4ba205)
表1-2列举了JS文件所包含的内容。
表1-2 JS文件所包含的内容
![](https://epubservercos.yuewen.com/5D9695/31751384504064006/epubprivate/OEBPS/Images/figure-0014-0005.jpg?sign=1739675688-NyH8uyAYhhiG3W5wkykTc0GY3LqH4MPV-0-e7f961fb840dbcfaa1f8d1e6a3f1ba72)
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也就不做介绍。