6_2Bootstrap项目搭建

缺乏、安全感 2023-09-27 15:09 99阅读 0赞

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

![acab9ecacf49bb0c488c9fc8ecd487e3.png][]

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

![64cc73ff2b97a351e1cf4bb5989eb868.png][]

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

![5c26dec1da98682b925c268e2bd31492.png][]

搭建bootstrap项目

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

![406d74083d077b73b7cd9b316180d496.png][]

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

![d729f62738653e58ccb060657d475257.png][]

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

![51358f0fb987e8536f2b6cab1288926a.png][]

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

![92113e706aca9a0cfb23d96df5b9f2d4.png][]

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

![d0730f0b96af0f8191192312d71cfdbf.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/
[acab9ecacf49bb0c488c9fc8ecd487e3.png]: https://img-blog.csdnimg.cn/img_convert/acab9ecacf49bb0c488c9fc8ecd487e3.png
[https_v4.bootcss.com_docs_getting-started_download]: https://v4.bootcss.com/docs/getting-started/download/
[64cc73ff2b97a351e1cf4bb5989eb868.png]: https://img-blog.csdnimg.cn/img_convert/64cc73ff2b97a351e1cf4bb5989eb868.png
[5c26dec1da98682b925c268e2bd31492.png]: https://img-blog.csdnimg.cn/img_convert/5c26dec1da98682b925c268e2bd31492.png
[406d74083d077b73b7cd9b316180d496.png]: https://img-blog.csdnimg.cn/img_convert/406d74083d077b73b7cd9b316180d496.png
[d729f62738653e58ccb060657d475257.png]: https://img-blog.csdnimg.cn/img_convert/d729f62738653e58ccb060657d475257.png
[51358f0fb987e8536f2b6cab1288926a.png]: https://img-blog.csdnimg.cn/img_convert/51358f0fb987e8536f2b6cab1288926a.png
[92113e706aca9a0cfb23d96df5b9f2d4.png]: https://img-blog.csdnimg.cn/img_convert/92113e706aca9a0cfb23d96df5b9f2d4.png
[d0730f0b96af0f8191192312d71cfdbf.png]: https://img-blog.csdnimg.cn/img_convert/d0730f0b96af0f8191192312d71cfdbf.png