Bootstrap（三）

接下来学习bootstrap的样式设计

bootstrap的排版
标题，页面主题，强调，缩略语，地址，引用，列表，描述，代码

bootstrap的默认字体大小为14px，行高为20px，并且这些书信会直接赋予 body 中的元素和所有段落元素。
p 元素还被设置了0.5倍行高（10px）的底部外边距，通过添加.lead类也可以让段落突出显示

对于需要强调的元素，框架优化了加粗，斜体，对齐，颜色强调
strong之类的我感觉原本就有，也算不上是什么强化吧，倒是颜色之类的，确实是它框架自己定义的新类，比如text-warning是黄色的警告，

缩略语
是使用abbr，当鼠标悬停在缩写或者缩写词上才会显示出完整的内容

<p>1<abbr title="abbreviation">abbr</abbr></p>

其实这个也不一定要是用在缩略语上，悬浮内容和原内容可以毫无关系，这个title的形式有点类似图片悬浮显示的文字

地址
bootstrap框架为地址 address 标签设置了增强样式，相关的地址信息会以常规的形式呈现在页面上

引用
很奇怪，我用本地导入css的时候pull-right无法正常使用，float-right可以，但换成cdn在线导入的时候，情况就完全相反了

列表
列表也有增强样式，包括无序列表，有序列表，无样式列表和内联列表
Bootstrap人均增强样式，可除了几个新的类，我真的目前为止感受不到增强，什么叫增强我都不理解，是变粗变大了还是怎么的。

描述
描述是html5新增的功能标签，是对列表标签的功能延伸。同样的，框架也对他进行了功能增强
主要包括默认样式和水平描述样式两类
这次确实有点不一样了，是增强了dt dd的形式感

后面我发现也许是谷歌浏览器的不兼容问题，有几个试验只能在我的搜狗浏览器上实现，谷歌倒了。

---

后续：谷歌还没有倒下，我更新了一下谷歌的版本，升级到了5.25的版本，谷歌再次成功兼容了，谷歌还在输出，只不过升级了谷歌浏览器，我的其他插件又需要重新下载对应的版本了，挺烦的

---

代码
代码就是用来在文本中显示代码样式内容的标签，当然，在bootstrap框架中叒对它进行了功能增强
可以通过 code 或者 pre，后者偏向块，前者偏向一行代码

在pre 中添加类名“prettyprint linenums” 书上说可以增加行号，但是我失败了，网上搜索，都是讲prettyprint一个js插件，我也不是很明白，可能还要下载个文件导进去，书上提都不提，真是差劲。
还有一个添加滚动条的内容，就是添加类名pre-scrollable，这个还是可以实现的，是bootstrap.css的类

bootstrap的表格

bootstrap框架为表格增强了很多表现样式，使她更加简洁美观。

默认样式表格，这个之前遇到过了，就是添加类名table在table标签中，这应该是是css中定义好的
还有斑马纹样式表格，多添加个“table-striped”类即可，也是之前很早就遇到过的
圆角边框样式表格，在table的基础上额外添加一个’table-bordered"的类

表格单元格的高亮显示
鼠标悬停在表格某一行的时候该行会高亮起，方便用户在比较大的表格中看清自己寻找的信息
方法很简单，只需要在table中再增添一个类名：“table-hover”

带行属性样式表格
bootstrap可以为每行单独设定属性样式的表格（虽然我感觉不用这个框架本来css就可以做到）
该功能只需要在需要增加的行属性的 tr 标签内添加情景类（“contextual”）就可以了
情景类包括：success，error，warning，info
4中不同的情景类对应不同的四个背景颜色 绿色，红色，黄色，蓝色
之前也遇到过，也就这样。
学到目前为止，bootstrap给我的感觉是大部分的特殊的功能实现都是依靠预设的类，这些类就是在bootstrap.css中提前写好的。

bootstrap的按钮
和前面的类似，按钮样式的实现方式也是通过添加一个叫做“btn”的类名

这些按钮的样式一次对应的是
btn
btn btn-primary
btn btn-info
btn btn-success
btn btn -warning
btn btn-danger
btn btn-inverse
btn btn-link
使用bootstrap的样式基本上就是这样的形式:""“默认样式类+（默认样式类-xxx）”"

还有按钮的大小样式
.btn-large
.btn-small
.btn-mini 字面上就很好理解，同样的，添加类就完事了

还有特殊样式按钮
有两个，一个是块级按钮，另一个是禁用样式按钮

.btn-block 是块级按钮，使用这个样式按钮会填充整个父级元素
.disable 是禁止样式，使用这个样式后，再把鼠标移动到按钮上面，鼠标会变成禁止符号，按钮也无法下按

bootstrap的图片
关于图片，框架提供了三种图片样式
“.img-rounded”,“img-circle”,".img-polaroid"

第一种是圆角的正方形
第二种是圆形
第三种是正方形

关于样式设计的内容差不多就是这些，用法前面其实已经总结了，就是靠类