CSS3实现的响应式布局

引进插件（安装包） 用于响应式布局开发（媒体查询@meta）

css3分栏布局:只有webkit可以用

1.column - width  栏目宽度       column - width:250px
2.column - count 栏目列数        column - count :4  
3.column-gap 栏目距离             column-gap :10px
4.column - rule 栏目间隔线        column - rule :1px solid #ccc
响应式布局：可以适应不同终端   如：app和web
检测响应式布局的在线工具：Responsivator：http://johnpolacek    .github.io/Responsivator/
专门为iPhone4写的：
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
响应式api：http://www.cnblogs.com/asqq/archive/2012/04/13/2445912.html
兼容以及写法：http://baike.baidu.com/link?url=EsJ2qe-qOmO5t4yoqFgssdCV06Dn_dCyN6-9xcZSst-VXDBqMlej4X-Ztf28pRiK4GHscpMxni2RXFb28UnDFK
1.<link rel="stylesheet" type="text/css" href="indexa" media="screen and (min-width:800px)"/><link rel"stylesheet" type="text/css" href = "indexb" madia = "screen and (min-width:600px) and (max-width:800px)"/>
2.横屏 和 竖屏
<link rel="stylesheet" media = "all and (orientation:portrait)" href = "indexa".css/>    横屏
<link rel="stylesheet" media = "all and (orientation:landscape)" href = "indexb".css/>   竖屏
3.媒体查询
style内部引入媒体查询
@media screen and （min-width:400px） and (max-width:500px){.box{margin:0 auto;}
}
style外部引入：
@import  url("indexc.css")   screen and （min-width:400px） and (max-width:500px);
4.media Type：媒体类型
（1）all：所有设备
（2）screen：电脑屏幕，平板电脑，智能手机
（3）print：打印机
（4）braille    盲文触觉设备
（5）embossed     盲文打印机
（6）projection    打印预览
（7）speech  “听觉类似的媒体类型”
（8）tty        不适用像素的设备
（9）tv   电视
复制代码

自学bootstrap：

