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

看淡拥有,不刻意追求某些东西,落叶归根,那些属于你的,总会回来。劳动的意义不仅在于追求业绩,更在于完善人的心灵。

路径导航

<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 路径导航 分页 进度条的实例代码到此结束。青春不是人生的一段时期,而是心灵的一种状况。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
JS获取鼠标点击时的位置

vue、nginx部署后刷新报404错误的解决方法

electron-builder配置项

VUE聊天页面自动滚动到底部

VUE CTRL+ENTER换行,ENTER发送消息