SOURCE

<p style="font-family:16px;font-weight:bold;">
  面板
</p>
<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">
      Panel-header
    </div>
    <div class="panel-body">
      Bootstrap fiddle meta
    </div>
    <div class="panel-footer">
      Panel-footer
    </div>
  </div>
</div>

<p style="font-family:16px;font-weight:bold;">
  更多面板
</p>
<div class="row">
  <div class="col-sm-2">
    <div class="panel panel-default">
      <div class="panel-heading">
        Bootstrap header
      </div>
      <div class="panel-body">
        Keep us runing by whitelisting JSFiddle in your ad blocker
      </div>
      <div class="panel-footer">
        JSfiddle Run
      </div>
    </div>
  </div>
  <div class="col-sm-2">
    <div class="panel panel-primary">
      <div class="panel-heading">
        Bootstrap header
      </div>
      <div class="panel-body">
        Keep us runing by whitelisting JSFiddle in your ad blocker
      </div>
      <div class="panel-footer">
        JSfiddle Run
      </div>
    </div>
  </div>
  <div class="col-sm-2">
    <div class="panel panel-success">
      <div class="panel-heading">
        Bootstrap header
      </div>
      <div class="panel-body">
        Keep us runing by whitelisting JSFiddle in your ad blocker
      </div>
      <div class="panel-footer">
        JSfiddle Run
      </div>
    </div>
  </div>
  <div class="col-sm-2">
    <div class="panel panel-info">
      <div class="panel-heading">
        Bootstrap header
      </div>
      <div class="panel-body">
        Keep us runing by whitelisting JSFiddle in your ad blocker
      </div>
      <div class="panel-footer">
        JSfiddle Run
      </div>
    </div>
  </div>
  <div class="col-sm-2">
    <div class="panel panel-warning">
      <div class="panel-heading">
        Bootstrap header
      </div>
      <div class="panel-body">
        Keep us runing by whitelisting JSFiddle in your ad blocker
      </div>
      <div class="panel-footer">
        JSfiddle Run
      </div>
    </div>
  </div>
  <div class="col-sm-2">
    <div class="panel panel-danger">
      <div class="panel-heading">
        Bootstrap header
      </div>
      <div class="panel-body">
        Keep us runing by whitelisting JSFiddle in your ad blocker
      </div>
      <div class="panel-footer">
        JSfiddle Run
      </div>
    </div>
  </div>
</div>

<p style="font-family:16px;font-weight:bold;">
  嵌套表格
</p>
<div class="panel panel-primary">
  <div class="panel-heading">
    Bootstrap嵌套表格
  </div>
  <div class="panel-body">
    说明:这是一个Bootstrap的嵌套表格应用
    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>入库单号</th>
          <th>供应商</th>
          <th>时间</th>
          <th>产品</th>
          <th>数量</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>201701</td>
          <td>apple</td>
          <td>2017-01-01</td>
          <td>Phone</td>
          <td>200</td>
        </tr>
        <tr>
          <td>201702</td>
          <td>Samsung</td>
          <td>2017-02-01</td>
          <td>Flash</td>
          <td>500</td>
        </tr>
        <tr>
          <td>20170303</td>
          <td>Xiaomi</td>
          <td>2017-03-03</td>
          <td>Watch</td>
          <td>300</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="panel-footer">
    嵌套表格尾
  </div>
</div>

<p style="font-family:16px;font-weight:bold;">
  嵌套列表
</p>
<div class="panel panel-primary">
  <div class="panel-heading">
    Bootstrap header
  </div>
  <div class="panle-body">
    <ul class="list-group">
      <li class="list-group-item">入库管理</li>
      <li class="list-group-item">出库管理</li>
      <li class="list-group-item">时间</li>
    </ul>
  </div>
  <!-- <div class="pabel-footer">
  </div>-->
</div>

<p style="font-family:16px;font-weight:bold;">
  缩略图
</p>
<div class="container">
  <div class="row">
    <div class="col-sm-3">
      <a href="http://photo.poco.cn/lastphoto-htx-id-5595873-p-0.xhtml" class="thumbnail">
        <img src="http://image18-c.poco.cn/mypoco/myphoto/20170418/05/5619459120170418055842074_640.jpg?1537x1025_120" alt="photo1" />
      </a>
      <div class="caption">
        <h4>Photo1</h4>
        <p>Bootstrap制作的图标缩略图效果1</p>
        <p>
          <button class="btn btn-xs btn-primary">前</button>
          <button class="btn btn-xs btn-success">后</button>
        </p>
      </div>
    </div>
    <div class="col-sm-3">
      <a href="http://photo.poco.cn/lastphoto-htx-id-5595873-p-0.xhtml" class="thumbnail">
        <img src="http://image18-c.poco.cn/mypoco/myphoto/20170418/05/5619459120170418055836016_640.jpg?1536x1026_120" alt="photo2" />
      </a>
      <div class="caption">
        <h4>Photo2</h4>
        <p>Bootstrap制作的图标缩略图效果2</p>
        <p>
          <button class="btn btn-xs btn-info">前</button>
          <button class="btn btn-xs btn-warning">后</button>
        </p>
      </div>
    </div>
  </div>
</div>


<p style="font-family:16px;font-weight:bold;">
  巨幕
</p>
<div class="jumbotron">
  <div class="container">
    <h2>Bootstrap</h2>
    <p>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</p>
    <p>
      <button class="btn btn-primary">开始学习</button>
    </p>
  </div>
