一、入门准备 二、整体架构 A.整体架构 1.CSS12栅格系统:以规则的网格阵列来指导和规范网页中的版面布已有以及信息分布 2.基础布局组件,如排版、代码、表格、按扭、表单等,可以随意应用在任何元素上,包括顶部 的CSS组件内部也可以任意使用这些基础组件 3.jQuery 4.响应式设计:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整,包括弹性网格和布局、图片、CSS媒体查询(media query)的使用等 5.CSS组件 6.JavaScript插件 B.栅格系统 1.列偏移:使用.col-md-offset-*形式的样式就可以将列偏移到右侧 2.列嵌套:在一个列里再声明一个或者多个行(row),内部所嵌套的row的宽度为100%时就是当前外部列的宽度 3.列排序:通过.col-md-push-*和.col-md-pull-*一实现 4.响应式栅格:中型屏幕md,超小型xs、小型sm、大型lg 5.使用clearfix清除浮动 C.CSS组件架构的设计思想 1.CSS组件AO模式:A表示Append,即“附加”的意思;O表示Overwrite,即“重写”的意思 2.CSS组件包括:基础样式、颜色样式、尺寸样式、状态样式、特殊元素样式、并列元素样式、嵌套子元素样式、动画样式 D.JavaScript插件架构 1.HTML布局规则:基于元素自定义属性的布局规则,比如使用类似于data-target的自定义属性等 2.JavaScrtip实现步骤:所有的插件都遵循jQuery插件开发的标准步骤,所有的事件都保持了统一标准 3.插件调用方法:所有插件的使用方式都非常类似,可以是HTML声明式,也可以是调用式(JavaScript代码),并且支持多种回调和可选参数 三、CSS布局 A.概述 1.移动:<meta name="viewport" content="width=device-width,initial-scale=1.0"/>,添加user-scalable=no可以禁用其缩放(zooming)功能 2.响应式图片:.img-responsive样式 3.Normalize.css,用于将不同浏览器的默认CSS特性设置为统一效果 的CSS库 4.居中容器:.container B.基础排版 1.样式.h1-6没有有margin,h1有,h1 .small显示稍小一点的字体,灰色 2.<p>有额外的margin-bottom 3.相让一个段落突出显示,可以使用.lead样式,增大字体大小、粗细、行间距和margin-bottom 4.默认强调文本:small、strong、em、cite 5.对齐方式:text-left、text-center、text-right、text-justify 6.在abbr元素上实现了缩略词功能,initialism可以让字体小点 7.address元素主要是行间距和底部margin 8.blockquote定义了样式,并且可以定义.pull-right 9.列表:去点列表.list-unstyled;内联列表.list-inline;水平定义列表.dl-horizontal C.代码 1.code单选内联代码,kbd用户输入代码,pre多行代码块 2.pre元素上应用.pre-scrollable可以控制最大高度为340px,并滚动 D.表格 1.基础样式:.table 2.隔行加背景色样式:.table-striped 3.带边框的单元格:.table-bordered 4.鼠标悬停高亮的表格:.table-hover 5.紧凑型表格:.table-condensed 6.行级元素样式,可在tr、td上使用:
7.响应式表格,在.table外部包装.table-responsive样式的div即可创建,在小于768px时水平滚动 E.表单 1.基础表单:只对表单内的fieldset、legend、label标签进行了设定,对margin、padding、border进行了细化设置,如果在select、input、textarea元素上应用了.form-control样式,显示的宽度会变成100%,并且placeholder的颜色变灰 2.内联表单:在form元素上应用.form-inline样式,此样式只能在大于768px以上 3.label包住radio或checkbox,外部再用.checkbox或.radio样式,label可使用.checkbox-inline或.radio-inline内联样式 4.fieldset上应用disabled属性,则内部控件都会禁用,除了第一个legend内的控件 5.验证提示状态:.has-warning、.has-error、.has-success,在form-group平缓的div元素上应用 6.对应小图标:has-feedback 7.控件大小:.input-lg、.input-sm 8.块级帮助提示:.help-block F.按扭 1.按扭样式:.btn、.btn-default、.btn-primary、.btn-success、.btn-info、.btn-warning、.btn-danger、.btn-link 2.按扭大小:.btn-lg、.btn-sm、.btn-xs、.btn-block 3.可支持:a、button、input元素 4.活动状态:.active 5.禁用状态:disabled属性或.disabled样式,样式不禁止按扭的默认行为 G.图像 1.3种风格效果:.img-rounded、.img-circle、img-thumbnail H.辅助样式 1.文本样式:.text-muted、.text-primary、.text-success、.text-info、.text-warning、.text-danger 2.文本背景样式:.bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger 3.辅助图标:.close关闭图标、.caret向下箭头 4.内容浮动:.pull-right、pull-left、center-block、clearfix 5.隐藏与显示:.show、.hidden(不占文档流)、.invisible 四、CSS组件 A.小图标 1.所有的icon样式都以glyphicon-开头,由http:///提供,使用时必须同时使用两个样式,.glyphicon和.glyphicon-* 2.新版本使用了CSS3中的@font-face特性 B.下拉菜单 C.按钮组 1.只需要在多个按扭外部使用一个窗口元素(比如div),然后在容器元素上应用 .btn-group样式即可 2.按扭工具栏,在多个分组外再放一个大的容器元素,然后在容器元素上应用 .btn-toolbar样式 3.按扭组上可以应用.btn-group-lg、.btn-group-sm、.btn-group-xs样式 4.垂直分组使用.btn-group-vertical样式 5.在一个.btn-group容器上,如果使用了.btn-group-justified样式,则所有的按扭会100%充满容器元素,自适应的功能 D.按扭下拉菜单 1.利用data-toggle=""来实现下拉菜单 2.样式.dropup向上的下拉菜单 E.输入框组 1.输入框组,.input-group样式,输入框前后显示的个性元素上可以使用.input-group-addon 2.避免在select元素上使用addon功能,不要将.form-group和.input-group混用 F.导航 1.使用.nav:
2.使用.nav-justified自适应导航 G.导航条 1.使用样式:.navbar
2.使用.navbar-brand样式给内部元素,表示该元素是导航条的名称 3.要增强可访问性,要给每个导航条加上role="navigation" 4.样式.navbar-form导航条中的表彰样式,指定浮动:.navbar-left和.navbar-right 5.其他样式:.navbar-btn(button)、.navbar-text(文本)、.navbar-link(普通链接) 6.底部和顶部固定:.navbar-fixed-top、.navbar-fixed-bottom 7.样式.navbar-static-top,表示设置一个100%充满父元素窗口的导航条,主要是去掉导航条的圆角样式 H.面包屑导航
I.分页导航 1.使用样式:.pagination 2.支持大小:.pagination-lg和.pagination-sm J.标签 1.使用样式:.label 2.支持多种颜色,与button类似 K.徽章
L.大屏幕展播
M.页面标题
N.缩略图 1.使用样式:.thumbnail 2.样式:.caption,可配合图文展示,在此样式元素内部添加任意风格元素 O.警告框 1.使用样式:.alert 2.属性值data-dismiss="alert",警告框的关闭,需要配合js使用 3.在.alert样式上应用一个.alert-dismissable样式即可实现一个可关闭的警告框 4.警告框也有多种颜色样式 5.使用.alert-link样式高亮警告框中的链接 P.进度条 1.样式.progress用于设置进度条的容器样式 2.样式.progress-bar用于限制进度条的进度 3.样式.progress-bar-xxx,提供鑫种颜色 4.样式.progress-striped条纹样式,同时应用.active可出现动画样式 5.多个.progress-bar-xxx可以堆叠 Q.媒体对象
R.列表组 1.基本样式:.list-group、.list-group-item 2.用a标签配合.active样式可以达到高亮选中的效果 3.样式.list-group-item-xxx支持多种颜色 4.自定义列表组:.list-group-item-heading、.list-group-item-text S.面板 1.基础面板:.panel、.panel-default(.panel-xxx多彩)、panel-body 2.头尾样式:.panel-heading、.panel-footer 3.panel-body有内边距,要放置无边距的表格只需要将table和panel-body并列放置就行,不要放在body里面 T.洼地 1.样式.well与.jumbotron类似,多了边框 2.也提供大小设置:.well-lg、.well-sm U.主题 五、JavaScript插件 A.动画过度效果 1.默认情况下,以下组件使用了动画过渡效果:
B.模态弹窗 1.弹窗组件使用了3层div容器元素,分别应用了modal、modal-dialog、modal-content样式,在modal-content内包括了弹窗的头(header)、内容(body)、尾(footer),分别对应3个样式:modal-header、modal-body、modal-footer 2.声明式用法:data-toogle=和data-target= 3.js用法:$('#id').modal() 4.支持四种事件订阅:show.bs.modal、shown.bs.modal、hide.bs.modal、hidden.bs.modal C.下拉菜单 1.一般在导航条(navbar)和选项卡(tab)上实现 2.首先navbar的父容器上要应用.navbar样式,其次顶级ul块上要应用.nav和.navbar-nav样式 3.使用规则:
4.js用法:$('#id').dropdown();,也包含事件订阅等功能,与modal类似 D.滚动侦测 1.滚动侦测(ScrollSpy)插件是根据滚动的位置自动更新导航条中相应的导航项 2.用法:
3.js用法:$('滚动侦测容器选择符').scrollspy({target:'#某单容器的选择器'}); E.选项卡 1.满足要求:
F.提示框 1.默认没有声明式的用法 2.data-toggle="tooltip" G.弹出框
H.警告框插件 1.关闭按扭需要dismiss="alert",配合data-target="xxx",可以在外部关闭 2.JS用法:$(xxx).alert()或$(xxx).alert('close'); I.按扭
J.折叠 1.data-toggle="collapse"配合data-target=""使用,折叠区域使用collapse和in样式 2.默认隐藏折叠区域,触发元素上添加一个.collapsed样式,去掉折叠区域的in样式 3.JS用法:$(xxx).collapse(); K.旋转轮播 L.自动定位浮标 1.Affix的效果就是浮动的左右菜单 2.使用data-spy="affix",包括affix-top、affix-bottom,配合data-offset使用 六、实战:扩展现有组件 七、实战:Win8磁贴组件开发 九、第三方扩展 1.Font Awesome,.icon-xxx相关样式 2.BSIE扩展,支持IE8以下浏览器 3.Buttons扩展,基于Sass和Compass构建的CSS按扭样式库 4.DateTime Picker插件 5.Cikonss,纯CSS实现的响应式Icon插件,兼容IE8+ 6.Flat UI,基于Bootstrap进行了扁平化风格改造 7.Bootstrap Switch,用于模拟iPhone开关效果 8.Messager,弹框(alert)组件 https://github.com/zhangyue0503/html5js/tree/master/shenrulijiebootstrap |
|