bootstrap為我們提供具有漂亮樣式的進度條來表示乙個事務的進度，如下：
實現方法如下：
（1）引入bootrap檔案，
[html]
view plain
copy
<
link
rel=
"stylesheet"
href
="../libs/bootstrap-3.3.7/css/bootstrap.css"
>
（2）新增乙個；
（3）在中新增乙個
[html]
view plain
copy
<
divclass
="progress-bar"
aria-valuenow
="40"
aria-valuemax
="100"
aria-valuemin
="0"
style
="width:40%;"
>
其中，aria-valuenow="40"——進度條目前進度值。
aria-valuemax="100"——最大進度值。
aria-valuemin=「0」——最小進度值。
style="width:40%;"——讓進度條指在40%的位置。
完整**如下：
[html]
view plain
copy
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>
進度條title
>
<
link
rel=
"stylesheet"
href
="../libs/bootstrap-3.3.7/css/bootstrap.css"
>
head
>
<
body
>
<
divclass
="container"
style
="width: 600px"
>
<
p>
預設的進度條
p>
<
divclass
="progress"
>
<
divclass
="progress-bar"
aria-valuenow
="40"
aria-valuemax
="100"
aria-valuemin
="0"
style
="width:40%;"
>
div>
div>
div>
body
>
html
>
以上是實現乙個預設進度條，底色的灰色，進度顏色是藍色，我們還可以在預設進度條的基礎上，通過加入不同的樣式來實現豐富多彩的進度條。
（1）交替進度條：在中加入.progress-bar-success、progress-bar-info、progress-bar-warning、progress-bar-danger。
[html]
view plain
copy
<
p>
交替的進度條
p>
<
divclass
="progress"
>
<
divclass
="progress-bar progress-bar-info"
aria-valuemin
="0"
aria-valuemax
="100"
aria-valuenow
="60"
style
="width:60%"
>
div>
div
（2）條紋進度條：在加入.progress-striped。
[html]
view plain
copy
<
divclass
="progress progress-striped"
>
<
divclass
="progress-bar progress-bar-info"
aria-valuemax
="100"
aria-valuemin
="0"
aria-valuenow
="40"
style
="width:40%"
>
div>
div>
（3）動畫進度條：在條紋進度條的基礎上，在中加入.active。
[html]
view plain
copy
<
p>
動畫進度條
p>
<
divclass
="progress progress-striped active"
>
<
divclass
="progress-bar progress-bar-warning"
aria-valuemax
="100"
aria-valuemin
="0"
aria-valuenow
="40"
style
="width:40%"
>
div>
div>
（4）堆疊進度條：
把多個進度條放在相同的
中。[html]
view plain
copy
[html]
view plain
copy
<
p>
堆疊進度條
p>
<
divclass
="progress"
>
<
divclass
="progress-bar progress-bar-info"
aria-valuemin
="0"
aria-valuemax
="100"
aria-valuenow
="40"
style
="width:40%"
>
div>
<
divclass
="progress-bar progress-bar-success"
aria-valuemin
="0"
aria-valuemax
="100"
aria-valuenow
="20"
style
="width:20%"
>
div>
div>
效果如下：Bootstrap中進度條樣式詳解
最簡單的進度條需要幾行 在bootstrap中，只需要兩句。class progress class progress bar style width 60 div div 不考慮 規範的話，class progress class progress bar style width 60 div d...
bootstrap多種樣式進度條展示
1 預設的進度條 新增乙個帶有class progress 的div，在其內新增乙個帶有 class progress bar 的空div，為空div新增乙個以百分比表示的style屬性，如 style 60 表示進度條在60 的位置。2 不同樣式的進度條 新增乙個帶有class progress ...
Bootstrap 進度條特效
預設的進度條 建立乙個基本的進度條的步驟如下 新增乙個帶有 class progress 的 接著，在上面的 內，新增乙個帶有 class progress bar 的空的 新增乙個帶有百分比表示的寬度的 style 屬性，例如 style 60 表示進度條在 60 的位置。40 完成 交替的進度條...