首先 先记录一些知识
bootstrap是什么?
Bootstrap是基于 HTML、CSS、JAVASCRIPT 的前端框架。
该框架已经预定义了一套CSS样式和与样式对应的JS代码。(对应的样式有对应的特效)
开发人员只需要编写HTML结构,添加bootstrap固定的class样式,就可以轻松完成指定效果的实现。
应用:
- Bootstrap 使得 Web 开发更加快捷,高效。
- BootStrap支持响应式开发,解决了移动互联网前端开发问题
什么是响应式布局、响应式布局能够解决什么问题?
- 响应式布局:一个网站的展示能够兼容多个终端(手机、iPad、PC等),而不需要为每个终端单独做一个展示版本。
- 此概念专为解决移动互联网浏览而诞生的。
- 响应式布局,使得网站仅适用一套样式,就可以在不同分辨率下展示出不同的舒适效果,大大降低了网站开发维护成本,并且能带给用户更好的体验性
环境下载:
中文官网地址:https://v3.bootcss.com/getting-started/#download
内容结构
bootstrap/
├── css/
│ ├── bootstrap.css //便于阅读的css源文件
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css //压缩文件大小的css源文件
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css //主题文件
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js //便于阅读的JS源文件
│ └── bootstrap.min.js //压缩文件大小的JS源文件
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
进入上面的网站后会有很详细的介绍,入门等等,在这里不再多说,说一下使用前准备:
1.进入https://v3.bootcss.com/getting-started/#template
2.进入上面的网页后找到基本模板(下面是截图)
3.将下面的代码全部复制,然后复制到编译代码的软件中
4.我们需要将下载的 Bootstrap 里面的东西全部复制
注意:下载完后打开js应该只有红色框以外的几个文件,我已将jquery文件上传,需要的自行下载,没有这个东西是不能够正常使用的。
5.以上操作准备完成后(把上面的文件全部复制到项目里面)
需要将上面图片的路径修改好(上面的截图是修改完毕的)
6.准备工作完成,祝你使用愉快。
(jquery已存在,我不能够上传,如有需要可以联系我,祝大家使用顺利)