实现PC和手机完全自适应的网站：
API：http://www.promocodewatch.com/http://www.justalkcloud.com/http://www.felink.com.cn/http://www.4miao.net/
一：bootstrap中各类的含义：
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
.col-md-push-* 是将某元素向后推若干列
.col-md-pull-* 是将某元素向前拉若干列
.col-md-offset-* 类可以将列向右侧偏移
<small> 标签或赋予 .small 类：标记副标题
.lead 类可以让段落突出显示，（文字变大）
<mark>标签：类似于.lead的作用
<del> 标签：被删除的文本，（文字中间会带一条线）
<s> 标签：对于没用的文本（类似于del标签）
<ins> 标签：额外插入的文本使用
<u> 标签：为文本添加下划线
<strong>标签：类似于 font-weight 的使用
<em>标签：用斜体强调一段文本
<b> 用于高亮单词或短语，不带有任何着重的意味；
<i> 标签主要用于发言、技术词汇等。
文本对齐方式类：
text-left
text-center
text-right
text-justify
text-nowrap
改变大小写
text-lowercase：全部小写
text-uppercase：全部大写
text-capitalize：首字母大写
<abbr>标签：缩略语
.initialism 类，为缩略语添加，可以让 font-size 变得稍微小些。
<address>地址标签
<blockquote> 中即可表现为引用样式。对于直接引用，我们建议用 <p> 标签
.blockquote-reverse 类可以让引用呈现内容右对齐的效果
list-unstyled：无样式的列表
.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。
<code> 标签包裹内联样式的代码片段
<kbd> 标签标记用户通过键盘输入的内容
例如：<code>&lt;section&gt;</code>
多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。
例如：<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
.pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。
<samp> 标签来标记程序输出的内容。
表格（都加在table上）
.table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线
.table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半
.table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式
.table-bordered 类为表格和其中的每个单元格增加边框
.table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应
状态类：
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
.sr-only 类来隐藏的文本
.table-responsive :       .table 元素包裹在 .table-responsive元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。（加在table外的DIV 上）
.form-inline变成内联表单，会成一行变为自适应。
表单：一定要添加 label 标签
role = “form”
form-group：每一组
.form-control：单独的表单控件会被自动赋予一些全局样式
label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
.form-inline:将表单变成内联表单，会变成一行，只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
.sr-only 类将其隐藏
水平排列的表单
.form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局
checkbox：多选
radio：单选
disabled ：禁止
.checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
对于标记了 multiple 属性的 <select> 控件来说，默认显示多选项。.form-control-static ：如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可
readonly ：只读
aria-label属性    http://accessibilityunion.org/archives/808
正常情况下，会在表单里给input组件指定对应的label，当用户tab到输入框时，读屏软件就会读出相应label里的文本。
aria-labelledby属性    http://accessibilityunion.org/archives/808
当想要的标签文本已在其他元素中存在时，可以将其值为该元素的id。
.has-feedback 类添加正确的图标
控件尺寸：
.input-lg 类似的类可以为控件设置高度.col-lg-* 类似的类可以为控件设置宽度
aria-describedby：与表单控件相关联的帮助文本；aria-describedby属性的表单控件关联，这将确保使用辅助技术- 如屏幕阅读器 - 的用户获取控件焦点或进入控制时显示这个帮助文本。
按钮 ：
<aclass="btn btn-default"href="#"role="button">Link</a>
<buttonclass="btn btn-default"type="submit">Button</button>
<inputclass="btn btn-default"type="button"value="Input">
<inputclass="btn btn-default"type="submit"value="Submit">
注意：如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。
按钮中的预定样式：
btn-default
btn-primary
btn-success
btn-info
btn-warning
btn-danger
btn-link
按钮大小：.btn-lg、.btn-sm 或 .btn-xs
.btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
状态类：
.active 类：表现出与原来样式同样外观的时候添加
:active ：当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）
pointer-events: none 来禁止 <a> 元素作为链接的原始功能
图片：
img-responsive 类可以让图片支持响应式布局
.center-block：让使用了 .img-responsive 类的图片水平居中
图片形状
img-rounded
img-circle
img-thumbnail
情境文本颜色
text-muted
text-primary
ext-success
text-info
text-warning
text-danger
情境背景色
bg-primary
bg-success
bg-info
bg-warningbg-danger
关闭按钮：
<buttontype="button"class="close"aria-label="Close"><spanaria-hidden="true">&times;</span></button>
三角符号：
<spanclass="caret"></span>
快速浮动
pull-left
pull-right
清除浮动
通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）
让内容块居中
display: block
显示：show
隐藏：hidden，invisible，sr-only
display属性：
类组 CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;
alert 组件中所包含的图标是用来表示这是一条错误消息的，通过添加额外的 .sr-only 文本就可以让辅助设备知道这条提示所要表达的意思了
下拉菜单
dropdown    向下弹出
dropup      向上弹出
dropdown-menu-right： 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。
dropdown-menu-left：左对齐
dropdown-header：为下拉菜单添加标题
divider：为下拉菜单添加分割线：<lirole="separator"class="divider"></li>
btn-toolbar：把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。
尺寸
btn-group-lg
btn-group-sm
btn-group-xs
btn-group-vertical：垂直排列
display: table-cell：可以使两个按钮之间的边框叠加在了一起
btn-group.btn-group-justified：只须将一系列 .btn 元素包裹到 .btn-group.btn-group-justified 中即可。
input-group-addon
标签页
.nav-tabs： 依赖于.nav 基类。
<ulclass="nav nav-tabs"><lirole="presentation"class="active"><ahref="#">Home</a></li><lirole="presentation"><ahref="#">Profile</a></li><lirole="presentation"><ahref="#">Messages</a></li></ul>
nav-pills：胶囊式标签页
nav-stacked：胶囊是标签页也是可以垂直方向堆叠排列的
nav-justified：两端对齐导航，在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式
navbar-brand：a标签，包裹图片
navbar-form：将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态。 使用对齐选项可以规定其在导航条上出现的位置。
navbar-left：类似于左浮动
navbar-text：文本
navbar-link：让链接有正确的默认颜色和反色设置。
navbar-left ：
navbar-right：
navbar-fixed-top：可以让导航条固定在顶部
navbar-fixed-bottom： 可以让导航条固定在底部
navbar-static-top：创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失
navbar-inverse：可以改变导航条的外观
pagination：分页
pagination-lg：分页的尺寸
pagination-sm ：分页的尺寸
翻页
pager：链接居中对齐
previous：链接向两端对齐（左）
next：链接向两端对齐（右）
徽章
badge：徽章，<spanclass="badge">42</span>
巨幕：如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，请把此组件放在所有 .container 元素的外面，并在组件内部添加一个 .container 元素。
jumbotron：巨幕
thumbnail：缩略图
警告框：.alert
进度条媒体对象
media
media-left
media-middle
media-object
列表组：给列表组加入徽章组件，它会自动被放在右边。
list-group
list-group-item
面板：
panel
panel-headingjs插件
禁用全部功能：
$(document).off('.data-api')
禁用指定的功能：
$(document).off('.alert.data-api')
阻止模态框的展示：
$('#myModal').on('show.bs.modal',function(e){if(!data)returne.preventDefault()// 阻止模态框的展示})
弹出当前bootstrap的版本：
alert（ $.fn.tooltip.Constructor.VERSION ）
未对禁用 JavaScript 的浏览器提供补救措施
在script标签下添加 <noscript> 标签向你的用户进行解释<noscript> 当前浏览器不支持bootstrap版本 </noscript> 
transitionEnd 事件:事件发生在过渡完成之后    
模态框的可选尺寸
分别为两个添加class，来控制模态框的尺寸
class="modal fade bs-example-modal-lg（sm）"
class="modal-dialog modal-lg（sm）"
调用模态框：
$('#myModal').modal('show')
点击其他位置模态框不消失：
$('#myModal').modal('backdrop')
下拉菜单的事件
即将显示时候弹出
$('#myDropdown').on('show.bs.dropdown',function(){alert(11111)
})
显示之后弹出
$('#myDropdown').on('shown.bs.dropdown', function () {alert(11111)
})
显示时候弹出
$('#myDropdown').on('hide.bs.dropdown', function () {alert(11111)
})
隐藏时候弹出
$('#myDropdown').on('hidden.bs.dropdown', function () {alert(11111)
})
滚动监听：标签页：
导航切换内容：导航切换内容，外加下拉菜单：方法：
$('#myTabs a[href="#profile"]').tab('show')// 选择名字$('#myTabs a:first').tab('show')// 选择第一个$('#myTabs a:last').tab('show')// 选择最后一个$('#myTabs li:eq(2) a').tab('show')// 选择指定的
增加淡入淡出效果：<divclass="tab-content"><divrole="tabpanel"class="tab-pane fade in active"id="home">...</div><divrole="tabpanel"class="tab-pane fade"id="profile">...</div><divrole="tabpanel"class="tab-pane fade"id="messages">...</div><divrole="tabpanel"class="tab-pane fade"id="settings">...</div></div>
事件：
1.show.bs.tab
2.shown.bs.tab
3.hide.bs.tab
4.hidden.bs.tab
$('a[data-toggle="tab"]').on('shown.bs.tab',function(e){（e.target// newly activated tabe.relatedTarget// previous active tab）alert(111111111)
})
工具提示：
****注：title的增加和去掉会显示不同的内容（增加时会显示title，去掉时会显示网址）data-placement="top"是控制方向的data-ainimation=“flase”去掉动画效果 
<div class="container"><p class="muted" style="margin-bottom:0 ;">欢迎来到<a id="mydata" href="#" data-toggle="tooltip" title="" data-placement="bottom" data-original-title= "www.baidu.com" >极客学院</a></p>
</div>
必须手动调用：
$('[data-toggle="tooltip"]').tooltip()
// $("#mydata").tooltip("show")弹出框解决Bootstrap下拉菜单中的超链接不可点击：
http://hovertree.com/h/bjaf/ccmstwqe.htm
PC端：
$(document).on("click",".dropdown-toggle",function(){
if($(this).attr(‘href’)) window.location = $(this).attr(‘href’);
});
APP端：在手机端浏览的时候，我们希望点击菜单时不跳转，而是bootstrap默认的行为（出现下拉菜单）
$(document).on("click",".dropdown-toggle",function(){
if( $(window).width() > 767 )
if($(this).attr(‘href’)) window.location = $(this).attr(‘href’);
});
以上代码的意思是，在设备宽度超过767像素的时候，点击菜单才会跳转，而小于等于767像素时并不执行语句。视频的自适应
http://www.imlgm.com/254.html
http://zhidao.baidu.com/link?url=C12UMlWnkdO0gfYJs_ia1z1XIAVykqpJvm-lPYjk-PaJ7MVbC_YWH87ALc0ZoeHthNZ71XCAAUg2pHBtwdGM2pECVwz_FrwFPh_VryyWPNe超酷Bootstrap 3 隐藏滑动侧边栏菜单
http://www.jq22.com/jquery-info13004复制代码