Bootstrap4 进度条

基本进度条

进度条可用于向用户显示他/她在进程中进行了多远。

要创建默认进度条，请添加.progress类到容器元素并添加.progress-bar类到它的子元素。使用CSSwidth属性设置进度条的宽度：

示例

亲自试一试 »

进度条高度

进度条的高度默认为16px。使用CSSheight属性来改变它。请注意，必须为进度容器和进度条设置相同的高度：

示例

亲自试一试 »

进度条标签

在进度条内添加文本以显示可见百分比：

70%

示例

亲自试一试 »

彩色进度条

默认情况下，进度条为蓝色（主要）。使用任何 Bootstrap 4 上下文背景类来更改其颜色：

示例

<div class="progress">
<div class="progress-bar" style="width:10%"></div>
</div>


<div class="progress">
<div class="progress-bar bg-success" style="width:20%"></div>
</div>


<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>


<div class="progress">
<div class="progress-bar bg-warning" style="width:40%"></div>
</div>


<div class="progress">
<div class="progress-bar bg-danger" style="width:50%"></div>
</div>


<div class="progress border">
<div class="progress-bar bg-white" style="width:60%"></div>
</div>


<div class="progress">
<div class="progress-bar bg-secondary" style="width:70%"></div>
</div>


<div class="progress border">
<div class="progress-bar bg-light" style="width:80%"></div>
</div>


<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>

亲自试一试 »

条纹进度条

使用.progress-bar-striped向进度条添加条纹的类：

示例

亲自试一试 »

动画进度条

添加.progress-bar-animated类来动画进度条：

示例

亲自试一试 »

多个进度条

进度条也可以堆叠：

可用空间

警告

危险

示例

<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
    Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
    Warning
</div>
<div class="progress-bar bg-danger" style="width:20%">
    Danger
</div>
</div>

亲自试一试 »