bootstrap的滾動條簡單動起來

引入css部分

<!--使用bootstrap必須存在的css-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!--Width=device-width   表示寬度是設備屏幕的寬度 
　　Initial-scale=1    表示初始化的縮放比例 
　　maximun-scale=1    表示最大縮放的比例
　　User-scalable=yes    表示用戶是否可以調整縮放比例
-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

html部分(可以在bootstarp官網上查看)

<div class="progress">
    <div class="progress-bar progress-bar-info progress-bar-striped active" style="width:10%">10%</div>
    <div class="progress-bar progress-bar-warning progress-bar-striped active" style="width:20%">50%</div>
    <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width:50%">90%</div>
</div>

引入js部分

<!--必須引入的-->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

是滾動條動起來的js

<script>
    /*$(function(){
        var pro = $("#progress");
        var i = 0;
        var inter = setInterval(function(){
            if (i>=100){
                clearInterval(inter);
            }
            pro.css({"width":i+"%"});
            pro.text(i+"%");
            i++;
        },200);
    });*/
</script>