网站建设资讯

NEWS

网站建设资讯

BootStrap组件之进度条的基本用法

1、进度条基本用法

创新互联是一家企业级云计算解决方案提供商,超15年IDC数据中心运营经验。主营GPU显卡服务器,站群服务器,绵阳机房托管,海外高防服务器,成都机柜租用,动态拨号VPS,海外云手机,海外云服务器,海外服务器租用托管等。

主要依赖.progress和.progress-bar

aria-valuenow表示当前值

aria-valuemin表示最小值

aria-valuemax表示最大值

width:60%表示当前进度条位置

2、带有提示标签的进度条

60%

3、根据情境变化效果

BootStrap组件之进度条的基本用法

60%
60%
60%
60%

.progress-bar-danger
.progress-bar-info
.progress-bar-success
.progress-bar-warning

4、条纹效果

.progress-bar-striped可以和其他状态的类一起使用

60%

5、动画效果

为 .progress-bar-striped 添加 .active 类,使其呈现出由右向左运动的动画效果。

60%

6、堆叠效果

把多个进度条放入同一个 .progress 中,使它们呈现堆叠的效果。

35% Complete (success)
20% Complete (warning)
10% Complete (danger)

以上所述是小编给大家介绍的BootStrap组件之进度条的基本用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!


网页名称:BootStrap组件之进度条的基本用法
分享URL:http://cdweb.net/article/jdssod.html