bootstrap-路径导航分页进度条

最新推荐文章于 2019-07-24 17:30:44 发布

嫌疑-人

最新推荐文章于 2019-07-24 17:30:44 发布

阅读量452

点赞数

分类专栏： bootstrap 文章标签： bootstrap html css progress

本文链接：https://blog.youkuaiyun.com/qq_39396275/article/details/81427953

版权

bootstrap 专栏收录该内容

16 篇文章

订阅专栏

路径导航

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

分页

<ul class="pagination">
            <li  class="disabled">
              <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li class="active"><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">&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">
    <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>