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

Bootstrap 2019-01-07

1、进度条基本用法

主要依赖.progress和.progress-bar

aria-valueNow表示当前值

aria-valuemin表示最小值

aria-valuemax表示最大值

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

rush:js;">
Now="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">

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

rush:js;">
Now="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60%

3、根据情境变化效果

这里写图片描述

rush:js;">
Now="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60%
Now="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60%
Now="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60%
Now="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60%

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

4、条纹效果

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

rush:js;">
Now="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60%

5、动画效果

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

rush:js;">
Now="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60%

6、堆叠效果

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

rush:js;">

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

bootstrapbootstrap组件组件组件进度条

相关文章

Bootstrip HTML 查询搜索常用格式模版
Bootstrip HTML 查询搜索常用格式模版 <form class=&...
如何在按钮上加红色数字
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
让两个按钮左右排列
要让两个按钮左右排列，你可以使用 Bootstrap 的网格系统将它...
status能否设置为布尔值类型，前端采用复选框形式
是的，可以将status设置为布尔类型，这样可以在前端使用复选...
Bootstrap 按钮总结
前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自...
Python学习-day52-bootstrap
起步导入：<linkrel="stylesheet"href="b...