結果如下所示：

三：條紋的進度條

創(chuàng)建一個條紋的進度條的步驟如下：

1. 添加一個帶有 class .progress 和 .progress-striped 的

   。

2. 接著，在上面的

   內，添加一個帶有 class .progress-bar 和 class progress-bar-* 的空的

   。其中，* 可以是 success、info、warning、danger。

3. 添加一個帶有百分比表示的寬度的 style 屬性，例如 ; 表示進度條在 60% 的位置。

讓我們看看下面的實例：

 





90% 完成（成功）









30% 完成（信息）









20% 完成（警告）









10% 完成（危險）





 

結果如下所示：

四：動畫的進度條

創(chuàng)建一個動畫的進度條的步驟如下：

1. 添加一個帶有 class .progress 和 .progress-striped 的

   。同時添加 class .active。

2. 接著，在上面的

   內，添加一個帶有 class .progress-bar 的空的

   。

3. 添加一個帶有百分比表示的寬度的 style 屬性，例如 ; 表示進度條在 60% 的位置。

這將會使條紋具有從右向左的運動感。

讓我們看看下面的實例：

 





40% 完成





 

結果如下所示：

五：堆疊的進度條

您甚至可以堆疊多個進度條。把多個進度條放在相同的 .progress 中即可實現(xiàn)堆疊，如下面的實例所示：

 





40% 完成





30% 完成（信息）



progressbar"

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

>

20% 完成（警告）





 

結果如下所示：

以上是“Bootstrap如何實現(xiàn)各種進度條”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)網站建設公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。