當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Bootstrap进度条

發布時間：2025/4/16 编程问答 15 豆豆

生活随笔收集整理的這篇文章主要介紹了 Bootstrap进度条小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Bootstrap 進度條使用 CSS3 過渡和動畫來獲得該效果。

Internet Explorer 9 及之前的版本號和舊版的 Firefox 不支持該特性，

Opera 12 不支持動畫。

默認的進度條

創建一個主要的進度條的過程例如以下：

加入一個帶有 class?.progress?的 <div>。
接著。在上面的 <div> 內。加入一個帶有 class?.progress-bar?的空的 <div>。
加入一個帶有百分比表示的寬度的 style 屬性，比如 style="60%"; 表示進度條在 60% 的位置。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width = device-width,initial-scale = 1.0"><link rel="stylesheet" href="bootstrap.min.css"><script src = "js/jquery-1.11.2.min.js"></script><script src = "js/bootstrap.min.js"></script><title>CSSDemo</title> </head> <body style="padding:30px;"><div class="container"><div class="col-lg-4"><div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0"style="width:40%;"></div><span class="sr-only">40%完畢</span></div><div class="progress"><div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemax="100"aria-valuemin="0" style="width:50%;"></div><span class="sr-only">20%完畢</span></div><div class="progress"><div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemax="100"aria-valuemin="0" style="width:60%;"></div><span class="sr-only">60%完畢</span></div><div class="progress"><div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemax="100"aria-valuemin="0" style="width:70%;"></div><span class="sr-only">70%完畢</span></div></div></div> </body> </html>

條紋的進度條

創建一個條紋的進度條的過程例如以下：

加入一個帶有 class?.progress?和?.progress-striped?的 <div>。
接著，在上面的 <div> 內，加入一個帶有 class?.progress-bar?和 class?progress-bar-*?的空的 <div>。當中，* 能夠是?success、info、warning、danger。
加入一個帶有百分比表示的寬度的 style 屬性，比如 style="60%"; 表示進度條在 60% 的位置。

動畫的進度條

創建一個動畫的進度條的過程例如以下：

加入一個帶有 class?.progress?和?.progress-striped?的 <div>。同一時候加入 class?.active。
接著，在上面的 <div> 內，加入一個帶有 class?.progress-bar?的空的 <div>。
加入一個帶有百分比表示的寬度的 style 屬性，比如 style="60%"; 表示進度條在 60% 的位置。

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

堆疊的進度條

把多個進度條放在同樣的?.progress?中就可以實現堆疊

<body style="padding:30px;"><div class="container"><div class="col-lg-4"><div class="progress progress-striped"><div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0"style="width:40%;"></div><span class="sr-only">40%完畢</span></div><div class="progress progress-striped"><div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemax="100"aria-valuemin="0" style="width:50%;"></div><span class="sr-only">20%完畢</span></div><div class="progress progress-striped"><div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemax="100"aria-valuemin="0" style="width:60%;"></div><span class="sr-only">60%完畢</span></div><div class="progress progress-striped"><div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemax="100"aria-valuemin="0" style="width:70%;"></div><span class="sr-only">70%完畢</span></div></div></div> </body>

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的Bootstrap进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： canvas requestAnima
下一篇：使用php开发，基于swoole扩展开发