Foundation 基礎(chǔ)
Foundation 教程
Foundation 安裝
Foundation 按鈕
Foundation 按鈕組
Foundation 標(biāo)簽
Foundation 表單
Foundation 表格
Foundation 側(cè)邊欄
Foundation 頂部導(dǎo)航欄
Foundation 分頁
Foundation 滑動(dòng)導(dǎo)航
Foundation 滑塊
Foundation 價(jià)格表
Foundation 進(jìn)度條
Foundation 均衡器(Equalizer)
Foundation 開關(guān)
Foundation 列表
Foundation 麥哲倫（Magellan）導(dǎo)航
Foundation Joyride
Foundation 面板
Foundation 模態(tài)框
Foundation 輸入框 尺寸
Foundation 提示框
Foundation 提醒框
Foundation 圖標(biāo)
Foundation 圖片
Foundation 文本
Foundation 下拉菜單
Foundation 選項(xiàng)卡
Foundation 折疊列表
Foundation 手冊(cè)
Foundation CSS 參考手冊(cè)
Foundation CSS 可見性
Foundation 圖標(biāo)參考手冊(cè)
Foundation 網(wǎng)格
Foundation 塊狀網(wǎng)格
Foundation 網(wǎng)格 - 大型設(shè)備
Foundation 網(wǎng)格 - 水平堆疊
Foundation 網(wǎng)格 - 小型設(shè)備
Foundation 網(wǎng)格 - 中型設(shè)備
Foundation 網(wǎng)格實(shí)例
Foundation 網(wǎng)格系統(tǒng)
?
Ce document utilise Manuel du site Web PHP chinois Libérer
personnages
Foundation 進(jìn)度條
Foundation 進(jìn)度條可以作為程序處理的程度來顯示：
我們可以在 <div> 元素中使用 .progress 類來創(chuàng)建進(jìn)度條，.meter 類用于子元素(<span>)。我們可以在 <span> 元素中設(shè)置進(jìn)度百分比，如下所示：
實(shí)例
<div?class="progress"> ??<span?class="meter"?style="width:70%"></span> </div>實(shí)例預(yù)覽 ?
進(jìn)度條顏色
默認(rèn)情況下，進(jìn)度條顏色為藍(lá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>?實(shí)例預(yù)覽 ?
圓角進(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?rounded"> ??<span?class="meter"?style="width:50%"></span> </div>??實(shí)例預(yù)覽 ?
進(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> <!--?Default?width?--> <div?class="progress?large-12"> ??<span?class="meter"?style="width:50%"></span> </div>實(shí)例預(yù)覽 ?
進(jìn)度條標(biāo)簽
可以使用 CSS 為進(jìn)度條添加標(biāo)簽。以下實(shí)例中我們添加了<span> 元素來顯示百分比：
實(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>實(shí)例預(yù)覽 ?關(guān)于我們 聯(lián)系我們 留言板
手冊(cè)網(wǎng)