bootstrap组件---进度条

<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 90%;">
        <span class="sr-only">90% 完成（成功）</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 30%;">
        <span class="sr-only">30% 完成（信息）</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 20%;">
        <span class="sr-only">20% 完成（警告）</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 10%;">
        <span class="sr-only">10% 完成（危险）</span>
    </div>
</div>

 

 

role:语义化属性，无显示上的效果

 

 

aria-valuenow

aria-valuemin

aria-valuemax

　　

3个属性无显示上的效果，标识进度值范围和当前进度值，可以用于js设置和获取进度：

object.setAttribute("aria-valuenow",value);

var value = object.getAttribute("aria-valuenow");

 

style="width: 90%;"

定义进度条宽度

 

progress-bar-success

progress-bar-info

 progress-bar-warning

progress-bar-danger

4个class定义不同进度下的进度条颜色显示，比如danger时显示红色警醒

 

转载于:https://www.cnblogs.com/cowboybusy/p/9673684.html