1.响应式图像 .img-responsive
.img-responsive {
display: block; //display 属性设置为 block，以块级元素显示。
height: auto; //设置 height:auto，相关元素的高度取决于浏览器。
max-width: 100%; //设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度
}
.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成椭圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
2.Bootstrap 3 使用 body {margin: 0;} 来移除 body 的边距。
3.使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。
4.通过属性 @link-color 设置全局链接的颜色。
5.容器：<div class="container"> .cotrainter类
...
</div> //内边距（padding）是固定宽度，默认情况下容器是不可嵌套的。
6. 响应式的媒体查询，匹配网格系统
@media (min-width: 768px) {
.container {
width: 750px;
}
7.响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
maximum-scale=1.0user-scalable=no，一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
8. 1.向任何标题添加一个内联子标题，只需要在元素两旁添加 <small>，或者添加 .small类，就能得到一个字号更小的颜色更浅的文本
2.给段落添加强调文本，可以添加 class="lead"，这将得到更大更粗、行高更高的文本
3.HTML 的默认强调标签 <small>（设置文本为父文本大小的 85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）。
4.<abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title属性添加了文本）。为了得到一个更小字体的文本，需添加 .initialism类到 <abbr>。
5.<address> 标签，您可以在网页上显示联系信息。
6. .list-unstyled类 移除默认的列表样式 .list-inline类 将所有列表项放置同一行
7.使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
使用.pre-scrollable类
9.bootstrap表格（.table-responsive 响应式表格）
.table 为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed 让表格更加紧凑
.active .info .success .danger 表格颜色
10.bootstrap表单
1.向父 <form> 元素添加 role="form"。
2.把标签和控件放在一个带有.form-group类的 <div> 中。这是获取最佳间距所必需的。
3.向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
4.<label>标签里面的for，相当于给该标签定义了一个ID属性。
5.复选框写法：<div class="checkbox">
<label>
<input type=checkbox >请打勾
</label>
6.创建一个表单，元素是内联的，向左对齐的，标签是并排的，向 <form>标签添加 .form-inline类。
7.水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，向父 <form> 元素添加.form-horizontal类、向<label>标签添加.control-label类。
11.bootstrap按钮
1.<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>
.btn-lg 让按钮看起来比较大。
.btn-sm 让按钮看起来比较小。
.btn-xs 让按钮看起来特别小。
.btn-block 创建块级的按钮，会横跨父元素的全部宽度。
添加 .active class 来显示它是激活的。
添加 disabled 属性 来显示它是禁用的。
12.bootstrap辅助类
1.文本：
.text-muted "text-muted" 类的文本样式
.text-primary "text-primary" 类的文本样式
.text-success "text-success" 类的文本样式
.text-info "text-info" 类的文本样式
.text-warning "text-warning" 类的文本样式
.text-danger "text-danger" 类的文本样式
2.背景
.bg-primary .bg-success .bg-info .bg-warning .bg-danger 五种样式
3.其他
.pull-left 元素浮动到左边
.pull-right 元素浮动到右边
.center-block 设置元素为 display:block 并居中显示 /*需要自己定义宽度*/
.clearfix 清除浮动******
.show 强制元素显示
.hidden 强制元素隐藏
.sr-only 除了屏幕阅读器外，其他设备上隐藏元素
.sr-only-focusable 与.sr-only类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
.text-hide 将页面元素所包含的文本内容替换为背景图
.close 显示关闭按钮
.caret 显示下拉式功能
13. bootstrap响应式实用工具 http://www.runoob.com/bootstrap/bootstrap-responsive-utilities.html
14.bootstrap 字体图标样式 .glyphicon类
http://www.runoob.com/bootstrap/bootstrap-glyphicons.html
15.bootstrap下拉菜单 .dropdown类
1.父元素：<div class="dropdown">
子元素：<button data-toggle="dropdown"> 只有这样才会出下拉效果
2.<span class="caret"></span>添加下拉小图标 disabled 下拉菜单中的禁用项
3..dropdown-toggel类 .dropdown-menu类代表下拉菜单 .dropdown-menu pull-right类 右侧对齐
.dropdown-header类 向下拉菜单的标签区域添加标题 .dropup类 向上弹出下拉菜单
4. <li role="presentation" class="divider"></li> 下拉菜单中的分割线 .divider类
16.bootstrap输入框组
把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
把该 <span> 放置在 <input> 元素的前面或者后面。
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="twitterhandle">
</div>
17.bootstrap导航元素
1.标签式的导航菜单：.nav nav-tabs类
2.胶囊式的导航菜单：.nav nav-pills类
3.垂直的胶囊式导航菜单：.nav nav-pills nav-stacked类
4.两端对齐的导航菜单：.nav nav-pills nav-justified类
5.禁用任何一个导航项：.disabled类
6.带下拉菜单的胶囊式标签页
1. .tab-content 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改
2. .tab-pane 与 .tab-content 和 data-toggle="tab" (data-toggle="pill")一同使用, 设置标签页对应的内容随标签的切换而更改
http://www.runoob.com/try/try2.php?filename=trybs_ref_comp_nav-toggle&basepath=0
18.bootstrap底部角标分页
1..pagination 添加该 class 来在页面上显示分页。
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
.......
</ul>
2. .disabled, .active 您可以自定义链接，通过使用 .disabled 来定义不可点击的链接，通过使用 .active 来指示当前的页面。
<ul class="pagination">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li>
.......
</ul>
3..pagination-lg, .pagination-sm 使用这些 class 来获取不同大小的项。
<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>
4.左右符号： 左边：« 右边：»
5.翻页：
1..pager 添加该 class 来获得翻页链接。
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
2..previous, .next 使用 class .previous 把链接向左对齐，使用 .next 把链接向右对齐。
<ul class="pager">
<li class="previous"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
3..disabled 添加该 class 来获得一个颜色变淡的外观。
<ul class="pager">
<li class="previous disabled"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
4.左指向箭头：&larr 右指向箭头： &rarr
6.各种类用处：.pager 一个简单的分页链接，链接居中对齐。
.previous .pager 中上一页的按钮样式，左对齐
.next .pager 中下一页的按钮样式，右对齐
.disabled 禁用链接
.pagination 分页链接
.pagination-lg 更大尺寸的分页链接
.pagination-sm 更小尺寸的分页链接
.disabled 禁用链接
.active 当前访问页面链接样式
19.bootstrap <label>标签类 .label类
可以使用修饰的classlabel-default、label-primary、label-success、label-info、label-warning、label-danger 来改变标签的外观
20.bootstrap徽章（badges）消息数量显示
.badge类 <span class="badge pull-right">3</span>消息 一般和pull-right一块使用
21.bootstrap超大屏幕（.jumbotron类） 页面标题：（.page-header类）
22.bootstrap缩略图
1.在图像周围添加带有 class .thumbnail 的 <a> 标签。
这会添加四个像素的内边距（padding）和一个灰色的边框。
当鼠标悬停在图像上时，会动画显示出图像的轮廓。
2.把带有 class .thumbnail 的 <a> 标签改为 <div>。
在该 <div> 内，您可以添加任何您想要添加的东西。由于这是一个 <div>，我们可以使用默认的基于 span 的命名规则来调整大小。
如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。
23.bootstrap警告（.alert类）
1.可取消的警告
通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。同时向上面的 <div> class 添加可选的 .alert-dismissable。
添加一个关闭按钮。
2.链接中的警告框
通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
使用 .alert-link（就是添加一个链接样式） 实体类来快速提供带有匹配颜色的链接。
24.bootstrap进度条（.progress类）
1.基本的进度条
添加一个带有 class .progress 的 <div>。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
添加一个带有百分比表示的宽度的 style 属性，例如 style="width: 60%"; 表示进度条在 60% 的位置。
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span class="sr-only">40% 完成</span>
</div>
</div>
2.带条纹的进度条：添加一个带有 class .progress 和 .progress-striped 的 <div>。
3.动画的进度条:添加一个带有 class .progress 和 .progress-striped 的 <div>。同时添加 class .active。
4.堆叠的进度条：把多个进度条放在相同的 .progress 类中即可实现堆叠。
25.bootstrap多媒体对象（media object）图片加文字
http://www.runoob.com/bootstrap/bootstrap-media-object.html
26.bootstrap列表组
1.向元素 <ul> 添加 class .list-group。
2.向 <li> 添加 class .list-group-item。
3.向列表组添加徽章：在<li>中添加<span class="badge"></span>
4.列表组链接：<a href="#" class="list-group-item active">111</a>
向链接里面添加内容： <h4 class="list-group-item-heading">111</h4>
27.Bootstrap 面板（Panels）
1.<div class="panel panel-default">
<div class="panel-body">
这是一个基本的面板
</div>
</div>
2.http://www.runoob.com/bootstrap/bootstrap-panels.html
28.Bootstrap Well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建Well，只需要简单地把内容放在带有 class .well 的 <div> 中即可。下面的实例演示了一个默认的 Well：
<div class="well well-lg">您好，我在大的 Well 中！</div>
<div class="well well-sm">您好，我在小的 Well 中！</div>
29.创建一个基本的网页：http://www.runoob.com/bootstrap/bootstrap-make-a-website.html