看淡拥有,不刻意追求某些东西,落叶归根,那些属于你的,总会回来。劳动的意义不仅在于追求业绩,更在于完善人的心灵。
路径导航
<ol class="breadcrumb"> <li><a rel="nofollow noopener noreferrer" 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 rel="nofollow noopener noreferrer" 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 rel="nofollow noopener noreferrer" 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 rel="nofollow noopener noreferrer" 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 rel="nofollow noopener noreferrer" 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 rel="nofollow noopener noreferrer" 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 rel="nofollow noopener noreferrer" 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 rel="nofollow noopener noreferrer" 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 rel="nofollow noopener noreferrer" 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" rel="nofollow noopener noreferrer" 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>
总结
以上所述是小编给大家介绍的bootstrap 路径导航 分页 进度条的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
本文bootstrap 路径导航 分页 进度条的实例代码到此结束。青春不是人生的一段时期,而是心灵的一种状况。小编再次感谢大家对我们的支持!