6_2Bootstrap项目搭建

客官°小女子只卖身不卖艺 2023-09-30 19:51 24阅读 0赞

boostrap中文网:[https://www.bootcss.com/][https_www.bootcss.com]

![f3f69ca9784a742cf1c9c64c6630aa11.png][]

boostrap4下载地址:[https://v4.bootcss.com/docs/getting-started/download/][https_v4.bootcss.com_docs_getting-started_download]

![dcf6637d0d3f18abd59733c824f65bf3.png][]

生产环境下选择预编译的CSS和JS文件,这是压缩处理之后的文件,体积小,学习阶段可以选择源码文件,包含构建工具等,我们这里选择预编译即可

![f57095a358c990820b944a5b5cbcb586.png][]

搭建bootstrap项目

创建项目,将bootstrap中的css下的文件复制进项目的css目录中,bootstrap js目录中的文件复制进入项目的js目录中,截图如下

![f29c1c34342b3f2cbd13050445ccee8a.png][]

创建HTML文件,在HTML文件中引入bootstrap中的css样式文件和JS文件

![dde8d20600efb0c246c506714d7fdf28.png][]

如果不想下载bootstrap,可以使用在线资源加载bootstrap,但是会受限于网络环境

![2182b498feebf7596aa6c4bdde4837df.png][]

从boostrap中文网中,选择组件,将代码复制粘贴进入我们的网页即可

![352749b241f07964ff750cec0a5e1189.png][]

如果出现下图,说明bootstrap项目搭建成功

![0ff891a26d7a2de9a464bb101c1e8017.png][]

总结:

1 bootstrap是一款优秀的前端框架,它能够让我们快速搭建项目,现有大量样式库可以供我们使用,可以帮助我们实现快速开发,使用bootstrap的感受基本上就是ctrl+c然后ctrl+v ,修改一下就可以实现前端页面的快速开发

2 bootstrap在导入js文件时,要求顺序是先导入jQuery,然后是popper.js(包含于bootstrap.bundle.min.js中),最后是bootstrap.min.js

3 不同的版本对于jQuery版本的要求时不一致的,导入时要注意jQuery的版本

[https_www.bootcss.com]: https://www.bootcss.com/
[f3f69ca9784a742cf1c9c64c6630aa11.png]: https://img-blog.csdnimg.cn/img_convert/f3f69ca9784a742cf1c9c64c6630aa11.png
[https_v4.bootcss.com_docs_getting-started_download]: https://v4.bootcss.com/docs/getting-started/download/
[dcf6637d0d3f18abd59733c824f65bf3.png]: https://img-blog.csdnimg.cn/img_convert/dcf6637d0d3f18abd59733c824f65bf3.png
[f57095a358c990820b944a5b5cbcb586.png]: https://img-blog.csdnimg.cn/img_convert/f57095a358c990820b944a5b5cbcb586.png
[f29c1c34342b3f2cbd13050445ccee8a.png]: https://img-blog.csdnimg.cn/img_convert/f29c1c34342b3f2cbd13050445ccee8a.png
[dde8d20600efb0c246c506714d7fdf28.png]: https://img-blog.csdnimg.cn/img_convert/dde8d20600efb0c246c506714d7fdf28.png
[2182b498feebf7596aa6c4bdde4837df.png]: https://img-blog.csdnimg.cn/img_convert/2182b498feebf7596aa6c4bdde4837df.png
[352749b241f07964ff750cec0a5e1189.png]: https://img-blog.csdnimg.cn/img_convert/352749b241f07964ff750cec0a5e1189.png
[0ff891a26d7a2de9a464bb101c1e8017.png]: https://img-blog.csdnimg.cn/img_convert/0ff891a26d7a2de9a464bb101c1e8017.png