Bootstrap（二）排版

1.标题
bootstrap和普通的HTML页面一样，都是使用h1到h6。为了让非标题元素和标题使用相同的样式定义了.h1~.h6六个类名

<div class="h1">bootstrap标题一</div>

此外bootstrap使用了small标签来制作副标题

<h1>bootstrap标题一<small>副标题</small></h1>
<div class="h1">标题<span class="small">副标题</span></div>

2.段落（正文文本）
强调内容
如果想让一个段落p突出显示，可以通过添加类名.lead实现，其作用就是增大文本字号，加粗文本对行高和margin也做了相应处理

<p>普通文本</p>
<p class="lead">突出文本</p>

文本对齐风格
bootstrap通过定义四个类名来控制文本对齐风格
.text-left：左对齐
.text-right：右对齐
.text-center：居中对齐
.text-justify：两端对齐

<p class="text-center">居中<p>

3.列表
普通列表
ul>li 和我们平时使用的一样
有序列表
ol>li 用法和我们平时用法一样
去点列表
在列表中添加类名.list-unstyled去除默认的列表项目符号同时将左边内距清0

<ul class="list-unstyled">
	<li>列表项</li>
</ul>

4.代码
code显示单行内联代码
pre显示多行代码
kbd显示用户输入代码

<code>&lt;code&gt;</code>
<pre>&lt;pre&gt;</pre>
<kbd>&lt;kbd&gt;</lbd>

注：可以在pre添加类名.pre-scrollable，就可以控制代码区域最大高度为340px，一旦超出Y轴就会显示滚动条
5.表格
基础表格
给表格设置了margin-bottom：20px以及设置单元内距
在thead底部设置了一个2px的浅灰实线
每个单元格顶部设置了一个1px的浅灰实线
在table上添加类名.table来实现bootstrap基础表格

<table class="table">
.....
</table>

斑马线表格
在bootstrap表格基础上添加类名.table-striped

<table class="table table-striped">
.....
</table>

带边框表格
在基础表格上添加类名.table-bordered

<table class="table table-bordered">
.....
</table>

鼠标悬浮高亮表格
在基础表格上添加类名.table-hover

<table class="table table-hover">
.....
</table>

注：鼠标悬浮高亮表格可以和其他表格混合使用，只需给表格添加类名.table-hover
紧凑型表格
在基础表格上添加类名.table-condensed

<table class="table table-condensed">
.....
</table>

响应式表格
在基础表格上添加类名.table-responsive
当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条

<table class="table table-responsive">
.....
</table>