bootstrap
bootstrap:简易模版：
<meta http-equiv='X-UA-Compatible' content='IE=edge'> //让IE浏览器运行最新的渲染模式
//<meta name='renderer' content='webkit'>让部分国产浏览器默认采用高速模式渲染页面
<meta name='viewport' content='width=device-width,initail-scale=1'> //为确保适当的绘制和触屏缩放 <link href='bootstrap.min.css' ref='stylesheet'> <!--[if lt IE9]> //ie9以下浏览器引入 html5shiv.js 和 respond.js 以支持媒体查询media query和html5 <script src='http:cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js> <script src='http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js'> <![endif]--> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script>
禁用响应式布局：1 移除viewport标签，2 设置.container的width值覆盖默认值 3栅格布局，替换掉.col-md-*
支持情况：IE8-11；Android、IOS
bootstrap3.是移动设备优先
1.bootstrap需要为页面内容和栅格系统包裹一个 .container容器。
A类：.container用于固定宽度并支持响应式布局的容器。
B类： .container-fluid 用于100%宽度，占据全部适口的viewport 的容器
2 栅格系统中，媒体查询media query 创建的关键的分界点阈值。
超小屏幕，.col-xs-手机 小与768px ，bootstrap默认
小屏幕，.col-sm-平板 大于768px @media (min-width:@screen-sm-min){}
中等屏幕，.col-md-桌面显示器,大于992px @media (min-width:@screen-md-min){}
大屏幕，.col-lg-大桌面显示器，大于等于1200px @media(min-width:@screen-lg-min){}
@media (min-width:@screen-md-min) and @media (max-width:@screen-md-max){}
.col-md-offset-4将.col-md-4向右偏移了4个列
.col-md-push-3:将col-md-3推到前面，
.col-md-pull-9：将col-md-9拉到后面，
预定义样式：.h1 .h2 .small .lead让段落更突出 .text-left .text-center .text-right .text-justify .text-nowrap 文本对其类 .text-lowercase .text-uppercase .text-capitalize首字母大写 文本大小写 <abbr title="'>文本缩略语 <blockquote>默认引用 .list-unstyle .list-inline
表格：.table .table-striped条纹样式 .table-hover .table-bordered .table-condensed padding减半 单元格设置颜色.active .success .info .warning .danger
响应式表格：table要包裹在.table-responsive中。<div class="table-responsive"><table class="table">
表单
role='form' .form-group .form-control .form-inline内连样式表单中label要设置.sr-only .form-horizontal水平排列表单
表单类型：type= text password datetime datetime-local date month time week number email url search tel color
多选框 .checkbox .radio .disabled禁止 .checkbox-inline .radio-inline
.multiple 允许同时选多个
.disabled 禁止用
.readonly 只读属性
按钮<button>、链接<a>.btn .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link .btn-lg .btn-sm .btn-xs .active 激活状态
图片 支持响应式：.img-responsive
<img src="..." class="img-responsive" alt="Responsive image">
.img-rounded 圆角图片 .img-circle圆形图片 .img-thumbnail边框图片
关闭按钮 .close <button type='button' class='close' ><span aria-hidden='true'>×</span>
三角符号 .caret <span class='caret'></span>
快速浮动：.pull-left .pull-right
清除浮动： .clearfix
.show .hidden
.visible-xs-block/inline/inline-block
.hidden-md-block
app典型弹性布局：关键元素高度和位置不变，只有容器元素在做伸缩变换。开发原则：文字流式fluid，控件弹性flexible，图片等比缩放scale
