（一）BootStrap
查询BootStrap官方文档是最有效并且最靠谱的学习方式
（1）简介
- BootStrap是什么
- 一个开源的Web前端框架
- 集合HTML/CSS/JavaScript
- 为什么要使用BootStrap
- 使用BootStrap可以开发出适配多端的网页（电脑端、手机、平板），也就是网页的兼容性很好
- 使用版本：用于生产环境的BootStrap
- 在使用前需要导入的文件
- 导入bootstrap.css
- 导入jQuery.js
- 导入bootstrap.js
<meta name="viewport" content="width=device-width, initial-scale=1">添加在head标签中保证移动设备优先- 将所有的内容放置在布局容器中: ```java
...```
（2）栅格系统
- 栅格系统
- 作用：让网页自动适应屏幕的大小
- 网页默认分为12列，col-lg-1表示当超大屏幕的时候一个元素占据屏幕中的一列（所以此时一行最多可以显示12个相同的元素）
- 类前缀（取决于屏幕的分辨率，具体数据需要查询BootStrap官方文档）
- col-lg
- col-md
- col-sm
- col-xs
<div class="container-fluid">
<div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
<div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
</div>
- hidden-xs：在最小屏幕的时候隐藏元素
BootStrap CSS文档查询：https://v3.bootcss.com/css/#grid-options
（3）BootStrap组成
- BootStrap组成
- 全局CSS样式
- 组件
- Javascript插件
- BootStrap将常用的CSS样式封装成了类，可以直接使用，比如
<del>nothing</del> //删除文字效果
<u>I am the follower</u> //文字下划线效果
- 使用BootStrap例子：
- Button按钮（可以将超链接封装成Button的样式）
- 进度条
- 轮播图
- 栅格系统
- 具体参考https://v3.bootcss.com/components/ BootStrap组件
<button type="button" class="btn btn-primary active">Primary Button active</button>
<button type="button" class="btn btn-primary ">Primary Button not-active</button>
<button type="button" class="btn btn-primary btn-lg"> Large Primary Button</button>
结论：使用BootStrap可以打造出适配于移动端的网站，并且有很多成熟的封装类可以直接使用