📜  引导程序4 |进度条

📅  最后修改于: 2021-05-25 16:31:13             🧑  作者: Mango

进度条用于在计算机上显示进程的进度。进度条显示完成了多少流程以及还剩下多少。您可以使用预定义的引导程序类在网页上添加进度条。 Bootstrap提供了多种类型的进度条。

句法:

例子:

 
 
 
    Bootstrap Progress Bar 
      
    
    
  
    
      
    
      
    
      
    
 
  
 
    

        GeeksforGeeks     

                 
        
            
        
    
                         

输出:

进度条的高度:使用CSS属性更改进度条的高度。进度的默认高度为16像素。进度高度和进度栏容器必须相同。

句法:

例子:

 
 
 
    Bootstrap Progress Bar 
      
    
    
  
    
      
    
      
    
      
    
 
  
 
    

        GeeksforGeeks     

                 
        
            
            
        
    
                         

输出:

带标签的进度条:带标签的进度条用于在进度栏中显示文本,以显示任务完成百分比。

句法:

x%

例子:

 
 
 
    Bootstrap Progress Bar 
      
    
    
  
    
      
    
      
    
      
    
 
  
 
    

        GeeksforGeeks     

                 
        
            
                80%             
        
    
                         

输出:

彩色进度条:使用Bootstrap 4上下文背景类设置进度条的颜色。进度栏的默认颜色为蓝色。

句法:

x%

例子:

 
 
 
    Bootstrap Progress Bar 
      
    
    
  
    
      
    
      
    
      
    
 
  
 
    

        GeeksforGeeks     

                 
        
            
                50%             
        

                   
            
                90%             
        

                   
            
                30%             
        

                   
            
                10%             
        

                   
            
                70%             
        

    
                         

输出:

条纹进度条: .progress-bar-striped类用于向进度条添加条纹。使用.progress-bar.progress-bar-striped类的组合来创建条状进度条。使用Bootstrap 4上下文背景类设置进度条的颜色。

句法:

x%

例子:

 
 
 
    Bootstrap Progress Bar 
      
    
    
  
    
      
    
      
    
      
    
 
  
 
    

        GeeksforGeeks     

                 
        
            
50%
        

                   
            
90%
        

                   
            
30%
        

                   
            
10%
        

                   
            
70%
        

    
                                 

输出:

动画进度条: .progress-bar-animated类用于创建动画进度条。使用.progress-bar,striped-bar-striped和progress-bar-animated的组合来创建动画进度条。

句法:

x%

例子:

 
 
 
    Bootstrap Progress Bar 
      
    
    
  
    
      
    
      
    
      
    
 
  
 
    

        GeeksforGeeks     

                 
        
            
50%
        

                   
            
90%
        

                   
            
30%
        

                   
            
10%
        

                   
            
70%
        

    
                         

输出:

多个进度条:可以堆叠多个进度条以显示不同颜色的进度条。

例子:

 
 
 
    Bootstrap Progress Bar 
      
    
    
  
    
      
    
      
    
      
    
 
  
 
    

        GeeksforGeeks     

                 
        
            
                10%             
                           
                20%             
               
                30%             
               
                30%             
        
    
                                     

输出: