首页 > 代码库 > bootstrap3的 progress 进度条

bootstrap3的 progress 进度条

2024-10-14 20:34:39   216人阅读

：

2.3版               3.0版

 

.bar.progress-bar
.bar-*.progress-bar-*
2、代码：

 

 

[html] view plain copy
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <link rel="stylesheet" href=http://www.mamicode.com/"dist/css/bootstrap.css" >  
  6. <script src=http://www.mamicode.com/"dist/js/bootstrap.js"></script>  
  7. <title>无标题文档</title>  
  8. </head>  
  9.   
  10. <body style="margin:200px;">  
  11. <span>普通的进度条</span>  
  12. <div class="progress">   
  13.     <div class="progress-bar" role="progessbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">  
  14.         <span class="sr-only">60% Complete</span>  
  15.     </div>  
  16. </div>  
  17.   
  18. <span>彩条进度条，当然去掉 progress-striped 就会是每个单色的进度条（不支持IE8）</span>  
  19. <div class="progress progress-striped">  
  20.   <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">  
  21.     <span class="sr-only">40% Complete (success)</span>  
  22.   </div>  
  23. </div>  
  24. <div class="progress progress-striped">  
  25.   <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">  
  26.     <span class="sr-only">20% Complete</span>  
  27.   </div>  
  28. </div>  
  29. <div class="progress progress-striped">  
  30.   <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">  
  31.     <span class="sr-only">60% Complete (warning)</span>  
  32.   </div>  
  33. </div>  
  34. <div class="progress progress-striped">  
  35.   <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">  
  36.     <span class="sr-only">80% Complete (danger)</span>  
  37.   </div>  
  38. </div>  
  39.   
  40. <span>炫动进度条 加active（不支持各个IE版本）</span>  
  41. <div class="progress progress-striped active">  
  42.   <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">  
  43.     <span class="sr-only">45% Complete</span>  
  44.   </div>  
  45. </div>  
  46. </body>  
  47. </html>  

3、相对应的效果图：

 

技术分享

 
 

bootstrap3的 progress 进度条


联系
我们