路径导航
<ol> <li><a href="#" >Home</a></li> <li><a href="#" >Library</a></li> <li>Data</li> </ol>
分页
<ul> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </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><a href="#" >5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul>
进度条动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link href="https://www.jb51.net/css/bootstrap.css" > <script src="https://www.jb51.net/js/jquery.1.12.4.min.js"></script> <script src="https://www.jb51.net/js/bootstrap.js"></script> <title>Bootstrap</title> </head> <style type="text/css"> *{ font-family: 微软雅黑; } </style> <body> <div> <h1>BootStrap</h1> <div> <div> </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>
总结
以上所述是小编给大家介绍的bootstrap 路径导航 分页 进度条的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: