bootstrap 路径导航分页进度条的实例代码

来源：动视网责编：小采时间：2020-11-27 22:10:43

bootstrap 路径导航分页进度条的实例代码

bootstrap 路径导航分页进度条的实例代码:路径导航 <ol class=breadcrumb> <li><a href=# rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollo

推荐度：

点击下载本文 文档为doc格式

导读bootstrap 路径导航分页进度条的实例代码:路径导航 <ol class=breadcrumb> <li><a href=# rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollow rel=external nofollo

路径导航

<ol class="breadcrumb">
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Library</a></li>
 <li class="active">Data</li>
</ol>

分页

<ul class="pagination">
 <li class="disabled">
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" aria-label="Previous">
 <span aria-hidden="true">«</span>
 </a>
 </li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a></li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a></li>
 <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a></li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a></li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5</a></li>
 <li>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" aria-label="Next">
 <span aria-hidden="true">»</span>
 </a>
 </li>
 </ul>

进度条动画

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" >
 <script src="js/jquery.1.12.4.min.js"></script>
 <script src="js/bootstrap.js"></script>
 <title>Bootstrap</title>
</head>
<style type="text/css">
 *{
 font-family: 微软雅黑;
 }

</style>
<body>
 <div class="container">
 <h1 class="page-header">BootStrap</h1>
 <div class="progress">
 <div class="progress-bar progress-bar-warning progress-bar-striped active" style="width: 0%;">
 </div>
 </div>
 </div>
</body>
<script type="text/javascript">
 s=0;
 v=5;
 sObj=setInterval(function(){
 s+=v;
 if(s>=100){
 clearInterval(sObj);
 }
 $('.progress-bar').html(s+'%').css({'width':s+'%'});
 },50);
</script>
</html>