《Bootstrap用户手册-设计响应式网站》读书笔记-2
第2章比较系统全面的讲解bootstrap预定义的css样式
排版
字体
这里提到了默认字体栈为"Helvetica Neue",Helvetica,Arial,sans-serif;，这些字体也是主流系统默认支持的标准字体，页面正文的font-size是14px，line-height是20px，所有段落的margin-bottom是10px。这里也可以看出来bootstrap是没有对中文做出支持的，当然这个也能理解，这里查看了一些资料，有人建议使用Verdana字体，font-size改为13px。
标题
h1-h6都定义了样式，h1是36px高，h6是12px高，想给这些标晚上再添加行内级的子标题，可以使用small标签。
强调段落
强调某个段落的文本，可以使用.lead类，这会导致段落文本稍稍变大、变细，行高也变高，这种样式一般用于文章的前几段。
强调内容
正文也可以使用small标签，使用后文本会缩小到原大小的85%。
粗体
可以使用strong标签。
斜体
使用em标签。
这里要注意的重点是粗体与斜体不使用b与i标签，是因为HTML5中b标签的语义是仅仅突出显示某些词或短语，但不代表它们更重要，比如一些关键词或人名。而i标签主要用于表示不同的语言、技术术语、内部对话等。w3c链接
强调相关的类
提供了除strong与em标签之外的一些类用做强调，这些类应用给p与span标签：.muted、.text-warning、.text-error、.text-info、text-success。
缩写词：使用abbr标签，用来标记缩写词，添加.initialism类可以得到稍小一些的文本。
地址：使用address标签，可以让屏幕阅读器和搜索引擎找到地址和电话号码、电子邮件地址。
引用：使用blockquote标签，可以标记引用或名人名言的文本块，为了保证效果里面还可以在必要时添加br换行，用p分段，bootstrap会默认缩进引用的文本，标记引用来源可以用small标签，人名可以用cite标签，引用右对齐可以添加.pull-right类。
列表
bootstrap支持了有序列表、无序列表和定义列表。
- 无序列表是组合ul与li标签使用，没有特定顺序所以默认样式在列表前用圆点标识，可以在对应的ul标签使用unstyled去除前面的圆点；
- 有序列表是组合ol与li标签使用，默认样式使用数字来标识列表；
- 定义列表没有块级的li元素，每个列表项由dt与dd标签组成，dt代表“definition term”词条，还可以使用dl来加标题，让词条和解释并排显示，只需要给dl标签加上.dl-horizontal类；
代码
可以直接使用code或者pre标签，行内代码使用code标签，代码段使用pre标签，代码中如果存在<>括号的话，使用<和>来替换。
表格
基本上表格元素如下代码模板
<table class="table"> <caption>...</caption> <thead> <tr> <th>...</th> </th>...</th> </tr> </thead> <tbody> <tr> <td>...</td> <td>...</td> </tr> </tbody> </table>
在一个完整的表格的table标签里加入.table类即可以完成bootstrap对表格的基本效果，当然除了.table之外，bootstrap还提供了以下表格风格选择：
- 带条纹背景的表格 .table-striped
- 带边框的表格 .table-bordered
- 带悬停高亮的表格 .table-hover
- 紧缩的表格 .table-condensed
表格行的类
- 表成功或积极的情形 .success 绿色
- 表危险或消极的情形 .error 红色
- 表示警告 .warning 黄色
- 用于代替默认样式 .info 蓝色
表单
算是这一章的重中之中的内容了，这个同第一章的响应式布局一样，稍迟些单独用一章来进行描述。
图片
与图片相关的类有3个，.img-rounded为图片添加border-radius:6px，有圆角的框；.img-circle通过添加border-radius:500px使图片变成圆形；.img-polaroid会添加一点内边距和一条灰色边框。
图标
bootstrap附带了一张140个图标的sprite image，这些图标可用于按钮、链接、导航和表单字段，这些图标由GLYPHICONS提供，这些图标正常情况下是收费的，经过bootstrap team同GLYPHICONS协商，大家才可以免费使用这些图标，为表谢意，bootstrap团队希望在适合的情况下注明图标GLYPHICONS来源与给出链接。
其实这里不止GLYPHICONS是伟大的，bootstrap同样也是，如果是我个人的项目，一定要把这两个都醒目的体现出来。
使用的时候给i标签添加.icon-为前缀的类即可，详细的图标类名可以查看这里。
