建站
咨詢
售后
建站咨詢
新聞中心
Bootstrap4 進(jìn)度條
進(jìn)度條可以顯示用戶任務(wù)的完成過(guò)程。
創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比南鄭網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式南鄭網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋南鄭地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。
創(chuàng)建一個(gè)基本的進(jìn)度條的步驟如下：
- 添加一個(gè)帶有 .progress 類的 。
- 接著，在上面的
內(nèi)，添加一個(gè)帶有 class .progress-bar 的空的。- 添加一個(gè)帶有百分比表示的寬度的 style 屬性，例如 style="width:70%" 表示進(jìn)度條在 70% 的位置。
實(shí)例
<
div
class
=
"
progress
"
>
<
div
class
=
"
progress-bar
"
style
=
"
width:70%
"
>
div
>
div
>
嘗試一下 ?進(jìn)度條高度
進(jìn)度條高度默認(rèn)為 16px。我們可以使用 CSS 的
height屬性來(lái)修改他：實(shí)例
<
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)度的百分比：
實(shí)例
<
div
class
=
"
progress
"
>
<
div
class
=
"
progress-bar
"
style
=
"
width:70%
"
>
70%
div
>
div
>
嘗試一下 ?不同顏色的進(jìn)度條
默認(rèn)情況下進(jìn)度條為藍(lán)色，Bootstrap4 還提供了以下顏色的進(jìn)度條：
實(shí)例
<
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類來(lái)設(shè)置條紋進(jìn)度條：實(shí)例
<
div
class
=
"
progress
"
>
<
div
class
=
"
progress-bar progress-bar-striped
"
style
=
"
width:40%
"
>
div
>
div
>
嘗試一下 ?動(dòng)畫進(jìn)度條
使用
.progress-bar-animated類可以為進(jìn)度條添加動(dòng)畫：實(shí)例
<
div
class
=
"
progress-bar progress-bar-striped progress-bar-animated
"
style
=
"
width: 40%
"
>
div
>
嘗試一下 ?混合色彩進(jìn)度條
進(jìn)度條可以設(shè)置多種顏色：
實(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
>
嘗試一下 ?
本文題目：創(chuàng)新互聯(lián)Bootstrap4教程：Bootstrap4進(jìn)度條
網(wǎng)站地址：http://m.fisionsoft.com.cn/article/coiggch.html - 接著，在上面的
