Manuel de base en chinois /Foundation 进度条

Foundation 进度条

Foundation 进度条可以作为程序处理的程度来显示:

我们可以在

元素中使用.progress类来创建进度条,.meter类用于子元素()。我们可以在 元素中设置进度百分比,如下所示:

实例

   Foundation 实例       

基本进度条


运行实例 »

点击 "运行实例" 按钮查看在线实例


进度条颜色

默认情况下,进度条颜色为蓝色。不同颜色的类为:.secondary,.success, 或.alert:

实例

   Foundation 实例       

进度条颜色


运行实例 »

点击 "运行实例" 按钮查看在线实例


圆角进度条

.radius.round类用于为进度条添加圆角效果:

实例

   Foundation 实例       

圆角进度条

默认:

圆角:

圆形:


运行实例 »

点击 "运行实例" 按钮查看在线实例


进度条尺寸

可以使用.small-num.large-num来修改进度条的宽度,num是一个数字在 1(8.33%) 和 12(default (100%)) 之间:

实例

   Foundation 实例       

进度条尺寸


运行实例 »

点击 "运行实例" 按钮查看在线实例


进度条标签

可以使用 CSS 为进度条添加标签。以下实例中我们添加了 元素来显示百分比:

实例

   Foundation 实例        

进度条标签

75%
50%
25%

运行实例 »

点击 "运行实例" 按钮查看在线实例