bootstrap 路徑導航分頁進度條的實例代碼

2019-11-19 13:20:10

字體：大中小

來源：轉載

供稿：網友

路徑導航

<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>

這里寫圖片描述