📜  布尔玛 |进度条

📅  最后修改于: 2021-08-31 08:06:11             🧑  作者: Mango

Bulma是一个基于 Flexbox 的免费开源 CSS 框架。它组件丰富、兼容且文档齐全。它本质上是高度敏感的。它使用类来实现其设计。
进度条用于显示计算机上进程的进度。进度条显示完成了多少过程以及还剩下多少。

示例 1:此示例使用 Bulma 创建一个简单的进度条。



  

    Bulma Progress bar
    
  
    
    

  

    
        
            
                
                    

                        Progress bar                     

                
                   
                    40                                      
            
        
    
  

输出:

示例 2:此示例创建不同大小的进度条。



  
    Bulma Progress bar
    
  
    
    
  
  
  
    
      
        
          
            

              Different sizes Progress bars             

            
          
                                                                                                                                                                                                                                                                                                                                                                                                                             
SizeProgress bar
Small                   
                    25                                        
                
Default                   
                    40                                        
                
Medium                   
                    55                                        
                
Large                   
                    75                                        
                
        
      
    
  

输出:

示例 3:此示例创建不同颜色的进度条。



  
    Bulma Progress bar
    
  
    
    
  
  
    
      
        
          
            

                 Different colors Progress bars             

            
          
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
ColorProgress bar
Primary                   
                    20                                        
                
Link                   
                                           35                                        
                
Info                   
                                           50                                        
                
Success                   
                    65                                        
                
Warning                   
                    80                                        
                
Danger                   
                    95                                        
                
        
      
    
  

输出:

示例 4:此示例创建不同颜色的不确定进度条。



  

  Bulma Progress bar
  
  
  
  

  

  
    
      
        
          

            indeterminate Progress bars           

          
        
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
ColorProgress bar
Primary                 
                  20                                    
              
Link                 
                  35                                    
              
Info                 
                  50                                    
              
Success                 
                  65                                    
              
Warning                 
                  80                                    
              
Danger                 
                  95                                    
              
      
    
  
  

输出:

说明:不确定进度条用于显示正在进行的某些进度,但尚未确定实际持续时间。未定义 HTML 值属性时,会显示不确定的进度条。

注意:在上面的所有示例中,我们使用了一些额外的 Bulma 类,如容器、列、标题、表格等,以很好地设计内容。