Bootstrap
前言:浏览器兼容性 响应式的解决方案! 好好研究下吧!
一:全局CSS样式
1.<html lang="zh-CN">
2.原生的感觉:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user- scalable=no">
3.为了增强跨浏览器表现的一致性 normalize.css css重置样式库
全局css设置 bootstrap框架默认设置的通用样式
5.clearfix visible-xs-block
6.使用offset 响应式列布局
9.nth-of-type() css选择符待加强
10.sr-only 仅屏幕阅读器可见 文字转语音
11.line-height 顶线、中线、基线、底线 ! css书上有!
13.html组件 css属性的进一步巩固
14.a元素 button元素的区别 role="button"
18.css的优先级问题!
19..sr-only 类可以对屏幕阅读器以外的设备隐藏内容 屏幕阅读器
20.有针对性的使用这类工具类,从而避免为同一个网站创建完全不同的版本。相反,通过使用这些工具类可以在 不同设备上提供不同的展现形式。
21.ajax请求:js实现与后台程序的通信 表单请求:表单自带的功能。
22.设备宽度和浏览器宽度! 因为浏览器宽度是可以自己调整的,而设备宽度是无法调整的!
23.role属性,告诉辅助设备这是一个什么元素,增强语义性,设备友好性!
24.aria-haspopup:true表示点击会出现菜单或浮动元素, 而false表示没有pop-up效果。
aria-expanded:表示展开状态,默认为undefined,表示展开状态未知。 true:展开; false:不展开。
二:组件
做页面一般用到的组件:
1.导航条、路径导航 侧边导航栏 滚动监听
2.下拉菜单
3.分页组件
4.页面标签 徽章
5.警告框
6.进度条
7.输入框组
8.表单组件
9.表格组件
三: javascript插件,
Preface:
a: jquery插件,依赖jquery! 先导入jqeury,再倒入bootstrap!
b: bootstrap插件是用jqeury写的插件, 插件调用方式有两种,一种是通过data属性调用,一种是通过js调用!
1. 事件开始执行时,事件执行后, 比如click,
2. Transition.js, 被其它插件用来检测当前浏览器对是否支持 CSS 的过渡效果。
3. 通过data属性或javascript调用模态框插件