Bootstrap 进度条
默认进度条
进度条可以用来向用户显示程序在处理过程中的进度。
Bootstrap 提供了几种样式类型的进度条。
Bootstrap 的默认进度条如下所示:
创建一个默认进度条, 只需要向 <div> 元素添加一个 .progress 的样式:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>默认进度条</h2><div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"><span class="sr-only">完成 70%</span></div></div></div></body></html>
注意：Internet Explorer 9 及更早版本不支持进度条（因为它们是使用 CSS3 转换和动画来实现某些效果的）。注意：为了帮助提高使用屏幕阅读器的人的可访问性，您应该包含 aria-* 属性。
带标签的进度条
带有标签的进度条如下所示:
从进度条中删除 .sr-only 类，以显示百分比:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>带标签的进度条</h2><div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">70%</div></div></div></body></html>
彩色进度条
上下文样式类用来提供 "有含义的颜色"。
可以与进度条一起使用的上下文类包括:
.progress-bar-success.progress-bar-info.progress-bar-warning.progress-bar-danger
下面的实例演示如何使用不同的上下文样式类创建进度条:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>彩色进度条</h2><p>上下文类为进度条添加有颜色:</p><div class="progress"><div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">完成 40% (成功)</div></div><div class="progress"><div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">完成 50% (消息)</div></div><div class="progress"><div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">完成 60% (警告)</div></div><div class="progress"><div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">完成 70% (危险)</div></div></div></body></html>
带条纹的进度条
进度条也可以是带条纹的:
.progress-bar-striped 可以向进度条添加条纹样式:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>条纹进度条</h2><p>.progress-bar-striped 类可以向进度条添加条纹样式:</p><div class="progress"><div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">完成 40% (成功)</div></div><div class="progress"><div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">完成 50% (消息)</div></div><div class="progress"><div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">完成 60% (警告)</div></div><div class="progress"><div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">完成 70% (危险)</div></div></div></body></html>
进度条动画
使用 .active 样式给进度条添加动画效果:
实例
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Example</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>进度条动画效果</h2><p>.active 样式可以给进度条添加动画效果:</p><div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">40%</div></div></div></body></html>
分段式进度条
进度条也可以分段:
通过将多个进度条放入同一个 <div class="progress"> 来实现分段式进度条:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>分段式进度条</h2><p>通过将多个进度条放入同一个 div class="progress" 来实现分段式进度条</p><div class="progress"><div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">免费空间</div><div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">警告</div><div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">危险</div></div></div></body></html>