快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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://6mz.cn/article/jdssod.html

其他资讯