首先需要去官网下载bootstrap4.2.1框架。选择编译好的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
css文件有bootstrap、bootstrap-grid、bootstrap-reboot(如果您不知道.css和.min.css文件有什么不同,就百度一下吧)。对于这三种css文件的作用,官网的解释如下:
可以看出,bootstrap.css支持所有的功能,其他的css只支持四个功能的一部分。所以在开发中,除特殊情况,我们基本都引用bootstrap.min.css。
js的文件有bootstrap和bootstrap.bundle。官方给这两种文件定义如下:
bootstrap.bundle.js包含了popper.js这个框架,当我们在项目中引入bootstrap.bundle.min.js而不是bootstrap.min.js时,就不需要在前面引入popper.js。只在前面引入jquery.min.js就行。