bootstrap——组件（八、进度条）

最新推荐文章于 2019-01-31 21:41:36 发布

zaichuanguanshui

最新推荐文章于 2019-01-31 21:41:36 发布

阅读量698

点赞数

分类专栏： web 文章标签： bootstrap progress

本文链接：https://blog.youkuaiyun.com/zaichuanguanshui/article/details/54616531

版权

web 专栏收录该内容

62 篇文章

订阅专栏

本文介绍了Bootstrap的进度条组件，包括基本用法、带有提示标签的进度条、根据不同情境变化的效果（如danger、info、success、warning）、条纹效果和动画效果，以及如何实现进度条的堆叠展示。

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

1、进度条基本用法

主要依赖.progress和.progress-bar
aria-valuenow表示当前值
aria-valuemin表示最小值
aria-valuemax表示最大值
width:60%表示当前进度条位置

<div class="progress">
    <div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>

2、带有提示标签的进度条

<div class="progress">
    <div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span>60%</span>
    </div>
</div>

3、根据情境变化效果

这里写图片描述

<div class="progress">
    <div class="progress-bar progress-bar-danger" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span>60%</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span>60%</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span>60%</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span>60%</span>
    </div>
</div>

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

4、条纹效果

.progress-bar-striped可以和其他状态的类一起使用

<div class="progress">
    <div class="progress-bar progress-bar-warning progress-bar-striped" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span>60%</span>
    </div>
</div>

5、动画效果

为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。

<div class="progress">
    <div class="progress-bar progress-bar-striped active" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span>60%</span>
    </div>
</div>

6、堆叠效果

把多个进度条放入同一个 .progress 中，使它们呈现堆叠的效果。

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 35%">
        <span class="sr-only">35% Complete (success)</span>
    </div>
    <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
        <span class="sr-only">20% Complete (warning)</span>
    </div>
    <div class="progress-bar progress-bar-danger" style="width: 10%">
        <span class="sr-only">10% Complete (danger)</span>
    </div>
</div>