1.1 标题
<!--Bootstrap中的标题-->
<h1>Bootstrap标题一</h1>
<h2>Bootstrap标题二</h2>
<h3>Bootstrap标题三</h3>
<h4>Bootstrap标题四</h4>
<h5>Bootstrap标题五</h5>
<h6>Bootstrap标题六</h6>
<!--Bootstrap中让非标题元素和标题使用相同的样式-->
<div class="h1">Bootstrap标题一</div>
<div class="h2">Bootstrap标题二</div>
<div class="h3">Bootstrap标题三</div>
<div class="h4">Bootstrap标题四</div>
<div class="h5">Bootstrap标题五</div>
<div class="h6">Bootstrap标题六</div>
1.2 文本格式
字体风格
<p class="lead">lead</p><!-- 字体变大，行高变大，下外边距变大 -->
<i>i</i><!--无特殊意义， 斜体 -->
<small>small</small><!-- 小号字体-->
<strong>strong</strong><!-- 语气强烈的强调，粗体 -->
<em>em</em><!-- 强调，斜体 -->
<mark>mark</mark>
<del>del</del>
<s>s</s>
<ins>ins</ins>
<u>u</u>
强调相关的类
<p class="text-muted">提示，使用浅灰色（#999）</p>
<p class="text-primary">主要，使用蓝色（#428bca）</p>
<p class="text-success">成功，使用浅绿色(#3c763d)</p>
<p class="text-info">通知信息，使用浅蓝色（#31708f）</p>
<p class="text-warning">警告，使用黄色（#8a6d3b）</p>
<p class="text-danger">危险，使用褐色（#a94442）</p>
文本对齐
<p class="text-left"> 居左 </p>
<p class="text-center"> 居中 </p>
<p class="text-right"> 居右 </p>
<p class="text-justify"> 两端对齐 </p>
1.3 列表
在Bootstrap中对于列表的设置与原生的html基本一致，需要注意的有：
- 在列表之间有10px的下外边距
- 在嵌套列表中，不含有下边距
去点列表 .list-unstyled
.list-unstyled {
padding-left: 0;
list-style: none;
}
eg:
<ol>
<li class="list-unstyled">
项目列表
<ul class="list-unstyled">
<li>带有项目编号</li>
<li>带有项目编号</li>
</ul>
</li>
</ol>
内联列表 .list-inline
把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。内联列表就是为制作 水平导航 而生。
<ul class="list-inline">
<li>tile1</li>
<li>tile2</li>
<li>tile3</li>
<li>tile4</li>
<li>tile5</li>
</ul>
1.4 代码
在Bootstrap主要提供了三种代码风格：
- 使用
<code></code>来显示单行内联代码——针对于单个单词或单个句子的代码 - 使用
<pre></pre>来显示多行块代码——针对于多行代码（也就是成块的代码） - 使用
<kbd></kbd>来显示用户输入代码——表示用户要通过键盘输入的内容
注： 不管使用哪种代码风格，在代码中碰到小于号（<）和大于号（>）都需要使用转义字符来替代
1.5 表格
| 类名 | 表格样式 |
|---|---|
| .table-striped | 斑马线表格 |
| .table-bordered | 带边框的表格 |
| .table-hover | 鼠标悬停高亮的表格 |
| .table-condensed | 紧凑型表格 |
| .table-responsive | 响应式表格 |
注意事项：
- 后几种表格附加样式，必须在基础样式
.table之后 - 响应式表格：其原理是在表格外部添加容器把普通表格包裹起来，下面进行详细说明：
<div class="table-responsive"><!-- 关键！容器包裹后实现响应式 -->
<table class="table table-bordered"><!-- 设置表格样式，带边框的表格 -->
<thead><!-- 一个表格应该有表头，若直接写tr>td这样的结构，浏览器会自动创建一个tbody包裹 -->
</thead>
<tbody><!--与上同理，即使你不创建，浏览器也会自动添加tbody包裹你的代码 -->
</tbody>
</table>
</div>
