Bootstrap CSS
其实，学习过程中，如果不应用的话很容易忘记，那就得从头开始再来一次，那样挺浪费时间。写个记录记一下今天学习了什么，知识点在网上是和充足的，在资源丰富的互联网时代，但是记录就是提醒自己曾经干过什么，解决过什么问题，用了什么。
在很多招聘中，都有会一些前端框架的熟练要求，所以，该复习的要复习，该学习的该学习。
1）注意 是id=container 而不是class
<div id="container">
<h1>the morning<small>good</small></h1>
</div>
2）<small></small>为副标题，注意放在标签<h1>之内。
设定小文本 (设置为父文本的 85% 大小)，新闻栏目可以使用。
3）<mark></mark>带有背景色的强调
4）为了给段落添加强调文本，则可以添加 class="lead"，这将得到更大更粗、 行高更高的文本
5）<abbr title="World Wide Web">WWW</abbr>
给www添加一个解释说明，www为一个缩写词语，title为解释文本。
6）<address> 标签，可以在网页上显示联系信息。（使用<br>换行）
7）引用名人名言
<blockquote>
这是一个带有源标题的引用。
<small>Someone famous in <cite title="Source Title">
Source Title</cite></small>
</blockquote>
8）<ul class="list-inline">让无序列表的样式为 inline
9）移动设备优先是 Bootstrap 3 的最显著的变化
<img src="..." class="img-responsive" alt="响应式图像">
img-responsive 让图片变得更加响应式
10）避免跨浏览器的不一致，Bootstrap 使用Normalize.css来建立跨浏览器的一致性.
11）Bootstrap的网格系统：
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
工作原理
● 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
● 使用行来创建列的水平组。
● 内容应该放置在列内，且唯有列可以是行的直接子元素。
● 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
● 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
● 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
12）媒体查询是针对于平板电脑、台式电。
xs是超小设备，sm是平板电脑，md台式电脑，lg是太台式电脑
@media (min-width: @screen-sm-min) { ... }
@media (min-width: @screen-md-min) { ... }
@media (min-width: @screen-lg-min) { ... }
在小设备浏览时无法确定网格显示的位置，可以使用 .clearfix class和 响应式实用工具来解决
网格系统需要多练习、
13）Bootstrap显示代码
<code></code>单行使用
<pre></pre>多行使用
标签使用<>代替尖角符号
14）表格，表格的class类好多，但是有个需要注意的是就是active和danger以及success和info是使用在<tr>标签中的。
<div class="table-responsive">
<table class="table">
.........
</table>
</div>
可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，将看不到任何的差别。
15）表单
表单有垂直，内联，水平三种。
垂直或者基本表单：<form role="form"></form>
内联：<form class="form-inline" role="form"></>
水平：<form class="form-horizontal" role="form"></>
对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。
表单帮助文本（可以用作注释用）
<span class="help-block">
一个较长的帮助文本块，超过一行，需要扩展到下一行
</span>
16）按钮
按钮样式用于a，input，button
任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观
17）图片样式
.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
18）清除浮动 clearfix
19）下拉列表框的表示小三角形箭头 caret
<label>下拉列表框<span class="caret"></span></label>
