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

前端之家收集整理的这篇文章主要介绍了BootStrap组件之进度条的基本用法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1、进度条基本用法

主要依赖.progress和.progress-bar

aria-valuenow表示当前值

aria-valuemin表示最小值

aria-valuemax表示最大值

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

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

60%

3、根据情境变化效果

这里写图片描述

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 中,使它们呈现堆叠的效果

以上所述是小编给大家介绍的BootStrap组件之进度条的基本用法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/bootstrap/42318.html
bootstrapbootstrap组件组件组件进度条

猜你在找的Bootstrap相关文章