建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
Foundation 進(jìn)度條
Foundation 進(jìn)度條可以作為程序處理的程度來(lái)顯示：
康平ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書(shū)合作）期待與您的合作！
我們可以在 < 默認(rèn)情況下，進(jìn)度條顏色為藍(lán)色。不同顏色的類(lèi)為： < < < < < < < 可以使用 < < < < 可以使用 CSS 為進(jìn)度條添加標(biāo)簽。以下實(shí)例中我們添加了 元素來(lái)顯示百分比： < < < 嘗試一下 ?.progress 類(lèi)來(lái)創(chuàng)建進(jìn)度條， .meter 類(lèi)用于子元素()。我們可以在 元素中設(shè)置進(jìn)度百分比，如下所示：實(shí)例
div
class=
"progress"
>
<
span
class=
"meter"
style=
"width:70%"
>
<
/span
>
<
/div
>
嘗試一下 ?進(jìn)度條顏色
.secondary, .success, 或 .alert:實(shí)例
div
class=
"progress"
>
<
span
class=
"meter"
style=
"width:50%"
>
<
/span
>
<
/div
>
div
class=
"progress secondary"
>
<
span
class=
"meter"
style=
"width:50%"
>
<
/span
>
<
/div
>
div
class=
"progress success"
>
<
span
class=
"meter"
style=
"width:50%"
>
<
/span
>
<
/div
>
div
class=
"progress alert"
>
<
span
class=
"meter"
style=
"width:50%"
>
<
/span
>
<
/div
>
嘗試一下 ?圓角進(jìn)度條
.radius 和 .round 類(lèi)用于為進(jìn)度條添加圓角效果：實(shí)例
div
class=
"progress"
>
<
span
class=
"meter"
style=
"width:50%"
>
<
/span
>
<
/div
>
div
class=
"progress radius"
>
<
span
class=
"meter"
style=
"width:50%"
>
<
/span
>
<
/div
>
div
class=
"progress round"
>
<
span
class=
"meter"
style=
"width:50%"
>
<
/span
>
<
/div
>
嘗試一下 ?進(jìn)度條尺寸
.small-num 或 .large-num 來(lái)修改進(jìn)度條的寬度， num 是一個(gè)數(shù)字在 1(8.33%) 和 12(default (100%)) 之間:實(shí)例
div
class=
"progress large-1"
>
<
span
class=
"meter"
style=
"width:50%"
>
<
/span
>
<
/div
>
div
class=
"progress large-6"
>
<
span
class=
"meter"
style=
"width:50%"
>
<
/span
>
<
/div
>
div
class=
"progress large-9"
>
<
span
class=
"meter"
style=
"width:50%"
>
<
/span
>
<
/div
>
div
class=
"progress large-11"
>
<
span
class=
"meter"
style=
"width:50%"
>
<
/span
>
<
/div
>
<
div
class=
"progress large-12"
>
<
span
class=
"meter"
style=
"width:50%"
>
<
/span
>
<
/div
>
嘗試一下 ?進(jìn)度條標(biāo)簽
實(shí)例
<
style
>
.percentage {
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%, -50%);
font-size: 12px;
}
<
/style
>
div
class=
"progress"
>
<
span
class=
"meter"
style=
"position:relative;width:75%"
>
<
span
class=
"percentage"
>75%
<
/span
>
<
/span
>
<
/div
>
div
class=
"progress success"
>
<
span
class=
"meter"
style=
"position:relative;width:50%"
>
<
span
class=
"percentage"
>50%
<
/span
>
<
/span
>
<
/div
>
div
class=
"progress alert"
>
<
span
class=
"meter"
style=
"position:relative;width:25%"
>
<
span
class=
"percentage"
>25%
<
/span
>
<
/span
>
<
/div
>
當(dāng)前題目：創(chuàng)新互聯(lián)Foundation教程：Foundation 進(jìn)度條
當(dāng)前網(wǎng)址：http://m.fisionsoft.com.cn/article/dpisisj.html
