bootstrap快速学习
由于工作的需要,使用bootstrap开发前端页面,页面占据的量不是很大,需要后台来苦逼学习一下,两个多星期学完,现在总结一下.
//标准的bootstrap网页需要添加bootstrap的css,响应式类和jquery插件,注意位置和引用即可.
//主要用到网格系统,其他的只需要添加类即可,简单.只讲讲需要注意的东西
这一行声明编码,同时可以防止被入侵.
Normalize.css不仅仅是css重置,解决了一些浏览器兼容问题.
1,网格.
移动优先,网站是特性添加
网格三分法,黄金分割,网格系统分割点:768,992,1200,使用.container类,分为响应式固定和非固定宽度容器,行模板使用row类.
响应式列重置,清楚浮动使用Clearfix,列的偏移,排序和嵌套
超小型设备默认跨越12列.
2,标签,徽章,凹陷,面板,超大(label,badge,well,panel,Jumbotron).
面板注脚不会改变颜色
3,排版,字体.
small类,text-hide类,页眉,正文,lead类,元素对齐,不要在导航元素上使用.pull-*类,text-nowrap忽略水平环绕和滚动.文本元素转换,代码块.引用语,列表,缩略语,地址
4,表格样式.
表格类,斑马纹在ie8中无法正常使用.响应式表格table-responsive.注意使用overflow-y:hidden的响应式表格.
5,表单样式.
水平表单,内联表单,表单控件,输入控件(type="text" form-control),复选框和单选按钮,下拉菜单,控件大小设置,帮助块,输入组.设置输入组时使用span,表单的交互性
6,图像,缩略图,多媒体.
图标字体,图像,响应式图像(img-responsive),图像形状.媒体对象(.media),缩略图(.thumbnail+caption(标题)),Glyphico图标字体,对辅助设备隐藏aria-hidden="true"
7,按钮和按钮组,按钮使用buttion标签.
按钮大小,按钮状态,不要对a标签使用disabled属性.按钮组(水平按钮组,垂直按钮组),按钮工具栏,按钮javascript(button.js)
8,导航系统.
标准导航元素,下拉菜单,拆分下拉菜单,上拉式菜单,注意为上拉菜单留出空间.导航栏(navbar),导航标题品牌,导航栏中的链接,文本,按钮和表单,面包屑导航(breadcrumb)和分页.列表组.
9,实用工具,助手类(上下文).
更改(文本)颜色,用span和div包围文本,图标字体,布局.*-left/.*-right,居中的块需明确设置宽度.显示和隐藏(.sr-only),打印类,响应式嵌入(embed-responsive embed-responsive-16by9)
10,javascript插件.
使用压缩的完整script文件,设置插件(jquery)属性,数据属性data-*需要h5声明,可以关闭数据属性,事件,名称无冲突.noConflict,bootstrap不支持第三方库.
11,模态窗口.
提供事件,元素的事件从relateTarget属性访问,模态的打开方式,模态窗口的大小,布局(非固定),动态更改内容,event.relatedTarget.
12,附加导航,选项卡,滚动监听.
Affix插件,date-spy,可以设置偏移.选项卡,data-*属性,切换事件,用nav包围导航列表滚动监听data-spy="scroll"
13,弹出框提示和工具提示.
Tooltip,Popover,工具提示选项,方法,事件,弹出框选项,方法,事件.
14,过渡,按钮,警告框和进度条.
transition(不支持ie8,9),button,alert,在警告框中有链接,不是所有的浏览器都支持进度条.progress,还有条纹,堆叠进度条.
15,折叠插件和折叠面板.
collapse,根据ID折叠,不能折叠段落或者表格单元,分垂直和水平折叠,折叠选项,折叠事件,面板panel-collapse,使用折叠面板导航.
16,轮播.
carousel-indicators,轮播指标,幻灯片,控件.轮播选项,方法,事件.
17,自定义bootstrap.
自定义css文件,
18,提高bootstrap的可访问性.
不要忘记tabindex
19,使用Less和Sass.
变量,混入,运算符,嵌套,逻辑和循环.
20,进一步应用bootstrap,LayoutIt
21,在WordPress中应用
22,用第三方附加程序扩展.
插件:灯箱bootstrap-lightbox,照片库bootstrap-Image-Gallery通知和对话框Bootbox,bootstrapGrowl,Web表单助手Bootstrap Form Helper(要钱)
23,漂亮的Bootstrap网站,Built with Bootstrap.
总结完,打完收工!
//标准的bootstrap网页需要添加bootstrap的css,响应式类和jquery插件,注意位置和引用即可.
//主要用到网格系统,其他的只需要添加类即可,简单.只讲讲需要注意的东西
这一行声明编码,同时可以防止被入侵.
Normalize.css不仅仅是css重置,解决了一些浏览器兼容问题.
1,网格.
移动优先,网站是特性添加
网格三分法,黄金分割,网格系统分割点:768,992,1200,使用.container类,分为响应式固定和非固定宽度容器,行模板使用row类.
响应式列重置,清楚浮动使用Clearfix,列的偏移,排序和嵌套
超小型设备默认跨越12列.
2,标签,徽章,凹陷,面板,超大(label,badge,well,panel,Jumbotron).
面板注脚不会改变颜色
3,排版,字体.
small类,text-hide类,页眉,正文,lead类,元素对齐,不要在导航元素上使用.pull-*类,text-nowrap忽略水平环绕和滚动.文本元素转换,代码块.引用语,列表,缩略语,地址
4,表格样式.
表格类,斑马纹在ie8中无法正常使用.响应式表格table-responsive.注意使用overflow-y:hidden的响应式表格.
5,表单样式.
水平表单,内联表单,表单控件,输入控件(type="text" form-control),复选框和单选按钮,下拉菜单,控件大小设置,帮助块,输入组.设置输入组时使用span,表单的交互性
6,图像,缩略图,多媒体.
图标字体,图像,响应式图像(img-responsive),图像形状.媒体对象(.media),缩略图(.thumbnail+caption(标题)),Glyphico图标字体,对辅助设备隐藏aria-hidden="true"
7,按钮和按钮组,按钮使用buttion标签.
按钮大小,按钮状态,不要对a标签使用disabled属性.按钮组(水平按钮组,垂直按钮组),按钮工具栏,按钮javascript(button.js)
8,导航系统.
标准导航元素,下拉菜单,拆分下拉菜单,上拉式菜单,注意为上拉菜单留出空间.导航栏(navbar),导航标题品牌,导航栏中的链接,文本,按钮和表单,面包屑导航(breadcrumb)和分页.列表组.
9,实用工具,助手类(上下文).
更改(文本)颜色,用span和div包围文本,图标字体,布局.*-left/.*-right,居中的块需明确设置宽度.显示和隐藏(.sr-only),打印类,响应式嵌入(embed-responsive embed-responsive-16by9)
10,javascript插件.
使用压缩的完整script文件,设置插件(jquery)属性,数据属性data-*需要h5声明,可以关闭数据属性,事件,名称无冲突.noConflict,bootstrap不支持第三方库.
11,模态窗口.
提供事件,元素的事件从relateTarget属性访问,模态的打开方式,模态窗口的大小,布局(非固定),动态更改内容,event.relatedTarget.
12,附加导航,选项卡,滚动监听.
Affix插件,date-spy,可以设置偏移.选项卡,data-*属性,切换事件,用nav包围导航列表滚动监听data-spy="scroll"
13,弹出框提示和工具提示.
Tooltip,Popover,工具提示选项,方法,事件,弹出框选项,方法,事件.
14,过渡,按钮,警告框和进度条.
transition(不支持ie8,9),button,alert,在警告框中有链接,不是所有的浏览器都支持进度条.progress,还有条纹,堆叠进度条.
15,折叠插件和折叠面板.
collapse,根据ID折叠,不能折叠段落或者表格单元,分垂直和水平折叠,折叠选项,折叠事件,面板panel-collapse,使用折叠面板导航.
16,轮播.
carousel-indicators,轮播指标,幻灯片,控件.轮播选项,方法,事件.
17,自定义bootstrap.
自定义css文件,
18,提高bootstrap的可访问性.
不要忘记tabindex
19,使用Less和Sass.
变量,混入,运算符,嵌套,逻辑和循环.
20,进一步应用bootstrap,LayoutIt
21,在WordPress中应用
22,用第三方附加程序扩展.
插件:灯箱bootstrap-lightbox,照片库bootstrap-Image-Gallery通知和对话框Bootbox,bootstrapGrowl,Web表单助手Bootstrap Form Helper(要钱)
23,漂亮的Bootstrap网站,Built with Bootstrap.
总结完,打完收工!