boostrap中文网:https://www.bootcss.com/
![](https://i-blog.csdnimg.cn/blog_migrate/d5e4da5301bf160c9763486ff2027d84.png)
boostrap4下载地址:https://v4.bootcss.com/docs/getting-started/download/
![](https://i-blog.csdnimg.cn/blog_migrate/3637fbccf7448c2c1a33176e2ac154e0.png)
生产环境下选择预编译的CSS和JS文件,这是压缩处理之后的文件,体积小,学习阶段可以选择源码文件,包含构建工具等,我们这里选择预编译即可
![](https://i-blog.csdnimg.cn/blog_migrate/9f871bae0b7e535d272277555a59232e.png)
搭建bootstrap项目
创建项目,将bootstrap中的css下的文件复制进项目的css目录中,bootstrap js目录中的文件复制进入项目的js目录中,截图如下
![](https://i-blog.csdnimg.cn/blog_migrate/af063de79a4e0e79ff182207c4cca719.png)
创建HTML文件,在HTML文件中引入bootstrap中的css样式文件和JS文件
![](https://i-blog.csdnimg.cn/blog_migrate/e947b4482d4189ed4618260edfc8e95c.png)
如果不想下载bootstrap,可以使用在线资源加载bootstrap,但是会受限于网络环境
![](https://i-blog.csdnimg.cn/blog_migrate/6fb2eba2a6979f6af387df998557298d.png)
从boostrap中文网中,选择组件,将代码复制粘贴进入我们的网页即可
![](https://i-blog.csdnimg.cn/blog_migrate/814f100736223dc32016c81b56bfdf2c.png)
如果出现下图,说明bootstrap项目搭建成功
![](https://i-blog.csdnimg.cn/blog_migrate/b6f708cde2d13f164ae525b297b3df67.png)
总结:
1 bootstrap是一款优秀的前端框架,它能够让我们快速搭建项目,现有大量样式库可以供我们使用,可以帮助我们实现快速开发,使用bootstrap的感受基本上就是ctrl+c然后ctrl+v ,修改一下就可以实现前端页面的快速开发
2 bootstrap在导入js文件时,要求顺序是先导入jQuery,然后是popper.js(包含于bootstrap.bundle.min.js中),最后是bootstrap.min.js
3 不同的版本对于jQuery版本的要求时不一致的,导入时要注意jQuery的版本