less; sass: css预处理：可以直接使用.css，也可以修改.less，生成定制化的css
CDN: 服务，使用这个效果会更好。theme一般不引入，jquery一般在js之前引入。
使用bower管理less，css，js，字体。
bootstrap可以单独引入某个js
如果自己编译less，使用自带的gruntfile会更好。
JavaScript Source Map 详解：http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
grunt命令：grunt dist，重新生成dist文件，其他命令都不常用。
已安装好； 其他的命令，深入研究时才用。
bootlint：只有对bootstrap的页面有用，有一定的局限性。自己学习bootstrap时，可以使用它
javascript:(function(){var s=document.createElement("script");s.onload=function(){bootlint.showLintReportForCurrentDocument([]);};s.src="https://maxcdn.bootstrapcdn.com/bootlint/latest/bootlint.min.js";document.body.appendChild(s)})();
全局css
移动设备上，可以通过设置禁用缩放功能。
container和container-fluid的区别：
前者是固定宽度且响应式布局，后者是100%宽度
栅格系统
container的子元素是row，row的子元素是col
媒体查询：bootstrap使用了media query。
@media (min- @screen-sm-min) { ... }
@media (min- @screen-sm-min) and (max- @screen-sm-max) { ... }
xs超小，手机；sm小，平板；md中等，桌面，；lg大桌面
将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局
列偏移：.col-md-offset-*
嵌套列
列排序：.col-md-push-*, .col-md-pull-*d
less mixin和变量 不知道该怎么用？没看懂。
实例精选：
role无障碍阅读，所包含的值有：http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/
jumbotron：超大屏幕
» >>
page-header:页面最顶部
thumbnails：缩略图
badges：徽章
img data-src：延迟加载
nav-pills：加样式
tabindex=-1 tab无效
sr-only：隐藏标签
data-toggle：让目标对象表现某一类控件
nav-tabs nav-pills：导航的不同样式
well：内容凹陷显示
css细节
排版
h1内可以包含<small>，用来标记副标题；或者.h1 和 .small
.lead 让段落突出显示
高亮<mark>, 删除<del>, 无用<s>, 插入<ins>, 下划线<u>, 小号文本<small>父子体的85%, 着重<strong>, 斜体<em>,
对齐：text-left, left-center, text-right, text-justify, text-nowrap
大小写：text-lowercase, text-uppercase, text-capitalize
缩略：基本<attr> 添加title属性；首字母.initialism,
<a href="mailto:#">
引用
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>
//有引用源
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>
//引用右对齐
<blockquote class="blockquote-reverse"> ... </blockquote>
无样式列表：.list-unstyled 只针对直接子元素；内联列表（所有元素放置在同一行）：.line-inline；水平列表的描述：.dl-horizontal（可以让 <dl> 内的短语及其描述排在一行）
代码
内联代码<code>; 用户输入<kbd>; 代码块<pre> .pre-scrollable（设置 max-height 为 350px ，并在垂直方向展示滚动条）。 code pre都需要转义。 变量<var>；输出<samp>
表格
table.table 基本样式
条纹状.table-striped, 边框.table-bordered, 鼠标悬停.table-hover, 紧缩.table-condensed, 响应.table-responsive
状态类 .active .success .info .warning .danger:通过这些状态类可以为行或单元格设置颜色
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
表单
form -- div.form-group -- label input.form-control
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
</form>
.form-control 100%
.help-block .checkbox
内联表单：form.form-inline 一定要添加label，使用.sr-only隐藏
.input-group 给input元素加前后的标示
水平排列的表单：form.form-horizontal label和input水平排列
.control-label 在form-inline 和 form-horizontal 下有效果；常加在label标签上。
支持html5类型的输入控件
多选和单选框，禁止选择，可以添加disabled，这样label也会被禁止点击。.checkbox-inline, .radio-inline单选或者多选的控件排在一行
下拉列表：multiple 可以选择多项
静态控件：静态字符串与label放在同一行，静态.form-control-static
焦点状态：看不到效果；禁用状态：disabled
只读状态：readonly
校验状态：给表单控件的父元素添加如下类，父元素可以是.form-control
.has-warning .has-feedback .has-error .has-feedback .has-success .has-feedback 这三种状态会给.control-label, .form-control, .help-block添加样式
控制尺寸：
高度：.input-lg, .input-sm 水平排列的表单组的尺寸：通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。
宽度：.col-lg-* .col-sm-*
按钮
为<a><button><input>加.btn 即可使用提供的样式
导航和导航条组件 只 支持button
a用做button使用，需要添加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%，块级元素)
激活：.active
图片
响应式：.img-responsive 让图片在父元素中更好的缩放
居中：.center-block 辅助类
形状：.img-rounded, .img-circle, .img-thumbnail
辅助类
文字颜色：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger
背景色: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger
关闭按钮：.close
<button class='close'><span>×</span></button>
三角符号：.caret
左右浮动：.pull-left, .pull-right
内容块居中：.center-block
清除浮动：.clearfix
.text-hide 文本内容不显示，只显示背景效果，不知道什么时候使用
阶段总结
<abbr>:简称，class='initialism'，把内容大写，看官网上的一些说明，会全面详细些。
<blockquote></blockquote> <cite></cite> <small class='pull-right'></small>：向右浮动
<dl class='dl-horizontal'>：对齐方式发生变化
<code>一个</code> <pre>一段</pre>：<转为< >转为>
使用Google prettify可以使代码更漂亮：但是还存在一个问题。
<table class='table'>
使用过程中碰到的问题
使用标签页：
问题：home.active的情况下，home tab没有突出显示，跟没active的状态一样。
原因：自己给tab加了背景色，覆盖了bootstrap.css的颜色变化
办法：自己添加背景色时，权重一定不要大于bootstrap.css的active权重。
添加disabled属性，需要是button或者a，如果是input的话，又会潜在的问题。