路径、分页、标签和徽章组件

路径组件
路径组件也叫做面包屑导航。
面包屑导航

<ol class="breadcrumb">
    <li><a href="#">首页      </a></li> 
    <li><a href="#">产品列 表</a></li>
    <li class="active">韩版 2015 年羊绒毛衣</li> 
</ol>

分页组件
分页组件可以提供带有展示页面的功能。
默认分页

<ul class="pagination pagination-lg">
    <li><a href="#">&laquo;</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="#">4</a></li>
    <li class="disabled"><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

首选项和禁用

<li class="active"><a href="#">1</a></li>
<li class="disabled"><a href="#">2</a></li>

设置尺寸，四种 lg、默认、sm 和

• 果

<ul class="pager">
    <li><a href="#">上一页</a></li> 
    <li><a href="#">下一页</a></li>
</ul>

对齐翻页链接

<ul class="pager">
    <li class="previous"><a href="#">上一页</a></li> 
    <li class="next"><a href="#">下一页</a></li>
</ul>

翻页项禁用

• 上一页
• 标签
  在文本后面带上标签

  标签 new

  不同色调的标签

  标签 new

  标签 new

  标签 new

  标签 new

  标签 new

  徽章
  未读信息数量徽章

  信息 10
  按钮中使用徽章

  
  提交 3
  
  激活状态自动适配色调

  <ul class="nav nav-pills">
      <li class="active">
          <a href="#">首页 <span class="badge">2</span></a>
      </li>
      <li><a href="#">资讯</a></li> 
  </ul>

  巨幕组件 巨幕组件主要是展示网站的关键区域。 在固定的范围内，有圆角

  <div class="container">
      <div class="jumbotron"> 
          <h2>网站标题</h2> 
          <p>这是一个学习性的网站！</p>
          <p><a href="#" class="btn btn-default">更多内容</a></p> 
      </div>
  </div>
  100%全屏，没有圆角
  
  <div class="jumbotron"> 
      <div class="container">
          <h2>网站标题</h2> <p>这是一个学习性的网站！</p>
          <p><a href="#" class="btn btn-default">更多内容</a></p> 
      </div>
  </div>

  页头组件 增加一些空间

  <div class="page-header">
      <h1>大标题 
          <small>小标题</small>
      </h1> 
  </div>

  缩略图组件 缩略图配合响应式

  <div class="container">
      <div class="row">
  
          <div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">
  
              <img src="img/pic.png" alt=""> </div>
  
          </div>
  
          <div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">
  
              <img src="img/pic.png" alt=""> </div>
  
          </div>
  
          <div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">
  
              <img src="img/pic.png" alt=""> </div>
  
          </div>
  
          <div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">
  
              <img src="img/pic.png" alt=""> </div>
  
          </div>
  
      </div>
  
  </div>

  自定义内容

  <div class="container">
      <div class="row">
  
      <div class="col-xs-6 col-md-3 col-sm-4"> 
          <div class="thumbnail">
  
          <img src="img/pic.png" alt=""> 
              <div class="caption">
              <h3>图文并茂</h3>
              <p>这是一个图片结合文字的缩略图</p>
              <p>
                  <a href="#" class="btn btn-default">进入</a>
              </p>
              </div>
          </div>
      </div>
  
      <div class="col-xs-6 col-md-3 col-sm-4"> 
          <div class="thumbnail">
              <img src="img/pic.png" alt=""> 
              <div class="caption">
                  <h3>图文并茂</h3> 
                  <p>这是一个图片结合文字的缩略图</p> 
                  <p>
                      <a href="#" class="btn btn-default">进入</a>
                  </p>
              </div>
          </div>
      </div>
  
  
  <div class="col-xs-6 col-md-3 col-sm-4">
      <div class="thumbnail">
          <img src="img/pic.png" alt="">
          <div class="caption"> 
              <h3>图文并茂</h3> 
              <p>这是一个图片结合文字的缩略图</p>
              <p>
                  <a href="#" class="btn btn-default">进入</a>
              </p>
          </div>
      </div>
  </div>
  
  <div class="col-xs-6 col-md-3 col-sm-4">
      <div class="thumbnail">
          <img src="img/pic.png" alt="">
              <div class="caption">
                  <h3>图文并茂</h3> 
                  <p>这是一个图片结合文字的缩略图</p> 
                  <p><a href="#" class="btn btn-default">进入</a>
                  </p>
              </div>
          </div>
      </div>
  </div>
  
  </div>

  警告框组件 警告框组件是一组预定义消息。 基本警告框

  <div class="alert alert-success">Bootstrap</div> 
  <div class="alert alert-info">Bootstrap</div> 
  <div class="alert alert-warning">Bootstrap</div> 
  <div class="alert alert-danger">Bootstrap</div>

  带关闭的警告框

  <div class="alert alert-success"> Bootstrap
      <button type="button" class="close" data-dismiss="alert"> 
          <span>&times;</span>
      </button>
  </div>

  自动适配的超链接

  <div class="alert alert-success">
      Bootstrap，请到官网 
      <a href="#" class="alert-link">下载</a> 
  </div>