</div>

<p style="font-family:16px;font-weight:bold;">
  页头
</p>
<div class="page-header">
  <h2>Bootstrap<small>简洁、直观、强悍的前端开发框架</small></h2>
</div>

<p style="font-family:16px;font-weight:bold;">
  提示框
</p>
<div class="container">
  <div class="row">
    <div class="col-lg-4">
      <div class="alert alert-success">成功提示框</div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4">
      <div class="alert alert-info">信息提示框</div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4">
      <div class="alert alert-warning">警告提示框</div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4">
      <div class="alert alert-danger">危险提示框</div>
    </div>
  </div>
</div>
<p style="font-family:14px;font-weight:bold;">
  加入了关闭按钮的提示框
</p>
<div class="container">
  <div class="row">
    <div class="col-lg-4">
      <div class="alert alert-success alert-dismissable">
        <button class="close" data-dismiss="alert">
          &times;
        </button>
        成功提示框
      </div>
    </div>
  </div>
</div>

<p style="font-family:14px;font-weight:bold;">
  加入了链接提示的提示框
</p>
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="alert alert-warning alert-dismissable">
        <button class="close" data-dismiss="alert">
          &times;
        </button>
        信息提示框<a href="#" class="alert-link">帮助</a>
      </div>
    </div>
  </div>
</div>

<p style="font-family:16px;font-weight:bold;">
  进度条
</p>
<p style="font-family:14px;font-weight:bold;">
  基础进度条
</p>
<div class="conainer">
  <div class="progress">
    <div class="progress-bar" style="width:20%"></div>
  </div>
  <div class="progress">
    <div class="progress-bar" style="width:20%">
      <span class="sr-only">已完成20%</span>
    </div>
  </div>
</div>
<p style="font-family:14px;font-weight:bold;">
  彩色进度条
</p>
<div class="conainer">
  <div class="progress">
    <div class="progress-bar progress-bar-info" style="width:20%"></div>
  </div>
</div>
<div class="conainer">
  <div class="progress">
    <div class="progress-bar progress-bar-success" style="width:20%"></div>
  </div>
</div>
<div class="conainer">
  <div class="progress">
    <div class="progress-bar progress-bar-warning" style="width:20%"></div>
  </div>
</div>
<div class="conainer">
  <div class="progress">
    <div class="progress-bar progress-bar-danger" style="width:20%"></div>
  </div>
</div>
<p style="font-family:14px;font-weight:bold;">
  条纹进度条和动画效果
</p>
<div class="conainer">
  <div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" style="width:20%"></div>
  </div>
  <div class="progress  active progress-striped">
    <div class="progress-bar progress-bar-success" style="width:20%"></div>
  </div>
</div>
<p style="font-family:14px;font-weight:bold;">
  堆叠效果
</p>
<div class="container">
  <div class="progress active progress-striped">
    <div class="progress-bar progress-bar-success" style="width:30%">
      <span class="sr-only">30% Complete</span>
    </div>
    <div class="progress-bar progress-bar-info" style="width:20%">
      <span class="sr-only">20% Complete</span>
    </div>
    <div class="progress-bar progress-bar-warning" style="width:10%">
      <span class="sr-only">10% Complete</span>
    </div>
  </div>
</div>




<p style="font-family:16px;font-weight:bold;">
  媒体对象
</p>
<div class="container">
  <div class="media">
    <a class="pull-left" href="#">
      <img src="http://image18-c.poco.cn/mypoco/myphoto/20170418/05/5619459120170418055836016_640.jpg?1536x1026_120"  alt="photo" /> 
    </a>
    <div class="media-body">
      <h4 class="media-heading">图片1</h4>
      <p>这是对于图片的说明</p>
    </div>
  </div>
</div>
<p style="font-family:14px;font-weight:bold;">
  媒体列表组
</p>
<div clas="container">
  <ul class="media-list">
    <li class="media">
      <div class="media">
        <div class="media-left media-middle">
          <a href="#"><img class="media-object" src="http://image18-c.poco.cn/mypoco/myphoto/20170418/05/5619459120170418055836016_640.jpg?1536x1026_120" alt="photo1" style="width:50%;height:50%;" /></a>
        </div>
        <div class="media-body">
          <h4 class="media-heading">图片1</h4>
          <p>这是对图片1的说明</p>
        </div>
      </div>
    </li>
    <li class="media">
      <div class="media">
        <div class="media-left media-middle">
          <a href="#"><img class="media-object" src="http://image18-c.poco.cn/mypoco/myphoto/20170418/05/5619459120170418055836016_640.jpg?1536x1026_120" alt="photo1" style="width:50%;height:50%;" /></a>
        </div>
        <div class="media-body">
          <h4 class="media-heading">图片1</h4>
          <p>这是对图片1的说明</p>
        </div>
      </div>
    </li>
    <li class="media">
      <div class="media">
        <div class="media-left media-middle">
          <a href="#"><img class="media-object" src="http://image18-c.poco.cn/mypoco/myphoto/20170418/05/5619459120170418055836016_640.jpg?1536x1026_120" alt="photo1" style="width:50%;height:50%;" /></a>
        </div>
        <div class="media-body">
          <h4 class="media-heading">图片1</h4>
          <p>这是对图片1的说明</p>
        </div>
      </div>
    </li>
  </ul>
</div>