zoukankan      html  css  js  c++  java

  • bootstrap3的 progress 进度条

    ：

    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="dist/css/bootstrap.css" >  
    6. <script src="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="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=" 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=" 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=" 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=" 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=" 45%">  
    43.     <span class="sr-only">45% Complete</span>  
    44.   </div>  
    45. </div>  
    46. </body>  
    47. </html>  

    3、相对应的效果图：

     
     
  • 相关阅读:
    第十一周学习总结
    个人冲刺——（六）
    第二阶段冲刺—第二天
    软件工程第十四周总结
    第二阶段冲刺—第一天
    大道至简阅读笔记02
    输入法用户体验评价
    软件工程第十三周总结
    人机交互-水王
    大道至简阅读笔记01
  • 原文地址：https://www.cnblogs.com/telwanggs/p/7101718.html
Copyright © 2011-2022 走看看