1.什么是响应式布局：网页会根据浏览器设备不同自动改变布局；
2.响应式网页必备：
（1）流式布局：float:left/right;
（2）可以改变尺寸图片/文字大小,如%、auto、em;
（3）缺点：不适合大型页面;少用overflow;
3.如何编写响应式网页：常用meta设置横竖屏幕，以及禁止识别电话邮箱<meta name=”format-detection”content=”telephone=no,email=no”/>; 识别电话邮箱<a href=”tel:110”>拨打110</a>，<a href=”mailto:[email protected]”>发送邮箱</a>；清除页面自带的滚动，由内容决定滚动，body,html{height:100%,overflow:hidden},移动端开发时，width值为百分比，高度为px具体值；
（1）声明viewport视口，<meta name="viewport" content="width=device-width">;
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文件：如<link media="(only)screen and (min-width:776px) and (max-width:991px) href="pad.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 关闭；如<button class="close">X</button>; .caret 小三角；如<span class="caret"></span>; .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包裹的元素显示为行内显示并且可以使用栅格布局； 如<div class="form-group has-success/warning/error"> //将其包裹为一组， 后面一个属性表示里面文本框和文字的样式； <label>用户名：</label> <input type="text" class="from-control"> 增加边框效果； </div> input-sm/lg显示文本框的小/大； <span class="help-block"></span> 块显示，字体样式增强； .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）标题：<h#></h#> 或<h#><small>内容</small></h#> ： bootstrap自定义优化了h#，并添加了<small>字体缩小80%；；
2）文本：bootstarp 从重新定位了文本字体的显示大小和样式，增加的了.lead属性表示该文本突出显示并增加上下边距，增加了突出文本的字体大小；
3）文本颜色：
|
.text-muted :提示，浅灰色； .text-primary :主要，蓝色； .text-success :成功，浅绿色； .text-waring :警告，浅黄色； .text-info :通知，浅蓝色； .text-danger :危险，浅红色； <strong>内容</strong> ：加粗强调内容； <em>内容</em> ：斜体强调内容； .hide-text :隐藏文本； <b></b> :用于高亮显示文字； <del></del> :效果与<s></s>标签一样； <ins></ins> :效果与<u></u>标签一样； .text-overflow :截断太长的文本内容； <var>变量</var> ： |
4）文本对齐：
.text-left :文本左对齐；
.text-center :文本居中对齐；
.text-right :文本右对齐；
5）缩略语：即鼠标经过时弹出完整的信息；
<abbr title="完整的信息内容">缩写的信息内容</abbr>；
6）地址：<address></address>:bootstrap增强了该属性，让字体不在斜体显示，字体更小了，里面的a标记自动清除下划线；
7）引用：<blockqueto></blockqueto>增强了该标签的字体，边距和字体颜色等样式；.blockquero-reverse让文本右对齐；
8）列表：
.list-unstyle :清除了列表样式的左缩进，以及(list-style:none);
.list-inline/inline-block :让列表的列表项显示在一行，而不是垂直显示；
<dl/dt/dd> .dl-horizontal :优化了该标签，不在缩进显示；
9）代码：<code>代码</code> ：增强了该标签，让其红色显示；
<pre>内容</pre> ：增强了该标签的显示文字颜色，以及大小；添加了其向应的.pre-scrollable属性，表示添加了滚动条；
（9）组件：
1）下拉菜单：可以为所有对象/导航条/列表添加下拉菜单；
<div class="dropdown"> //下拉菜单的必须的最外层包含框
<a/button data-toggle="dropdown"/>//第一部分的按钮/ 超链接单击时显示下面菜单；
<ul class="dropdown-menu" />//第二部分具体菜单列表；
</div>
|
//第二部分具体菜单列表；默认隐藏的；需要被第一部分激活；在里面添加.pull-left/right使其相对于body左/右对齐，其里面的li添加的.disabled禁用属性；li不包含内容添加.divider表示为分割线；li中添加.dropdown-header,标签将该内容颜色灰色，字体减小实现标题的样式； |
2）按钮组：
<div class="btn-group"> //表示将div里的元素(都有btn属性)显示为按钮组，
<p class="btn btn-default">按钮1(p)</p>
<li class="btn btn-info">按钮2(li)</li>
<a class="btn btn-info">按钮3(a)</a>
<span class="btn btn-info">按钮4(span)</span>
</div>
|
.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");激活按钮； .btn-link: 按钮链接；<a role="button" class="btn"/> <input/button type="button" class="btn">； <button><span class="图标"><span> 按钮</button>：按钮和图标； |
3）导航组件：
|
.nav定义了导航条； .nav-pills/nav-tabs定义了指定了导航条的样式胶囊式/选项卡的样式； .pull-right/left相对body左/右对齐； .nav-jusitified为两端对齐； .nav-stacked表示里面的按钮垂直显示；以及导航组件和下拉菜单的嵌套； |
<ul class="nav nav-pills">
<li class="active"><a href="#p1">首页</a></li> //.active表示被激活状态
<li><a href="#">导航标题1</a></li>
<li><a href="#">导航标题2</a></li>
</ul>
|
激活标签页： <div class="tabbable"> //将导航条和内容放在一个容器里 <ul class="nav nav-tabs"> //定义导航条以及胶囊样式 <li class="active"><a href="#tab1" data-toggle="tab">首页 </a></li> //定义激活按钮 <li><a href="#tab2" data-toggle="tab">微客</a></li> <li><a href="#tab3" data-toggle="tab">微博</a></li> </ul> <div class="tab-content"> //定义激活内容 <div class="tab-pane active" id="tab1"><img class="img-responsive" src="images/1.jpg"></div> // tab-pane定义初始隐藏 <div class="tab-pane fade" id="tab2"><img class="img-responsive" src="images/2.jpg"></div> <div class="tab-pane fade" id="tab3"><img class="img-responsive" src="images/3.jpg"></div> </div> </div> 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)在线：<img src="http://placehold.it/150x350">;自定义灰色大小占位区域; (2)holder.js文件： <img data-src="holder.js/150x350">; 缩微图：即弹性图片； .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）激活标签页：
|
<div class="tabbable"> //将导航条和内容放在一个容器里 <ul class="nav nav-tabs"> //定义导航条以及胶囊样式 <li class="active"><a href="#tab1" data-toggle="tab">首页 </a></li> //定义激活按钮 <li><a href="#tab2" data-toggle="tab">微客</a></li> <li><a href="#tab3" data-toggle="tab">微博</a></li> </ul> <div class="tab-content"> //定义激活内容 <div class="tab-pane active" id="tab1"><img class="img-responsive" src="images/1.jpg"></div> // tab-pane定义初始隐藏 <div class="tab-pane fade" id="tab2"><img class="img-responsive" src="images/2.jpg"></div> <div class="tab-pane fade" id="tab3"><img class="img-responsive" src="images/3.jpg"></div> </div> </div> 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）弹出框： <ANY data-placement="top/bottom/left定义弹出框相对ANY元素弹出的位置" title="这里是弹出框的标题" data-content="这里是弹出框弹出的正文内容"> ；$("ANY").popover()这是js脚本（不需要click）才能触发调用弹出框；on('show/shown/hide/hidden.bs.popover',handder) 分别标签显示前/显示后/隐藏前/隐藏后触发的事件;
（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)分别标签滑动前/滑动后触发的事件;
|