Bootstrap组件 - 进度条

知识点

进度条组件使用了 CSS3 的 transition 和 animation 属性来完成一些特效。这些特性在 Internet Explorer 9 或以下版本中、Firefox 的老版本中没有被支持。Opera 12 不支持 animation 属性。

基本实例

    

        

            60%
        
    

设置了 aria-valuenow="60"，还需要设置 .progress-bar 的 width值，否则状态条不会显现。
如果需要显示进度条进度提示，直接除去 60% 的包裹。

在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性。

  

    0%
  

根据情境变化效果
进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果。
.progress-bar-success
.progress-bar-info
.progress-bar-warning
.progress-bar-danger

条纹效果

1. 为父级 .progress 添加 .progress-striped类
2. 或者为 .progress-bar 添加 .progress-bar-striped 类

动画效果
为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持。

---

实践

    
    
    
    
    
    
    
    
    



    

        

            60%
        
    
    
    

        

            0%
        
    
    
    

        

            progress-bar-success
        
    
    

        

            progress-bar-info
        
    
    

        

            progress-bar-warning
        
    
    

        

            progress-bar-danger
        
    
    
    

        

            progress-bar-striped
        
    
    

        

            progress-striped
        
    
    
    

        

            progress-bar-striped添加active
        
    
    
    

        

            progress-bar-striped添加active
        
        

            progress-bar-striped添加active
        
        

            progress-bar-striped添加active