快捷導(dǎo)航

bootstrap 路徑導(dǎo)航分頁進度條的實例代碼

更新時間：2018年08月06日 15:14:32 作者：嫌疑-人

本文通過實例代碼給大家介紹了bootstrap 路徑導(dǎo)航分頁進度條的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下

路徑導(dǎo)航

<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">&laquo;</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">&raquo;</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>

這里寫圖片描述

總結(jié)

以上所述是小編給大家介紹的bootstrap 路徑導(dǎo)航分頁進度條的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

用JavaScript判斷CSS瀏覽器類型前綴的兩種方法
不管瀏覽器更新的多快，號稱多么支持標準。廠商不同，他們之間還是有很多差異。我們需要區(qū)分出這些差異，針對不同的瀏覽器做不同的處理。
2015-10-10
JavaScript數(shù)組常用的增刪改查與其他屬性詳解
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組常用的增刪改查與其他屬性的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10
解決javascript 全局變量失效的問題
這篇文章主要介紹了解決javascript 全局變量失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2016-04-04
js獲取當前日期時間及其它日期操作匯總
這篇文章主要介紹了js獲取當前日期時間及其它日期操作匯總，感興趣的小伙伴們可以參考一下
2016-03-03
原生JS實現(xiàn)DOM加載完成馬上執(zhí)行JS代碼的方法
今天小編就為大家分享一篇原生JS實現(xiàn)DOM加載完成馬上執(zhí)行JS代碼的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
本篇文章主要介紹了Javascript的面向?qū)ο?，小編覺得這篇文章內(nèi)容很不錯，需要的朋友可以看下，希望能夠給你帶來幫助
2021-09-09