进度条

为进度条定义不同样式。

默认

进度条由背景和进度条本身组成,用来体现增长。

描述
progress 该类用在父元素来创建进度条的背景。
progress-bar 该类需要被添加至子元素用于创建实际的进度条。

示例

40%

代码

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

进度条状态

示例

代码

<div class="progress">
    <div style="width: 90%;" class="progress-bar progress-bar-info"></div>
</div>
<div class="progress">
    <div style="width: 75%;" class="progress-bar progress-bar-success"></div>
</div>
<div class="progress">
    <div style="width: 55%;" class="progress-bar progress-bar-warning"></div>
</div>
<div class="progress">
    <div style="width: 35%;" class="progress-bar progress-bar-danger"></div>
</div>

进度条条纹

示例

代码

<div class="progress progress-striped">
    <div style="width: 65%;" class="progress-bar progress-bar-info"></div>
</div>
<div class="progress progress-striped active">
    <div style="width: 85%;" class="progress-bar progress-bar-info"></div>
</div>

进度条大小

示例

代码

<div class="progress progress-mi">
    <div style="width: 75%;" class="progress-bar progress-bar-info"></div>
</div>
<div class="progress progress-sm">
    <div style="width: 45%;" class="progress-bar progress-bar-info"></div>
</div>

进度条组合

示例

35% Complete (info)
25% Complete (success)
15% Complete (warning)
5% Complete (danger)

代码

<div class="progress">
    <div class="progress-bar progress-bar-info" style="width: 35%">
        35% Complete (info)
    </div>
    <div class="progress-bar progress-bar-success" style="width: 25%">
        25% Complete (success)
    </div>
    <div class="progress-bar progress-bar-warning" style="width: 15%">
        15% Complete (warning)
    </div>
    <div class="progress-bar progress-bar-danger" style="width: 5%">
        5% Complete (danger)
    </div>
</div>