進(jìn)度條（Progress）
使用Bootstrap自定義進(jìn)度條的文件和示例，這些進(jìn)度條支持堆疊、動(dòng)態(tài)背景和文字標(biāo)簽。
On this page
工作原理
進(jìn)度條元件使用兩個(gè)HTML元素，一些CSS設(shè)定寬度以及一些屬性設(shè)定而成。我們不使用HTML5 progress元素，以確保您可以堆疊進(jìn)度條，增加動(dòng)畫、更換文字標(biāo)簽。
- 我們?cè)谕鈱邮褂?progress來(lái)指定進(jìn)度條的最大值。
- 我們?cè)趦?nèi)層使用.progress-bar來(lái)指定進(jìn)度條目前的值。
- .progress-bar需要inline設(shè)定、通用類別或是客制CSS來(lái)設(shè)定它們的寬度。
- .progress-bar也需要一些role和aria屬性來(lái)使其具有親和性。
集結(jié)以上所有，您將得到以下示例。
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>Bootstrap提供幾個(gè)寬度通用類別設(shè)定。基于您的需求，這些將幫助您快速設(shè)定進(jìn)度條。
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>標(biāo)簽
在.progress-bar中放置文字內(nèi)容，將標(biāo)簽添加到進(jìn)度條。
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>高度
我們只有在.progress上設(shè)置一個(gè)height值，如果改變這個(gè)值，那么內(nèi)部的.progress-bar就會(huì)自動(dòng)調(diào)整大小。
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>背景
使用背景通用類別更改各個(gè)進(jìn)度條的外觀。
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>多個(gè)進(jìn)度條
如果您需要，可在一個(gè)進(jìn)度條元件中加入多個(gè)進(jìn)度條。
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>條紋的
將.progress-bar-striped加到任何.progress-bar中，就能透過(guò)CSS漸變對(duì)進(jìn)度條的背景顏色加上條紋。
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>動(dòng)畫條紋
條紋漸變也可以制成動(dòng)畫。將.progress-bar-animated加到.progress-bar中，透過(guò)CSS3繪制從右到左的動(dòng)態(tài)效果。
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
Sass
Variables
$progress-height: 1rem;
$progress-font-size: $font-size-base * .75;
$progress-bg: $gray-200;
$progress-border-radius: $border-radius;
$progress-box-shadow: $box-shadow-inset;
$progress-bar-color: $white;
$progress-bar-bg: $primary;
$progress-bar-animation-timing: 1s linear infinite;
$progress-bar-transition: width .6s ease;
Keyframes
Used for creating the CSS animations for .progress-bar-animated. Included in
scss/_progress-bar.scss.
@if $enable-transitions {
@keyframes progress-bar-stripes {
0% { background-position-x: $progress-height; }
}
}