正文

bootstrap3的 progress 进度条

IP云
IP云V管理员/4 阅读
09/01
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

：

2.3版               3.0版

.bar.progress-bar
.bar-*.progress-bar-*

2、代码：

  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="dist/css/bootstrap.css" >
  6. <script src="dist/js/bootstrap.js"></script>
  7. <title>无标题文档</title>
  8. </head>
  9. <body style="margin:200px;">
  10. <span>普通的进度条</span>
  11. <div class="progress">
  12. <div class="progress-bar" role="progessbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
  13. <span class="sr-only">60% Complete</span>
  14. </div>
  15. </div>
  16. <span>彩条进度条，当然去掉 progress-striped 就会是每个单色的进度条（不支持IE8）</span>
  17. <div class="progress progress-striped">
  18. <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
  19. <span class="sr-only">40% Complete (success)</span>
  20. </div>
  21. </div>
  22. <div class="progress progress-striped">
  23. <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
  24. <span class="sr-only">20% Complete</span>
  25. </div>
  26. </div>
  27. <div class="progress progress-striped">
  28. <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
  29. <span class="sr-only">60% Complete (warning)</span>
  30. </div>
  31. </div>
  32. <div class="progress progress-striped">
  33. <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
  34. <span class="sr-only">80% Complete (danger)</span>
  35. </div>
  36. </div>
  37. <span>炫动进度条 加active（不支持各个IE版本）</span>
  38. <div class="progress progress-striped active">
  39. <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
  40. <span class="sr-only">45% Complete</span>
  41. </div>
  42. </div>
  43. </body>
  44. </html>

3、相对应的效果图：