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时显示红色警醒

巴特西

bootstrap组件---进度条

最新文章

热门文章