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

进度条--彩色进度条

Bootstrap框架中的进度条和警告信息框一样，为了能给用户一个更好的体验，也根据不同的状态配置了不同的进度条颜色。在此称为彩色进度条，其主要包括以下四种：

  ☑ progress-bar-info：表示信息进度条，进度条颜色为蓝色

  ☑ progress-bar-success：表示成功进度条，进度条颜色为绿色

  ☑ progress-bar-warning：表示警告进度条，进度条颜色为黄色

  ☑ progress-bar-danger：表示错误进度条，进度条颜色为红色

使用方法：

具体使用就非常简单了，只需要在基础的进度上增加对应的类名。如：

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

运行效果如下：

实现原理：

彩色进度条与基本进度条相比，就是进度条颜色做了一定的变化，其对应的样式代码如下：

/*bootstrap.css文件第4548行～第4550行*/
.progress-bar-success {
  background-color: #5cb85c;
}
/*bootstrap.css文件第4555行～第4557行*/
.progress-bar-info {
  background-color: #5bc0de;
}
/*bootstrap.css文件第4562行～第4564行*/
.progress-bar-warning {
  background-color: #f0ad4e;
}
/*bootstrap.css文件第4569行～第4571行*/
.progress-bar-danger {
  background-color: #d9534f;
}

任务

我来试试：在右侧代码任务部分补充代码，以实现“信息”、“警告”、“错误”、“成功”进度条效果。

效果图如下：

index.htmlstyle.css 
  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. <div class="progress">
  10.     <div class="progress-bar progress-bar-success" style="width:40%"></div>
  11. </div> 
  12. <div class="progress">
  13.  	<div class="progress-bar progress-bar-info" style="width:60%"></div>
  14. </div> 
  15. <div class="progress">
  16.  	<div class="progress-bar progress-bar-warning" style="width:80%"></div>
  17. </div> 
  18. <div class="progress">
  19.  	<div class="progress-bar progress-bar-danger" style="width:50%"></div>
  20. </div> 
  21. <!--下面是代码任务部分-->
  22. <h2>下面是代码任务部分</h2>
  23. <div class="progress">
  24.     <div class="progress-bar" ></div>
  25. </div> 
  26. <div class="progress">
  27.      <div class="progress-bar" ></div>
  28. </div> 
  29. <div class="progress">
  30.  	<div class="progress-bar" ></div>
  31. </div> 
  32. <div class="progress">
  33.  	<div class="progress-bar" ></div>
  34. </div>
  35. <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  36. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
  37. </body>
  38. </html>
  1. body {
  2.   padding: 50px 100px;
  3. }
下一节