Bootstrap 進度條

簡介

在本教學中，您將看到如何使用 Bootstrap 創建加載、重定向或動作狀態的進度條。

基本的、條紋的和動畫的進度條實例

實例

<div class="container">
    <div class="row">
        <div class="span4">
            <h3>一個基本的垂直方向進度條</h3>
            <div class="progress">
                <div class="bar"
                     style="width: 60%;"></div>
            </div>
            <h3>條紋進度條,使用梯度來創建一個條紋的效果</h3>
            <div class="progress progress-striped">
                <div class="bar" style="width: 60%;"></div>
            </div>
            <h3>一個動畫進度條</h3>
            <div class="progress progress-striped active">
                <div class="bar" style="width: 50%;"></div>
            </div>
        </div>
    </div>

    <hr>
</div> <!-- /container -->

請注意，如果要顯示第三種進度條，請添加 '.active' class 來讓它具有運動感。Bootstrap 使用 css3 過渡效果創建這個動畫。您也可以通過 JavaScript 動態地調整進度條的寬度。這樣，就可以掌握進度行為。

在創建進度條時，您可以使用其他的顏色。

帶有其他顏色的進度條實例

實例

<div class="container">
    <div class="row">
        <div class="span4">
            <h3>進度條也可能有其他顏色</h3>
            <div class="progress progress-info progress-striped" style="margin-bottom: 9px;">
                <div class="bar" style="width: 20%"></div>
            </div>
            <div class="progress progress-success progress-striped active" style="margin-bottom: 9px;">
                <div class="bar" style="width: 40%"></div>
            </div>
            <div class="progress progress-warning progress-striped" style="margin-bottom: 9px;">
                <div class="bar" style="width: 60%"></div>
            </div>
            <div class="progress progress-danger progress-striped active" style="margin-bottom: 9px;">
                <div class="bar" style="width: 80%"></div>
            </div>
        </div>
    </div>
</div>
<hr>
</div> <!-- /container -->

流覽器支持

我們已經在不同的流覽器中測試了上面的兩個實例。我們發現，在 Firefox 12 和 Chrome 19.0.1084.52 中能正常顯示，但是在 Opera 11.62 中不能顯示動畫效果，即便您可以看到條紋和梯度。在 Internet Explorer 8 中，所有的顯示效果都不佳，沒有動畫，也沒有條紋和梯度。

點擊這裏，下載本教學中使用到的所有 HTML、CSS、JS 和圖片檔。