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、相对应的效果图：

     
     
  • 相关阅读:
    输入输出重定向
    Tkinter程序屏幕居中
    从Web Controls到DHTML学习随想
    一个没暂时没有办法实现的问题和一个有意思的小问题！
    [学习笔记]几个英语短句（1）
    [读书笔记]My LifeBill Clinton
    [学习笔记]几个英语短句（2）
    结合MS Web Controls做文件上传的解决方案！
    IIS的一个莫名错误－－Server Application Unavailable
    Google Sitemaps（测试版）帮助：使用 Sitemap 协议
  • 原文地址：https://www.cnblogs.com/telwanggs/p/7101718.html
Copyright © 2011-2022 走看看