进度条

墨蓝 2022-10-02 14:48 313阅读 0赞

## 进度条--基本样式 ##

<div class="progress">
        <div class="progress-bar" style="width:80%;" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
            <span class="sr-only">80% Complete</span>
        </div>
    </div>

![909997-20160819105827562-1666285284.png][]

## 进度条--彩色进度条 ##

![909997-20160819111434703-731317664.png][]

## 进度条--条纹进度条 ##

![909997-20160819112214421-1733856009.png][]

## 进度条--动态条纹进度条 ##

![909997-20160819114602281-116498121.png][]

## 进度条--层叠进度条(层叠进度条宽度之和不能大于100%，大于100%就会造成不良效果) ##

<h5>正常层叠进度条</h5>
    <div class="progress">
        <div class="progress-bar progress-bar-success" style="width:20%"></div>
        <div class="progress-bar progress-bar-info" style="width:10%"></div>
        <div class="progress-bar progress-bar-warning" style="width:30%"></div>
        <div class="progress-bar progress-bar-danger" style="width:15%"></div>
    </div> 
    <h5>不良效果层叠进度条</h5> 
    <div class="progress">
        <div class="progress-bar progress-bar-success" style="width:20%"></div>
        <div class="progress-bar progress-bar-info" style="width:40%"></div>
        <div class="progress-bar progress-bar-warning" style="width:30%"></div>
        <div class="progress-bar progress-bar-danger" style="width:45%"></div>
    </div> 
    <h5>层叠条纹进度条</h5>
    <div class="progress">
        <div class="progress-bar progress-bar-success" style="width:20%"></div>
        <div class="progress-bar progress-bar-info" style="width:20%"></div>
        <div class="progress-bar progress-bar-warning" style="width:30%"></div>
        <div class="progress-bar progress-bar-danger" style="width:15%"></div>
    </div>  
    <div class="progress">
        <div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div>
        <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
        <div class="progress-bar progress-bar-striped progress-bar-warning" style="width:30%"></div>
        <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
    </div> 
    <div class="progress">
        <div class="progress-bar progress-bar-success" style="width:20%"></div>
        <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
        <div class="progress-bar progress-bar-warning" style="width:30%"></div>
        <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
    </div>

![909997-20160819115008484-1372785661.png][]

## 进度条--带Label的进度条 ##

![909997-20160819115508609-139361020.png][]

转载于:https://www.cnblogs.com/family-626-77/p/5787090.html

[909997-20160819105827562-1666285284.png]: /images/20220109/0edae121db244bda87acf7c33bd3c8db.png
[909997-20160819111434703-731317664.png]: /images/20220109/ff30441ce3ca437987ddf37730e30e0e.png
[909997-20160819112214421-1733856009.png]: /images/20220109/2fbe27032bbd4e6baf33418d20950518.png
[909997-20160819114602281-116498121.png]: /images/20220109/b8bcb6c312da4b71845eafb4360aef4b.png
[909997-20160819115008484-1372785661.png]: /images/20220109/43ab1c5aa95b48b38d416e6bdbea3d0b.png
[909997-20160819115508609-139361020.png]: /images/20220109/14af4c2d8bda4780b72ffee005195813.png