Bootstrap—进度条progress-bar
来源：互联网 发布：淘宝上钻要多少销量 编辑：程序博客网 时间：2024/05/01 11:46
Bootstrap为我们提供具有漂亮样式的进度条来表示一个事务的进度，如下：
实现方法如下：
（1）引入bootrap文件，
<link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">
（2）添加一个<div class="progress">；
（3）在<div class="progress">中添加一个<div class="progress-bar">
<div class="progress-bar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0" style="width:40%;">其中，
aria-valuenow="40"——进度条目前进度值。
aria-valuemax="100"——最大进度值。
aria-valuemin=“0”——最小进度值。
style="width:40%;"——让进度条指在40%的位置。
完整代码如下：
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>进度条</title> <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css"></head><body><div class="container" style="width: 600px"> <p>默认的进度条</p> <div class="progress"> <div class="progress-bar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0" style="width:40%;"> </div> </div></div></body></html>以上是实现一个默认进度条，底色的灰色，进度颜色是蓝色，我们还可以在默认进度条的基础上，通过加入不同的样式来实现丰富多彩的进度条。
（1）交替进度条：在<div class="progress-bar">中加入.progress-bar-success、progress-bar-info、progress-bar-warning、progress-bar-danger。
<p>交替的进度条</p><div class="progress"> <div class="progress-bar progress-bar-info" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60" style="width:60%"></div></div
（2）条纹进度条：在<div class="progress-bar"> 加入.progress-striped。
<div class="progress progress-striped"> <div class="progress-bar progress-bar-info" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" style="width:40%"> </div> </div>
（3）动画进度条：在条纹进度条的基础上，在<div class="progress progress-striped">中加入.active。
<p>动画进度条</p> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-warning" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" style="width:40%"> </div> </div>
（4）堆叠进度条：把多个进度条放在相同的<div class="progress"> 中。
<p>堆叠进度条</p> <div class="progress"> <div class="progress-bar progress-bar-info" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40" style="width:40%"></div> <div class="progress-bar progress-bar-success" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20" style="width:20%"></div> </div>
效果如下：
本文参考资料来自：http://www.runoob.com/bootstrap/bootstrap-progress-bars.html
3 0
- Bootstrap—进度条progress-bar
- 进度条（progress bar）
- bootstrap中的 progress bar
- bootstrap中的 progress bar
- Bootstrap基础12——进度条progress
- 进度条简明基础(Progress Bar)
- Bootstrap Progress（进度条控件）
- Adnroid 最全的 进度条 progress bar
- Android-RoundCornerProgressBar——Android圆角进度条(Progress Bar)类库
- 纯CSS3进度条制作-Pure CSS3 Progress Bar
- adf学习：进度条的使用(progress bar demo)
- C# Windows 7任务栏开发之进度条(Progress Bar)
- progress bar
- 微信小程序—progress(进度条)
- 进度条progress
- Progress进度条
- progress进度条
- 安卓Android多阶段进度条progress bar附带动画效果
- iOS动画基础讲解
- 单片机程序优化经验
- Android基础之多线程详解
- 64位操作系统运行由32位操作系统生成的C/C++可执行文件
- 记录一个简单包含mk的makefile
- Bootstrap—进度条progress-bar
- 应用层
- spring注解开发AnnotationConfigApplicationContext的使用
- NLog.config配置备份
- 【iOS开发】iOS10以后相机、相册等授权问题：The app’s Info.plist must contain an NSMicrophoneUsageDescription key
- Git 基本使用方法总结
- 金额小数点的一些校验
- idea 使用maven tomcat plugin 运行项目
- Linux下使用git命令及github项目
