bootstrap组件---进度条

最新推荐文章于 2020-09-07 22:51:36 发布

转载最新推荐文章于 2020-09-07 22:51:36 发布 · 121 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cowboybusy/p/9673684.html

本文详细介绍了HTML5中进度条元素的使用方法，包括如何通过不同的类来改变进度条的颜色，以及如何利用aria属性来设置和获取进度值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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