建站
咨詢
售后
建站咨詢
新聞中心
Foundation 進(jìn)度條
Foundation 進(jìn)度條可以作為程序處理的程度來顯示：
康平ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！
我們可以在 < 默認(rèn)情況下，進(jìn)度條顏色為藍(lán)色。不同顏色的類為： < < < < < < < 可以使用 < < < < 可以使用 CSS 為進(jìn)度條添加標(biāo)簽。以下實(shí)例中我們添加了 元素來顯示百分比： < < < 嘗試一下 ?.progress 類來創(chuàng)建進(jìn)度條， .meter 類用于子元素()。我們可以在 元素中設(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 類用于為進(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 來修改進(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
>
網(wǎng)頁標(biāo)題：創(chuàng)新互聯(lián)Foundation教程：Foundation 進(jìn)度條
分享網(wǎng)址：http://www.5511xx.com/article/dpisisj.html
