<link rel="stylesheet" href="css/bootstrap.min.css">
<!--最好也引用cdn的css，有些樣式文件里沒有-->
<link rel="stylesheet" >
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
  地鐵線路
  <!--這個(gè)是向下的三角符號(hào)-->
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
  <!--這個(gè)是小標(biāo)題-->
  <li class="dropdown-header">地鐵</li>
  <li><a href="#">1號(hào)線</a> </li>
  <li><a href="#">2號(hào)線</a> </li>
  <li><a href="#">3號(hào)線</a> </li>
  <li><a href="#">4號(hào)線</a> </li>
  <!--這個(gè)是分割線-->
  <li class="divider"></li>
  <li><a href="#">5號(hào)線</a> </li>
  </ul>
 </div>

<!--將nav的類設(shè)為navbar-inverse更加高端,設(shè)為navbar-static-top將navbar的圓角去掉并且靜止固定在頂部-->
 <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
 <div class="container">
  <!--導(dǎo)航欄的開頭，通常是文字或者圖片-->
  <div class="navbar-header">
  <!--這個(gè)按鈕可以在位置不夠時(shí)點(diǎn)開菜單-->
  <button type="button" class="navbar-toggle" data-toggle="collapse"
   data-target="#bs-example-navbar-collapse-1">
   <span class="sr-only">Toggle navigation</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </button>
  <!--可將Brand換成img-->
  <a class="navbar-brand" href="#">Brand</a>
  </div>

  <!--要id設(shè)為bs-example-navbar-collapse-1才能伸縮后被點(diǎn)開-->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
   <li><a href="#">會(huì)員管理</a></li>
   <li><a href="#">會(huì)員管理</a></li>
   <li><a href="#">會(huì)員管理</a></li>
   <li><a href="#">會(huì)員管理</a></li>
   <!--導(dǎo)航欄中加一個(gè)下拉菜單-->
   <li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
    系統(tǒng)維護(hù)<span class="caret"></span>
   </a>
   <ul class="dropdown-menu" role="menu">
    <li><a href="#">恢復(fù)系統(tǒng)</a></li>
    <li><a href="#">系統(tǒng)備份</a></li>
    <li><a href="#">斷開連接</a></li>
    <li><a href="#">刪除用戶</a></li>
   </ul>
   </li>
  </ul>
  <!--先寫navbar-right越靠右-->
  <!--導(dǎo)航欄中的按鈕-->
  <button type="button" class="btn btn-default navbar-btn navbar-right">Sign in</button>
  <!--導(dǎo)航欄中的表單-->
  <form class="navbar-form navbar-right" role="search">
   <div class="form-group">
   <input type="text" class="form-control" placeholder="輸入搜索內(nèi)容">
   </div>
   <button type="summit" class="btn btn-default">搜索</button>
  </form>
  </div>
 </div>
 </nav>

 <!--導(dǎo)航條-->
  <ol class="breadcrumb">
  <li><a href="#">我的后臺(tái)</a> </li>
  <li><a href="#">系統(tǒng)分析</a> </li>
  <!--當(dāng)前位置不可以點(diǎn)擊跳轉(zhuǎn)-->
  <li class="active">訪問統(tǒng)計(jì)</li>
  </ol>

<div class="progress">
  <!--progress-bar-striped設(shè)置條紋，active設(shè)置動(dòng)畫-->
  <!--根據(jù)style寬度的百分比顯示進(jìn)度條的百分比-->
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
  <span class="sr-only">30%</span>
  <!--文字顯示在進(jìn)度條中間-->
  30%
  </div>
 </div>

 <div class="media">
  <div class="media-left">
  <img class="media-object" src="images/1.jpg">
  </div>
  <div class=" media-body">
  <h4>Media heading</h4>
  <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
  </div>
 </div>

<ul class="pagination">
  <li class="disabled">
  <a href="#" aria-label="Previous">
   <!--向左的雙箭頭-->
   <span aria-hidden="true">&laquo;</span>
  </a>
  </li>
  <!--第一個(gè)選項(xiàng)被激活-->
  <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><a href="#">5</a> </li>
  <li><a href="#">6</a> </li>
  <li><a href="#">7</a> </li>
  <li>
  <a href="#" aria-label="Next">
   <!--向右的雙箭頭-->
   <span aria-hidden="true">&raquo;</span>
  </a>
  </li>
 </ul>

 <ul class="pager">
  <li><a href="#"><span aria-hidden="true">&larr;</span>上一頁(yè)</a> </li>
  <li><a href="#"><span aria-hidden="true">&rarr;</span>下一頁(yè) </a> </li>
  </ul>

 <ul class="pager">
  <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span>上一頁(yè)</a> </li>
  <li class="next"><a href="#"><span aria-hidden="true">&rarr;</span>下一頁(yè) </a> </li>
  </ul>

 <div class="list-group col-md-3">
  <!--第一項(xiàng)被選中-->
  <a href="#" class="list-group-item active">訪問統(tǒng)計(jì)</a>
  <a href="#" class="list-group-item">信息統(tǒng)計(jì)</a>
  <a href="#" class="list-group-item">日志統(tǒng)計(jì)</a>
  <a href="#" class="list-group-item">信息統(tǒng)計(jì)</a>
  <a href="#" class="list-group-item">信息統(tǒng)計(jì)</a>
  <a href="#" class="list-group-item">信息統(tǒng)計(jì)</a>
  <a href="#" class="list-group-item">信息統(tǒng)計(jì)</a>
  <a href="#" class="list-group-item">信息統(tǒng)計(jì)</a>
  </div>