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基本一致，需要注意的有：

1. 在列表之间有10px的下外边距
2. 在嵌套列表中，不含有下边距

去点列表 .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主要提供了三种代码风格：

1. 使用<code></code>来显示单行内联代码——针对于单个单词或单个句子的代码
2. 使用<pre></pre>来显示多行块代码——针对于多行代码（也就是成块的代码）
3. 使用<kbd></kbd>来显示用户输入代码——表示用户要通过键盘输入的内容

注： 不管使用哪种代码风格，在代码中碰到小于号（<）和大于号（>）都需要使用转义字符来替代

1.5 表格

注意事项：

1. 后几种表格附加样式，必须在基础样式.table之后
2. 响应式表格：其原理是在表格外部添加容器把普通表格包裹起来，下面进行详细说明：

<div class="table-responsive"><!-- 关键！容器包裹后实现响应式 -->
  <table class="table table-bordered"><!-- 设置表格样式，带边框的表格 -->
    <thead><!-- 一个表格应该有表头，若直接写tr>td这样的结构，浏览器会自动创建一个tbody包裹 -->
    </thead>
    <tbody><!--与上同理，即使你不创建，浏览器也会自动添加tbody包裹你的代码  -->
    </tbody>
  </table>
</div>