bootstrap组件---进度条

作者: 手指乐 | 来源:发表于2019-10-07 15:26 被阅读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时显示红色警醒

    相关文章

      网友评论

        本文标题:bootstrap组件---进度条

        本文链接:https://www.haomeiwen.com/subject/zcsmpctx.html