知识点：

1、分页
2、标签
3、徽章
4、巨幕
5、页头
6、缩略图
7、警告框

1、分页

1）默认的分页

  <ul class="pagination">
      <li><a href="">«</a></li>
      <li><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
      <li><a href="">»</a></li>
  </ul>

2）禁用和激活状态

  <ul class="pagination">
      <li class="disabled"><a href="">«</a></li>
      <li class="active"><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
      <li><a href="">»</a></li>
  </ul>

3）分页的尺寸 pagination-lg pagination-sm

4）翻页（Pager）

  <ul class="pager">
      <li><a href="">previous</a></li>
      <li><a href="">next</a></li>
  </ul>

5）对齐的链接

  <ul class="pager">
      <li class="previous"><a href="">← previous</a></li>
      <li class="next"><a href="">next →</a></li>
  </ul>

6）可选的禁用状态

  <ul class="pager">
      <li class="previous disabled"><a href="">← previous</a></li>
      <li class="next"><a href="">next →</a></li>
  </ul>

2、标签

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

3、徽章 badge

<a href="">Messages <span class="badge">20</span></a>
<button class="btn btn-default">Messages <span class="badge">20</span></button>

4、巨幕 jumbotron

<div class="jumbotron">
   <div class="container">
       <h1>hello world!!!</h1>
       <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured
           content or information.</p>
       <p><a class="btn btn-primary" href="">Learn more</a></p>
   </div>
</div>

5、页头 page-header

<div class="page-header">
   <h1>Example page header
       <small>Subtext for header</small>
   </h1>
</div>

6、缩略图

1）默认样式

<div class="col-md-3 col-sm-6">
   <a class="thumbnail" href="">
       ![](images/kittens.jpg)
   </a>
</div>

2）自定义内容

<div class="col-md-3 col-sm-6">
   <div class="thumbnail">
       ![](images/kittens.jpg)
       <div class="caption">  <!--text-center-->
           <h3>缩略图标签</h3>
           <p>一些示例文本。一些示例文本。</p>
           <p>
               <a href="#" class="btn btn-primary" role="button">按钮</a>
               <a href="#" class="btn btn-default" role="button">按钮 </a>
           </p>
       </div>
   </div>
</div>

7、警告框

1）基本默认样式

  <div class="alert alert-success">成功！很好地完成了提交。</div>
  <div class="alert alert-info">信息！请注意这个信息。</div>
  <div class="alert alert-warning">警告！请不要提交。</div>
  <div class="alert alert-danger">错误！请进行一些更改。</div>

2）可关闭的警告框

  <button type="button" class="close" data-dismiss="alert">×</button>

3）警告中的链接

  <div class="alert alert-success">
      <a href="#" class="alert-link">成功！很好地完成了提交。</a>
  </div>