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 和圖片文件。