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