一、排版

1.标题

元素	字体大小	计算比例
h1	36px	14px * 2.60
h2	30px	14px * 2.15
h3	24px	14px * 1.70
h4	18px	14px * 1.25
h5	14px	14px * 1
h6	12px	14px * 0.85

注意：

h1h2h3	margin-top：20px margin-bottom：10px
h4h5h6	margin-top：10px margin-bottom：10px

2.段落

1.Bootstrap中，为了让段落p元素之间具有一定的间距，便于用户阅读文本，特意设置了p元素的margin值（默认情况之下，p元素具有一个上下外边距，并且保持一个行高的高度）：

p {
 margin: 0 0 10px;
}

3.强调粗体斜体

 小
 粗
 斜体

1.突出强调.lead (

内容会变大

)

2.强调文本

.text-muted 效果

.text-primary效果

.text-success效果

.text-info效果

.text-warning效果

.text-danger效果

4.文本对齐风格

左对齐text-left
居中text-center
右对齐text-right
两端对齐text-justify

左对齐text-left

居中text-center

右对齐text-right

两端对齐text-justify

5.列表

去点去序号：.list-unstyled
内联一排：.list-inline
水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名.dl-horizonta给定义列表实现水平显示效果。屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式：
1、将dt设置了一个左浮动，并且设置了一个宽度为160px
2、将dd设置一个margin-left的值为180px，达到水平的效果
3、当标题宽度超过160px时，将会显示三个省略号

6.代码

1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码

<pre>大块显示，原格式不变。代码太多，控制代码块的大小。添加类名“.pre-scrollable”，控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

3、使用<kbd></kbd>来显示用户输入代码

7.表格

类名	样式
.table	基础表格
.table-striped	斑马线表格
.table-bordered	带边框的表格
.table-hover	鼠标悬停高亮的表格
.table-condensed	紧凑型表格
.table-responsive	响应式表格

注意:
.table-responsive|响应式表格 当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。

用法：
<div class="table-responsive">
<table class="table table-bordered">
   …
</table>
</div>

表格<tr>的背景颜色

类名	描述
.active	表示当前活动的信息
.success	表示成功或者正确的行为
.info	表示中立的信息或行为
.warning	表示警告，需要特别注意
.danger	表示危险或者可能是错误的行为

Bootstrap学习(一)