bootstrap总结

Bootstrap总结报告： 看源码学习哦！必须要做的事！

一：前言

1.兼容设备：桌面浏览器、平板电脑、手机

2.特色：响应式栅格、丰富组件、jquery插件！ （布局、样式、交互）

3.get skill：图片文件压缩！

图标集：前端用到的哦！

4.先引入css，因为渲染引擎要用到哦！ 放最上面； 然后是jquery，因为bootstrap是基于jquery实现的哦！

二：脚手架

1.脚手架：做的就是准备工作。

2.normalize.css（reset.css）：清空和重置浏览器的默认行为！

3.响应式：meta标签 + bootstrap.respsonsive.css: 布局辅助类

。响应式工具不能用于table元素，而且本就不支持。

三：基本CSS样式

1.文本

2.列表

3.表格

4.表单

5.按钮

6.图片样式类

7.图标：glyphicons 图标颜色是可以设置的哦！

四：组件

1.下拉菜单

2.按钮组

3.按钮下拉菜单

4.导航

5.导航条：static fixed absolute

6.路径导航（面包屑导航）

7.分页

8.缩略图

9.警告框：信息提示只用

10.进度条

11.媒体对象？ 干啥用的？

五: JavaScript插件 （show：事件执行之前； shown：动作执行完毕） bootstrap提供了很多事件哦！

1.过渡效果

2.模态对话框(模态框提供了事件哦：show、shown、hide、hidden)

3.滚动监听（bootstrap提供了事件哦）

4.标签页

5.工具提示、弹出提示

6.警告框

7.手风琴组件（可折叠）

8.轮播：Bootstrap的轮播插件对外暴露了两个可被监听的事件！

9.输入提示：前端验证可以用的到哦，自己去扩展里面的内容！

10.附加导航

发现的漏洞、思想：

1.媒体查询你要好好的学习下噢！ <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

2.javascript构建工具：grunt

3.定义了额多个class类，实现了类的灵活性！ btn btn-default btn-large： 解耦，各司其职！

4.图标的实现原理：都是编码实现的哦！

5.常用的标签：div ul li a

6.绝对定位的导航条和fixed的导航条？

7.data-src?

8.插件冲突：Bootstrap插件和其它UI框架一同使用！ 思想：有问题第一时间好好的看官网哦！

最后： 一个良好的前端工程师的素养

1.用相对单位：em rem！

2.行内、块状

3.css选择器：CSS的 :empty 选择器 jquery：first之类的选择器

4.web端事件、移动web端事件！

Bootstrap Version 3：

一：是什么？

答：HTML/CSS/JAVASCRIPT框架，响应式的web项目框架。

二：

1.css预处理脚本：less sass