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调用模态框插件

posted @ 2016-07-05 09:18  风茗  阅读(224)  评论(0编辑  收藏  举报