一、目前比较主流的前端框架有：
1.layui
2.vue.js
3.bootstrap
4.jquery ui
二、bootstrap：
1.来自Twitter,目前最流行的前端框架之一
2.是基于HTML、CSS和JavaScript的一个简洁、灵活的开源框架。
3.目前版本是V3
三、bootstrap的优势：
1.快速制作响应式的网页来适配各种终端
2.开发简单、方便
3.移动先行
4.代码开源
5.代码有良好的规范
四、使用bootstrap的步骤：
1.在head里面写：
2.在title下面引入css文件：
3.在上面引入js文件，注意顺序，先引入jquery的js，在引入bootstrap的js。
五、bootstrap架构：
1.响应式设计
2.CSS组件
3.JavaScript插件
4.基础布局组件
5.12栅格系统
6.jQuery1.10+
六、12栅格系统：
1.概念：就把网页的总宽度分为12等分。
2.实现原理：
（1）通过定义容器的大小，平分为12份。
（2）调整内外边距
（3）结合媒体查询
七、列组合：
1.语法：
6等分
6等分
八、列偏移：
1.语法：
向右偏移2等分
九、列嵌套：
语法：
6等分
十、列排序：
语法：
9等分
3等分
十一、响应式栅格：
1.小屏幕（手机）：<768px (xs)
2.小屏幕（平板）：>=768px (sm)
3.中屏幕(桌面显示器)：>=992px (md)
4.大屏幕(大桌面显示器)：>=1200px (lg)
eg:既要支持小屏幕，也需要支持大屏幕：
十二、CSS全局样式：
1.标题样式：
.h1~.h6
2.页面主体：
默认页面中的字体都是12px,如果要突出显示字体的话需要加class样式lead
3.突出字体：
突出
4.强调文本：
左对齐：text-left
右对齐：text-right
居中：text-center
两端对齐：text-justify
5.列表：
class=“list-inline”
6.表单：
语法：
姓名：
7.控件大小：
（1）.大型输入框：
（2）.小型输入框：
8.按钮：
1.灰色：btn btn-default
2.深蓝色：btn btn-primary
3.绿色：btn btn-success
4.天蓝色：btn btn-info
5.黄色：btn btn-warning
6.红色：btn btn-danger
7.链接：btn btn-link
9.按钮大小：
（1）大型：btn-lg
（2）小型：btn-sm
（3）超小型：btn-sx
10.图片：
（1）响应式:img-responsive
（2）圆角：img-rounded
（3）圆形：img-circle
（4）圆角边框：img-thumbnails