看程序学bootstrap24-组件之进度条_layaair 进度条-优快云博客

本文链接：https://blog.youkuaiyun.com/tujiahao1/article/details/93640594

示例 1 : 基本进度条

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<div class="progress">
  <div class="progress-bar" style="width: 60%;">
  </div>
</div>

示例 2 : 带有提示的进度条

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="progress">
  <div class="progress-bar" style="width: 60%; min-width: 2em;" >
    60%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" style="width: 0%; min-width: 2em;" >
    0%
  </div>
</div>

示例 3 : 不同颜色的进度条

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="progress">
  <div class="progress-bar progress-bar-success"  style="width: 40%">
    40%
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info"   style="width: 20%">
    20%
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning"   style="width: 60%">
    60%
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger"   style="width: 80%">
    80%
  </div>
</div>

示例 4 : 条纹

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped"  style="width: 40%">
    40%
  </div>
</div>

示例 5 : 发廊

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="progress">
  <div class="progress-bar progress-bar-striped active" style="width: 45%">
    45%
  </div>
</div>

示例 6 : 堆叠

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
 
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
 
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
 
  </div>
</div>