Bootstrap进度条

来源：互联网发布：身体域网络的作用范围编辑：程序博客网时间：2024/04/28 11:56

Bootstrap进度条使用css3过渡和动画来获得效果。
1.创建一个进度条的步骤

添加一个带有.progress的<div>在上面的<div>内，添加一个带有class.progress-bar的空的<div>添加一个带有百分比表示的宽度style属性，例如style="60%",表示进度条在60%的位置

2.基本的进度条
这里写图片描述

<div class="progress">   <div class="progress-bar"     style="width: 40%;">        </div></div>

3.交替的进度条

添加class progress-bar-*的<div>,*可以是success,info,warning,danger

效果图：
这里写图片描述

<div class="progress">   <div class="progress-bar progress-bar-success" role="progressbar"       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"        style="width: 90%;">      <span class="sr-only">90% 完成（成功）</span>   </div></div>

4.条纹进度条
添加类.progress-striped
这里写图片描述

<div class="progress progress-striped">   <div class="progress-bar progress-bar-success" role="progressbar"       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"        style="width: 60%;">      <span class="sr-only">90% 完成（成功）</span>   </div></div>

5.动画进度条
添加类class.active
进度条像是在转动

<div class="progress progress-striped active">   <div class="progress-bar progress-bar-success" role="progressbar"       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"        style="width: 60%;">      <span class="sr-only">90% 完成（成功）</span>   </div></div>

6.堆叠进度条
把多个进度条放在相同的,progress中可以实现堆叠
这里写图片描述

<div class="progress progress-striped active">  <div class="progress-bar progress-bar-success" role="progressbar"       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"        style="width: 40%;"> </div>  <div class="progress-bar progress-bar-info" role="progressbar"       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"        style="width: 10%;"> </div>  <div class="progress-bar progress-bar-warning" role="progressbar"       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"        style="width: 20%;"> </div></div>

0 0