让前端飞Web前端之路

bootstrap组件---进度条

2019-10-07  本文已影响0人  手指乐
<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>

style="width: 90%;"
定义进度显示

progress-bar-success
progress-bar-info
progress-bar-warning
progress-bar-danger

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

上一篇下一篇

猜你喜欢

热点阅读