1.什么是响应式布局:网页会根据浏览器设备不同自动改变布局;
2.响应式网页必备:
(1)流式布局:float:left/right;
(2)可以改变尺寸图片/文字大小,如%、auto、em;
(3)缺点:不适合大型页面;少用overflow;
3.如何编写响应式网页:常用meta设置横竖屏幕,以及禁止识别电话邮箱; 识别电话邮箱拨打110,发送邮箱;清除页面自带的滚动,由内容决定滚动,body,html{height:100%,overflow:hidden},移动端开发时,width值为百分比,高度为px具体值;
(1)声明viewport视口,;
width=device-width;表示宽度是设备屏幕的宽度;
initial-scale=1.0;表示初始化缩放比例,与最小缩放比例值一致;
minimum-scale=1.0;表示最小缩放比较;
maxiumum-scale=1.0;表示最大缩放比较;
user-scalable=no;表示用户是否可以调整缩放比例;
注意:可以在页面加载前先js获取设备的宽度,然后确定一个在所有设备下的分辨率即目标设备宽度,来代替(1)的声明:
(function(){
var w=window.screen.width; //获取设备屏幕的宽度
var tarW=320; //确定一个目标分辨率,即在所有设备下都能是这个宽
var scale=w/tarW;
var meta=document.createElement(‘meta’);
meta.name=”viewport”;
meta.content=’initial-scale=’+scale+’,minimum-scale=’+scale+’,maxiumum-scale=’+scale+’,user-scalable=no’;
document.head.appendChild(meta);
})();
注意:这种方法获取设备宽度确定一个目标分辨率之后,页面中元素的宽可以不用百分比了,直接用px取值去以320px的分辨率宽为设备宽的参考标准;
(2)使用流式布局:float:left;
(3)所有容器/图片/文字使用相对尺寸:如%,em等;文字大小不能使用px;网页文字默认大小16px;如可以定义图片的宽度为max-width:100%;
(4)最重要的原则:使用css3 media query;
(5)将aiticle,aside,footer,header,hgroup,nav,section,details,figure变成快级元素block了;
(6)将canvas,audio,video显示为行内块元素inline-block;修改的a的下划线none;
(7).container容器是固定宽度并支持响应式布局,.container-fluid为类似100%屏幕宽度的容器;.row必须包含在以上2种容器之一中,其直接子元素必须是.col;
(8)bootstrap:将全局字体默认14px大小,行高1.428;
4.CSS3媒体查询技术:包括查询浏览网页的设备(screen(pc/phone/pad),print,tv等),
设备的类型(尺寸/对比度等);两种方式:
(1)执行不同的外部css文件:如;
(2)根据媒体查询的结果执行不同的CSS片段:@media screen (min-) and (max-widht:x)/(orientation:landscape/portrait横/竖屏){//css样式};
5.bootstrap全局样式:
(1)按钮:.btn 按钮的样式,以下样式需要在这个样式基础上下;
.btn-default 白底黑字按钮; .btn-danger/warning/success/info/primary 按钮的五种颜色; .btn-lg/sm/xs 大、中、小按钮; .btn-block 块级一整行的按钮; .active/disabled 激活/禁用按钮; .btn-group 行内块; .btn-group-vertical ; .btn-toolbar ; .btn-navbar icon-bar(块级); .btn-inverse ; 小工具: .close 关闭;如; .caret 小三角;如; .pull-left/right 向左/右浮动; .center-block 网页居中; .clearfix 清除浮动; .show/hidden 显示/隐藏; .invisible 可见; |
(2)图片:
.img-rounded 圆角图片; .img-circle 圆形图片; .img-thumbnail 缩略图片/镶边的效果; .img-reponsive 响应式图片; .img-polaroid ; |
(3)文本:
.text-danger/success/warning/info/primary .bg- danger/success/warning/info/primary 文本的五种背景颜色; .text-left/right/center/justify 文本的对齐方式; .text-uppercase/lowercase 文本转大写/小写; .text-capitalize :首字母大写; . |
(4)表单:
.checkbox_inline .radio_inline表示将单/复选按钮由默认的换行显示改成在一行内显示;增加了表单元素样式显示包括字体,大小,颜色对齐等效果; .form-inline 为form添加了属性表示在屏幕大于768时会显示在一行,否则就让里面的每个元素显示为块级; .form-horizontal在屏幕大于768时将其表单元素; .form-group包裹的元素显示为行内显示并且可以使用栅格布局; 如 后面一个属性表示里面文本框和文字的样式; 用户名: from-control"> 增加边框效果; input-sm/lg显示文本框的小/大; help-block"> 块显示,字体样式增强; .form-actions :清除浮动;添加样式; .form-search : .form-horizontal :
|
(5)屏幕分类:大型屏幕lg(>=1200),桌面通用屏幕md(1200>x>992),平板 sm(991>x>768),手机xs(x<767);
(6)表格:
.table 该属性优化了表格,否则显示原来的样式;让thead增加了下边框; 以及增加了上下边距;以下属性需要在该属性下才叠加显示; .table-borderd 带边框的表格; .table-striped 隔行变色的表格; .table-hover 带悬停表格,背景变成浅灰色; .table-responsive 响应式表格;父元素上;xs屏幕下回显示一个滚动条; 表格的情景样式,添加在tr、td上: .table-condensed : .active 鼠标经过时变浅灰色; .success 行/列为成功色; .warning 行/列为警告色; .danger 行/列为危险色; .table-condensed :table上属性让表格更加紧凑; . |
(7)栅格系统:
1)布局的三种方式:table/css+div/bootstrap栅格布局;
2)栅格系统:
.container 固定栅格最外层容器;通常960px页面居中显示,如果不 写就是满页面的宽度。 .container-fluid 为流式栅格与不写一样满页面宽度; .row 其次,行一个可以允许有多列,前后插入了table清除浮动; .col 再次,默认一行平分12等份列; .col-lg/md/sm/xs-1/2.. 表示不同屏幕下列的占比等份及适用性问题;将决定是水平(堆叠)显示还是换行显示;当其中一列的内容远比其他列内容超出显得格格不如时,需要在这列后额外添加一列.clearfix .visible-xs/.visible-xs-block;表式可以让这列与其前面的列显示一行,其他后面的列换行显示;列嵌套在列col中在嵌套行和列. .col-lg/md/sm/xs-offset-1/2.. 表示不同屏幕下的列右偏移等份; .hidden/visible-xs/sm/md/lg 仅在某xs/sm/md/lg屏幕下隐藏/显示该列格; .col-lg/md/sm/xs-pull/push-1/2 表示在特定屏幕下pull向左拉几格/push向右推几格从而实现列的换位; 列.col里面的的嵌套行(.row)列(.col); |
(8)版式:
1)标题:
2)文本:bootstarp 从重新定位了文本字体的显示大小和样式,增加的了.lead属性表示该文本突出显示并增加上下边距,增加了突出文本的字体大小;
3)文本颜色:
.text-muted :提示,浅灰色; .text-primary :主要,蓝色; .text-success :成功,浅绿色; .text-waring :警告,浅黄色; .text-info :通知,浅蓝色; .text-danger :危险,浅红色; 内容 :加粗强调内容; 内容 :斜体强调内容; .hide-text :隐藏文本; :用于高亮显示文字;
:效果与标签一样; .text-overflow :截断太长的文本内容; 变量 : |
4)文本对齐:
.text-left :文本左对齐;
.text-center :文本居中对齐;
.text-right :文本右对齐;
5)缩略语:即鼠标经过时弹出完整的信息;
"完整的信息内容">缩写的信息内容;
6)地址::bootstrap增强了该属性,让字体不在斜体显示,字体更小了,里面的a标记自动清除下划线;
7)引用:
8)列表:
.list-unstyle :清除了列表样式的左缩进,以及(list-style:none);
.list-inline/inline-block :让列表的列表项显示在一行,而不是垂直显示;
.dl-horizontal :优化了该标签,不在缩进显示;
9)代码:代码
:增强了该标签,让其红色显示;
内容 :增强了该标签的显示文字颜色,以及大小;添加了其向应的.pre-scrollable属性,表示添加了滚动条;
(9)组件:
1)下拉菜单:可以为所有对象/导航条/列表添加下拉菜单;
data-toggle="dropdown"/>//第一部分的按钮/ 超链接单击时显示下面菜单; dropdown-menu
" />//第二部分具体菜单列表;
//第二部分具体菜单列表;默认隐藏的;需要被第一部分激活;在里面添加.pull-left/right使其相对于body左/右对齐,其里面的li添加的.disabled禁用属性;li不包含内容添加.divider表示为分割线;li中添加.dropdown-header,标签将该内容颜色灰色,字体减小实现标题的样式; |
2)按钮组:
.btn-group表示将div里的元素(都有btn属性)显示为按钮组; .btn-toolbar将多个.btn-group包裹在一起形成按钮导航条; .btn-group默认是水平显示;按钮组;data-toggle="buttons"; .btn-group-vertical表示将里面的按钮垂直显示; .btn-group-justified表示将里面的按钮水平两端对齐; .btn-group-lg/sm/xs表示按钮组的大中小号以及默认大写; .dropup在添加按钮组的元素中添加属性,表示将按钮向上弹出(默认是向下弹出); .clearfix:在前后插入table,清除both浮动效果; data-toggle="button"或$().button()/$().button("toggle");激活按钮; :按钮和图标; |
3)导航组件:
.nav定义了导航条; .nav-pills/nav-tabs定义了指定了导航条的样式胶囊式/选项卡的样式; .pull-right/left相对body左/右对齐; .nav-jusitified为两端对齐; .nav-stacked表示里面的按钮垂直显示;以及导航组件和下拉菜单的嵌套; |
nav nav-pills
">
激活标签页: //定义导航条以及胶囊样式 //定义激活按钮 data-toggle="tab"或$().tab('show')表示调用tab标签页插件 |
4)导航条:;.navbar, 包裹1个/多个导航组件(.nav);
.navbar-default:定义导航条的默认样式多一个下边界线; .navbar-brand:定义导航条里的元素的为网址广告/标题,禁用,字体凸显的效果; .navbar-header:定义导航条里的元素头部组; .navbar-nav/link:定义导航条的里面的导航条组/超链接标签的样式; .navbar-right/left:定义导航条里面的元素的位置; .navbar-form/btn/text:定义导航条里面的form标签/按钮标签/文本内容样式; .form-group:定义表单from里面的一个组; .form-control:定义表单里面文本框的样式; .navbar-fixed-top/bottom:定义了导航条固定在顶/底部; .navbar-inverse:定义了导航条背景样式: .navbar-static-top:定义了导航条左内边距; |
5)面板屑:
.breadcrumd:定义了ul/ol里面的元素水平显示,'/'分割每个li; .pagination:定义了ul/ol里面的元素实现水平分页按钮的效果; .pagination-lg/xs:定义了ul/ol分页的大小号;默认是中号; .pager:定义了ul/ol里面的活动的上一页和下一页,可以定义固定在上/下页位于最左/最右侧,通过为其相应的上下也元素添加.previous/.next; .label/.label-5种颜色:定义了像标签一页的样式/标签背景颜色;.badge定义了徽 章样式和标签样式差不多; |
6)缩微图:
图像占位符: (1)在线: (2)holder.js文件: 缩微图:即弹性图片; .thumbnails /.thumbnail :分别定义组/单个的缩微图,使得图片响应式,占父元素的100%宽,且带内边框,鼠标悬浮时高亮显示; |
7)警告框:
.alert/.alert-5种颜色:表示以下内容为警告框/及警告框的背景字体颜色; .alert-dismissable该属性表示支持兼容各种浏览器; .close: 关闭按钮的样式;且a必须href="#";如果是button必须type="button"; .data-dismiss="alert":定义关闭按钮的关闭的行为,alert表示关闭当前alert;或在js中$().alert("close")也可定义关警告框行为;on('close/closen.bs.alert',handder)分别标签在警告框关闭前/关闭后触发的事件;
.alert-link:在警告框里的链接必须添加该属性实现跳转; |
8)进度条:
.progress:定义父元素的为整个精度条的外框; .progress-striped:定义父元素上表示子元素的斑马条纹颜色; .active:定义父元素上表示子元素的背景是活动的; .progress-bar:定义子元素上表示进度,通过style中width=n%;表示其进度; .progress-bar-5种颜色:定义子元素的背景颜色; |
9)媒体:
.media:定义在外包含框中,实现图文混排;也可定义正文的主体内容; .media-object:定义了里面的元素为媒体/图片对象; .media-body:定义了里面元素为正文部分; .media-heading:定义了正文的标题; .media-list:媒体列表,包含多个.media; .jumbotron:大屏幕区域,带宽/高灰色背景,常用与凸显标题或广告区域; .page-header:网页标题区域; |
10)列表组:
.list-group:优化了ol/ul列表组; .list-group-item:优化了li列表项字体,行间距; .list-group-item-heading/text:定义列表标题/内容; |
11)面板:
.panel: 定义面板组; .panel-group:折叠面板组,包含多个面板; .panel-5种颜色: 定义面板组的颜色; .panel-heading:定义面板子元素标题; .panel-body:定义面板子元素正文部分; .panel-title:定义面板.panel-heading/body/footer子元素的子元素预定义标题; .panel-footer:定义面板子元素的角部分; 表格/列表嵌套在面板中;.well/.panel都可以作为容器,且效果相识,但是.well使用范围比较窄;.well-sm/lg; |
12)文本框的修饰:
.input-group: 将input和span提示标签作为一个组; .input-group-lg/sm:定义这个组为大小号; .input-group-addon:在span中添加这个属性表示将span的内容与input显示一行且衔接捆绑在一起;.input-group-btn添加在span中在span里添加一个按钮标签,就可以将按钮标签与input捆绑一行了,如果不是添加按钮标签,是添加下拉菜单也可组合起来并和input在一行显示; .form-control:添加在input中修饰文本框的样式; .input-block-level:表示显示为block,且border-box; |
13)字体图标:.glyphicon .glyphicon-search/等图标样式;
7.BOOSTRAP插件:
(1)定义模态框:通过a标签的href="#id"或button的data-target="#id"跳转到模态对话框,a/button的data-toggle="modal" 定义跳转的结果是模态对话框;
.modal:定义模态对话框的最外层容器; .modal-dialog:定义是模态对话框; .modal-content:定义模态对话框的内容; .modal-header/body/footer:定义模态对话框的头/主体/角部分; .data-dismiss="modal":定义关闭当前模态对话框的行为; |
(2)调用模态对话框:按钮或a中添加data-toggle="modal" 并通过href或data-
target确定要调用的模态对话框的id;或$elem1.click(function($().modal
(['toggle'/'show/'hidden'])))脚本调用;
(3)模态对话打开关闭触发的事件:
on('show/shown/hide/hidden.bs.modal',handder)分别标签在模态对话框打开前/打开后/关闭前/关闭后触发的事件;
(4)调用下拉菜单:data-toggle="dropdown"或$().dropdown(['toggle']);
(5)下拉菜单显示隐藏触发的事件:
on('show/shown/hide/hidden.bs.dropdown',handder)分别标签在下拉菜单显示前/显示后/隐藏前/隐藏后触发的事件;
(6)滚动监听:根据滚动的位置自动更新导航条的位置;data-spy="scroll"或$().scrollspy()启动滚动监听;data-target="#id"或href="#id"指定滚动的标签元素;data-offset="30"表示滚动的偏移位置范围内就会触发滚动;也可指定为body里的滚动监听;on('activate.bs.scrollspy',handder)表示滚动到某个元素时触发的事件;
(7)激活标签页:
//定义导航条以及胶囊样式 //定义激活按钮 data-toggle="tab"或$().tab('show')表示调用tab标签页插件; on('show/shown.bs.dropdown',handder) 分别当前标签之前一个标签/当前标签页触发的事件; |
(8)提示工具;即鼠标经过时弹出的提示信息;
标签的的title="需要提示的内容",然后 $().mouseover($().tooltip
("show"))即可,为该标签添加data-placement="top/right/left/bottom"可以定义显示的位置;on('show/shown/hide/hidden.bs.tooltip',handder)分别标签显示前/显示后/隐藏前/隐藏后触发的事件;
(9)弹出框:
(10)折叠面板:on('show/shown/hide/hidden.bs.collapse',handder) 分别折叠面板显示前/显示后/隐藏前/隐藏后触发的事件;通过data-toggle="collapse" 且data-target="#id"或$().collapse(["toggle"])触发折叠面的显示隐藏事件;
(11)轮播插件:
.carousel :定义轮播插件的外框有三部分组成; .carousel-indicators:第一部分定义轮播的图标容器: .carousel-inner:第二部分定义轮播的项目容器; .item: 定义轮播项目包含图片和文字内容; .carousel-caption:定义项目里文字的标题,内容部分; .carousel-control:第三部分定义轮播的控制按钮;.left/.right定义其在图片的左边还是右边; data-slide="prev/next":定义了调用轮播向前/后滑动;或通过data-slide-top="0/1/2":定义图标滑动顺序,样式默认是小圆,调用轮播;或通过$().carousel(["prev/next"]); on('slide/slid.bs.carousel',handder)分别标签滑动前/滑动后触发的事件;
|