目录结构

展示 Bootstrap 包中所包含的内容,包括预编译包以及源码包。记住,Bootstrap 的 JavaScript 插件依赖 jQuery。

Bootstrap 预编译包

下载 Bootstrap 安装包之后,解压缩到任意目录,你将看到如下这些文件:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── 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
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.min.js
    ├── bootstrap.js
    └── bootstrap.min.js

这就是 Bootstrap 的文件组织结构:预编译文件用于直接引入到任意项目中。我们提供了预先编译的 CSS 和 JS (bootstrap.*)文件,以及编译并压缩的 CSS 和 JS (bootstrap.min.*)文件。CSS source maps (bootstrap.*.map) 用于配合某些浏览器的开发者工具使用。打包后的 JS 文件 (bootstrap.bundle.js 和压缩后的 bootstrap.bundle.min.js)已经包含了 Popper ,但是并没有包含 jQuery

CSS 文件

Bootstrap 提供了多个选项,便于你选择引入某些或全部经过编译的 CSS 文件。

CSS 文件 布局 Content 组件 工具
bootstrap.css
bootstrap.min.css
包含 包含 包含 包含
bootstrap-grid.css
bootstrap-grid.min.css
仅限栅格系统 未包含 未包含 仅限 flex 工具
bootstrap-reboot.css
bootstrap-reboot.min.css
未包含 仅限 Reboot 未包含 未包含

JS 文件

同样,我们也提供了多个选项,便于你选择引入某些或全部经过编译的 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/
├── docs/
│   └── examples/
├── js/
└── scss/

scss/js/ 目录分别存放了 CSS 和 JavaScript 源码。dist/ 目录存放的是预编译好的所有内容。docs/ 目录存放的是文档的源码以及实例模板的 examples/ 目录。除此之外,包含的其他文件用于描述包(package)的信息、许可证和开发说明。