第四谈：内容排版

本节课我们来开始学习 Bootstrap 的内容排版，分为标题类、文本类和列表类三块。

一．标题类

1. 使用<h1>~<h6>可以创建不同尺寸的标题文字；

      <h1>Bootstrap</h1>
      <h2>Bootstrap</h2>
      <h3>Bootstrap</h3>
      <h4>Bootstrap</h4>
      <h5>Bootstrap</h5>
      <h6>Bootstrap</h6>

2. 如果是使用其它元素标签，比如<p>或<div>，调用.h1~6 同样实现不同尺寸标题；

      <p class="h1">Bootstrap</p>
      <div class="h2">Bootstrap</div>
      <p class="h3">Bootstrap</p>
      <div class="h4">Bootstrap</div>
      <p class="h5">Bootstrap</p>
      <div class="h6">Bootstrap</div>

3. 通过.text-muted 样式，构建大标题的附属小标题；

      <p class="h1">
          Bootstrap <small class="text-muted">V4.5</small>
      </p>
      <div class="h2">
          Bootstrap <small class="text-muted">V4.5</small>
      </div>

4. 还有一种更大型，更加醒目的标题方式：.display-1~4；

      <h1 class="display-1">Bootstrap</h1>
      <h1 class="display-2">Bootstrap</h1>
      <h1 class="display-3">Bootstrap</h1>
      <h1 class="display-4">Bootstrap</h1>

二．文本类

1. 想要指定一些段落中重要的内容，可以使用.lead 强调；

      <p class="lead">
          这是一段测试各种文本效果的话，本身没有意义！
      </p>

2. 比较常用的文本内联元素，来自 HTML5；

      <p>这是一段测试各种文本<mark>效果的话</mark>，本身没有意义！</p>
      <p><del>这是一段测试各种文本效果的话，本身没有意义！</del></p>
      <p><s>这是一段测试各种文本效果的话，本身没有意义！</s></p>
      <p><ins>这是一段测试各种文本效果的话，本身没有意义！</ins></p>
      <p><u>这是一段测试各种文本效果的话，本身没有意义！</u></p>
      <p><small>这是一段测试各种文本效果的话，本身没有意义！</small></p>
      <p><strong>这是一段测试各种文本效果的话，本身没有意义！</strong></p>
      <p><em>这是一段测试各种文本效果的话，本身没有意义！</em></p>

3. 也可以使用.mark，.small 等方式实现同样元素的效果；

      <p>这是一段测试各种文本<span class="mark">效果</span>的话</p>
      <p class="small">这是一段测试各种文本效果的话，本身没有意义！</p>

4. 使用.title 样式和<abbr>缩略语给文本做提示；

      <p><abbr title="这是一个提示！">提示</abbr></p>

5. 使用 Blockquote 设置来源备注或引用；

      <blockquote class="blockquote">
          <p>这是一段测试各种文本效果的话，本身没有意义！</p>
      </blockquote>

6. 使用.blockquote-footer 设置底部备注来源；

      <blockquote class="blockquote">
          <p>这是一段测试各种文本效果的话，本身没有意义！</p>
          <footer class="blockquote-footer">
              ——出自 Bootstrap 视频课堂
          </footer>
      </blockquote>

7. 可以对内容进行居中对齐.text-center 或居右对齐.text-right；

      <blockquote class="blockquote text-center">
          这是一段测试各种文本效果的话，本身没有意义！
      </blockquote>

三．列表类

1. 使用.list-unstyled 样式，可以将列表初始化；

      <ul class="list-unstyled">
          <li>A 班</li>
          <li>B 班</li>
          <li>C 班
              <ul>
                  <li>张三</li>
                  <li>李四</li>
                  <li>王五</li>
                  <li>马六</li>
              </ul>
          </li>
          <li>D 班</li>
      </ul>

2. 使用.list-inline 和.list-inline-item 结合实现多列并排列表；

      <ul class="list-inline">
          <li class="list-inline-item">A 班</li>
          <li class="list-inline-item">B 班</li>
          <li class="list-inline-item">C 班</li>
          <li class="list-inline-item">D 班</li>
      </ul>

3. 使用 dl、dt 和 dd 可以实现水平描述，使用.text-truncate 可以省略溢出；

      <div class="container">
          <dl class="row">
              <dt class="c col-sm-3">列表标题</dt>
              <dd class="c col-sm-9">一个关于描述列表的内容</dd>
              <dt class="c col-sm-3">列表标题</dt>
              <dd class="c col-sm-4 text-truncate">一个关于描述列表的内容， 但是这个稍微长了一点点以至于换行！
              </dd>
          </dl>
      </div>