建站
咨詢
售后
建站咨詢
新聞中心
Bootstrap5 進(jìn)度條
創(chuàng)新互聯(lián)是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來公司不斷探索創(chuàng)新，始終堅持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過去的十多年時間我們累計服務(wù)了上千家以及全國政企客戶，如成都塔吊租賃等企業(yè)單位，完善的項目管理流程，嚴(yán)格把控項目進(jìn)度與質(zhì)量監(jiān)控加上過硬的技術(shù)實力獲得客戶的一致表揚。
進(jìn)度條可以顯示用戶任務(wù)的完成過程。
創(chuàng)建一個基本的進(jìn)度條的步驟如下：
- 添加一個帶有 .progress 類的 。
- 接著，在上面的
內(nèi)，添加一個帶有 class .progress-bar 的空的。- 添加一個帶有百分比表示的寬度的 style 屬性，例如 style="width:70%" 表示進(jìn)度條在 70% 的位置。
實例
<
div
class
=
"
progress
"
>
<
div
class
=
"
progress-bar
"
style
=
"
width:70%
"
>
div
>
div
>
嘗試一下 ?進(jìn)度條高度
進(jìn)度條高度默認(rèn)為 16px。我們可以使用 CSS 的
height屬性來修改他：實例
<
div
class
=
"
progress
"
style
=
"
height:20px;
"
>
<
div
class
=
"
progress-bar
"
style
=
"
width:40%;
"
>
div
>
div
>
嘗試一下 ?進(jìn)度條標(biāo)簽
可以在進(jìn)度條內(nèi)添加文本，如進(jìn)度的百分比：
實例
<
div
class
=
"
progress
"
>
<
div
class
=
"
progress-bar
"
style
=
"
width:70%
"
>
70%
div
>
div
>
嘗試一下 ?不同顏色的進(jìn)度條
默認(rèn)情況下進(jìn)度條為藍(lán)色，Bootstrap5 還提供了以下顏色的進(jìn)度條：
實例
<
div
class
=
"
progress
"
>
<
div
class
=
"
progress-bar bg-success
"
style
=
"
width:40%
"
>
div
>
div
>
<
div
class
=
"
progress
"
>
<
div
class
=
"
progress-bar bg-info
"
style
=
"
width:50%
"
>
div
>
div
>
<
div
class
=
"
progress
"
>
<
div
class
=
"
progress-bar bg-warning
"
style
=
"
width:60%
"
>
div
>
div
>
<
div
class
=
"
progress
"
>
<
div
class
=
"
progress-bar bg-danger
"
style
=
"
width:70%
"
>
div
>
div
>
嘗試一下 ?條紋的進(jìn)度條
可以使用
.progress-bar-striped類來設(shè)置條紋進(jìn)度條：實例
<
div
class
=
"
progress
"
>
<
div
class
=
"
progress-bar progress-bar-striped
"
style
=
"
width:40%
"
>
div
>
div
>
嘗試一下 ?動畫進(jìn)度條
使用
.progress-bar-animated類可以為進(jìn)度條添加動畫：實例
<
div
class
=
"
progress-bar progress-bar-striped progress-bar-animated
"
style
=
"
width: 40%
"
>
div
>
嘗試一下 ?混合色彩進(jìn)度條
進(jìn)度條可以設(shè)置多種顏色：
實例
<
div
class
=
"
progress
"
>
<
div
class
=
"
progress-bar bg-success
"
style
=
"
width:40%
"
>
Free Space
div
>
<
div
class
=
"
progress-bar bg-warning
"
style
=
"
width:10%
"
>
Warning
div
>
<
div
class
=
"
progress-bar bg-danger
"
style
=
"
width:20%
"
>
Danger
div
>
div
>
嘗試一下 ?
新聞標(biāo)題：創(chuàng)新互聯(lián)Bootstrap5教程：Bootstrap5進(jìn)度條
轉(zhuǎn)載來于：http://www.dlmjj.cn/article/dpddjhp.html - 接著，在上面的
