Bootstrap 软件包中包含了预编译的 CSS 文件和 JavaScript 插件,Bootstrap 的 JavaScript 插件依赖于 jQuery 库。其中,CSS 文件用于定义网页的样式和布局,而 JavaScript 插件则提供了一些额外的功能,如模态框、下拉菜单等。
一、预编译的Bootstrap文件
下载并解压后,将看到文件夹中包含如下文件:
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 项目。
Bootstrap 提供了经过编译的 CSS 和 JS (bootstrap.*) 文件,以及既编译又压缩的 CSS 和 JS (bootstrap.min.*) 文件。Source maps (bootstrap.*.map) 文件可与某些浏览器的开发者工具协同使用。打成集成包的 JS 文件(bootstrap.bundle.js 以及压缩后的bootstrap.bundle.min.js)包含了 Popper,但并不包含 jQuery。
二、CSS文件
Bootstrap 可以引入部分或全部预编译的 CSS。
CSS 文件 | Layout | Content | Components | Utilities |
bootstrap.css
bootstrap.min.css |
已包含 | 已包含 | 已包含 | 已包含 |
bootstrap-grid.css
bootstrap-grid.min.css |
Only grid system | 未包含 | 未包含 | Only flex utilities |
bootstrap-reboot.css
bootstrap-reboot.min.css |
未包含 | Only Reboot | 未包含 | 未包含 |
三、JS文件
Bootstrap 可以引入部分或全部的预编译 JavaScript。
JS 文件 | Popper | jQuery |
bootstrap.bundle.js
bootstrap.bundle.min.js |
已包含 | 未包含 |
bootstrap.js
bootstrap.min.js |
未包含 | 未包含 |
四、Bootstrap源码
下载的 Bootstrap 源码包括预编译的 CSS 和 JavaScript 资源,以及 Sass、JavaScript 和文档源码,它包括以下甚至更多内容:
bootstrap/ ├── dist/ │ ├── css/ │ └── js/ ├── site/ │ └── content/ | └── docs/ | └── 4.6/ | └── examples/ ├── js/ └── scss/
scss/ 和 js/ 目录下放置的是我们的 CSS 和 JavaScript 源码。dist/ 目录下放置的是预编译的文件,就像前面“预编译 Bootstrap 文件”章节所列出的内容。site/docs/ 目录放置的是我们的文档源码,examples/ 目录下放置的是 Bootstrap 的用法示例。除此之外,任何其它文件都是辅助性文件,例如为软件包、许可证信息和开发提供辅助作用。