功能强大的Bootstrap效果展示（二）

<link rel="stylesheet" href="css/bootstrap.min.css"><!--最好也引用cdn的css，有些样式文件里没有--><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><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">  地铁线路  <!--这个是向下的三角符号-->  <span class="caret"></span>  </button>  <ul class="dropdown-menu" role="menu">  <!--这个是小标题-->  <li class="dropdown-header">地铁</li>  <li><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="divider"></li>  <li><a href="#">5号线</a> </li>  </ul> </div>

<!--将nav的类设为navbar-inverse更加高端,设为navbar-static-top将navbar的圆角去掉并且静止固定在顶部--> <nav class="navbar navbar-inverse navbar-static-top" role="navigation"> <div class="container">  <!--导航栏的开头，通常是文字或者图片-->  <div class="navbar-header">  <!--这个按钮可以在位置不够时点开菜单-->  <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设为bs-example-navbar-collapse-1才能伸缩后被点开-->  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">  <ul class="nav navbar-nav">   <li><a href="#">会员管理</a></li>   <li><a href="#">会员管理</a></li>   <li><a href="#">会员管理</a></li>   <li><a href="#">会员管理</a></li>   <!--导航栏中加一个下拉菜单-->   <li class="dropdown">   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">    系统维护<span class="caret"></span>   </a>   <ul class="dropdown-menu" role="menu">    <li><a href="#">恢复系统</a></li>    <li><a href="#">系统备份</a></li>    <li><a href="#">断开连接</a></li>    <li><a href="#">删除用户</a></li>   </ul>   </li>  </ul>  <!--先写navbar-right越靠右-->  <!--导航栏中的按钮-->  <button type="button" class="btn btn-default navbar-btn navbar-right">Sign in</button>  <!--导航栏中的表单-->  <form class="navbar-form navbar-right" role="search">   <div class="form-group">   <input type="text" class="form-control" placeholder="输入搜索内容">   </div>   <button type="summit" class="btn btn-default">搜索</button>  </form>  </div> </div> </nav>

 <!--导航条-->  <ol class="breadcrumb">  <li><a href="#">我的后台</a> </li>  <li><a href="#">系统分析</a> </li>  <!--当前位置不可以点击跳转-->  <li class="active">访问统计</li>  </ol>

<div class="progress">  <!--progress-bar-striped设置条纹，active设置动画-->  <!--根据style宽度的百分比显示进度条的百分比-->  <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>  <!--文字显示在进度条中间-->  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">«</span>  </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><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">»</span>  </a>  </li> </ul>

 <ul class="pager">  <li><a href="#"><span aria-hidden="true">←</span>上一页</a> </li>  <li><a href="#"><span aria-hidden="true">→</span>下一页 </a> </li>  </ul>

 <ul class="pager">  <li class="previous"><a href="#"><span aria-hidden="true">←</span>上一页</a> </li>  <li class="next"><a href="#"><span aria-hidden="true">→</span>下一页 </a> </li>  </ul>

 <div class="list-group col-md-3">  <!--第一项被选中-->  <a href="#" class="list-group-item active">访问统计</a>  <a href="#" class="list-group-item">信息统计</a>  <a href="#" class="list-group-item">日志统计</a>  <a href="#" class="list-group-item">信息统计</a>  <a href="#" class="list-group-item">信息统计</a>  <a href="#" class="list-group-item">信息统计</a>  <a href="#" class="list-group-item">信息统计</a>  <a href="#" class="list-group-item">信息统计</a>  </div>