7-7 进度条
本节编程练习不计算学习进度，请电脑登录imooc.com操作

进度条

在网页中，进度条的效果并不少见，比如一个评分系统，比如加载状态等。就如下图所示的一个评分系统，他就是一个简单的进度条效果：

进度条和其他独立组件一样，开发者可以根据自己的需要，选择对应的版本：

  ☑ LESS版本：源码文件progress-bars.less

  ☑ Sass版本：源码文件_progress-bars.scss

  ☑ 编译后版本：bootstrap.css文件第4500行～第4575行

而且Bootstrap框架为大家提供多种样式风格的进度条，供大家使用(见右侧代码编辑器)，这一小节只是给大家直观上展示了这些进度条样式，接下来几个小节中，我们将详细讲解这些进度条如何使用。

任务

index.html 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>进度条--基本样式</title>
  6. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <h2>基本进度条</h2>
  10. <div class="progress">
  11.      <div class="progress-bar" style="width:40%">
  12.     </div>
  13. </div> 
  14. <h2>彩色进度条</h2>
  15. <div class="progress">
  16.     <div class="progress-bar progress-bar-success" style="width:40%"></div>
  17. </div> 
  18. <div class="progress">
  19.      <div class="progress-bar progress-bar-info" style="width:60%"></div>
  20. </div> 
  21. <div class="progress">
  22.  	<div class="progress-bar progress-bar-warning" style="width:80%"></div>
  23. </div> 
  24. <div class="progress">
  25.  	<div class="progress-bar progress-bar-danger" style="width:50%"></div>
  26. </div> 
  27. <h2>条纹进度条</h2>
  28. <div class="progress progress-striped">
  29.     <div class="progress-bar progress-bar-success" style="width:40%"></div>
  30. </div>
  31. <div class="progress progress-striped">
  32.     <div class="progress-bar progress-bar-info" style="width:60%"></div>
  33. </div>
  34. <div class="progress progress-striped">
  35. 	<div class="progress-bar progress-bar-warning" style="width:80%"></div>
  36. </div>
  37. <div class="progress progress-striped">
  38. 	<div class="progress-bar progress-bar-danger" style="width:50%"></div>
  39. </div>
  40. <h2>动态条纹进度条</h2>
  41. <div class="progress progress-striped active">
  42.     <div class="progress-bar progress-bar-success" style="width:40%"></div>
  43. </div> 
  44. <div class="progress progress-striped active">
  45.     <div class="progress-bar progress-bar-info" style="width:60%"></div>
  46. </div> 
  47. <div class="progress progress-striped active">
  48. 	<div class="progress-bar progress-bar-warning" style="width:80%"></div>
  49. </div> 
  50. <div class="progress progress-striped active">
  51. 	<div class="progress-bar progress-bar-danger" style="width:50%"></div>
  52. </div>
  53. <h2>层叠进度条</h2>
  54. <h5>正常层叠进度条</h5>
  55. <div class="progress">
  56.     <div class="progress-bar progress-bar-success" style="width:20%"></div>
  57.     <div class="progress-bar progress-bar-info" style="width:10%"></div>
  58.     <div class="progress-bar progress-bar-warning" style="width:30%"></div>
  59.     <div class="progress-bar progress-bar-danger" style="width:15%"></div>
  60. </div> 
  61. <h5>不良效果层叠进度条</h5> 
  62. <div class="progress">
  63.     <div class="progress-bar progress-bar-success" style="width:20%"></div>
  64. 	<div class="progress-bar progress-bar-info" style="width:40%"></div>
  65. 	<div class="progress-bar progress-bar-warning" style="width:30%"></div>
  66. 	<div class="progress-bar progress-bar-danger" style="width:45%"></div>
  67. </div> 
  68. <h5>层叠条纹进度条</h5>
  69. <div class="progress">
  70. 	<div class="progress-bar progress-bar-success" style="width:20%"></div>
  71. 	<div class="progress-bar progress-bar-info" style="width:20%"></div>
  72. 	<div class="progress-bar progress-bar-warning" style="width:30%"></div>
  73. 	<div class="progress-bar progress-bar-danger" style="width:15%"></div>
  74. </div>  
  75. <div class="progress">
  76. 	<div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div>
  77. 	<div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
  78. 	<div class="progress-bar progress-bar-striped progress-bar-warning" style="width:30%"></div>
  79. 	<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
  80. </div> 
  81. <div class="progress">
  82. 	<div class="progress-bar progress-bar-success" style="width:20%"></div>
  83. 	<div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
  84. 	<div class="progress-bar progress-bar-warning" style="width:30%"></div>
  85. 	<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
  86. </div>
  87. <h2>带Label的进度条</h2>
  88. <h5>进度条1</h5>
  89. <div class="progress">
  90.     <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>  
  91. </div>  
  92. <div class="progress">
  93.     <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"   style="width:70%">70%</div>
  94. </div>
  95. <div class="progress">
  96. 	<div class="progress-bar progress-bar-warning"  role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">30%</div>
  97. </div>
  98. <div class="progress">
  99. 	<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width:15%">15%</div>
  100. </div>
  101.  
  102. <h5>进度条2</h5> 
  103. <div class="progress">
  104.   <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
  105. </div>
  106. <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  107. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
  108. </body>
  109. </html>
下一节