📜  布尔玛 |列表

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

Bulma是一个基于 Flexbox 的免费开源 CSS 框架。它组件丰富、兼容且文档齐全。它本质上是高度敏感的。它使用类来实现其设计。
可以将项目中的列表组件设计为与 Bulma 类一起看起来很有吸引力。

示例 1:此示例使用 Bulma 创建项目列表。

html


  

    Bulma List
    
  
    
    

  

    
        
            

Todo List

        
        
            
                
                    
                            
                                
  •                                 Design a custom database                                  to store your daily activity                             
  •                         
                               
                                
  •                                 Start your E-commerce                                  project to build                             
  •                         
                               
                                
  •                                 Take pictures of                                  beautiful flowers                             
  •                         
                               
                                
  •                                 Ride to a horse and                                  write your experience                             
  •                         
                               
                                
  •                                 Watch movie 'Godfather'                                  at night                             
  •                         
                               
                                
  •                                 Go for a trip with bike                             
  •                         
                               
                                
  •                                 Buy a sumsung headset                             
  •                         
                               
                                
  •                                 Listen music for one hour                             
  •                         
                               
                                
  •                                 Go for a Night                                  out on bicycle                             
  •                         
                               
                                
  •                                 Go for a morning walk                             
  •                         
                        
                
            
        
    
  


html

  

    Bulma List
    
  
    
    

  

    
        
            

                Todo List             

        
        
            
                
                    
                            
                                
  •                                 Design a custom                                  database to store                                  your daily activity                             
  •                         
                               
                                
  •                                 Start your E-commerce                                  project to build                             
  •                         
                               
                                
  •                                 Take pictures of                                  beautiful flowers                             
  •                         
                               
                                
  •                                 Ride to a horse and                                  write your experience                             
  •                         
                               
                                
  •                                 Watch movie 'Godfather'                                  at night                             
  •                         
                               
                                
  •                                 Go for a trip with bike                             
  •                         
                               
                                
  •                                 Buy a sumsung headset                             
  •                         
                               
                                
  •                                 Listen music                                  for one hour                             
  •                         
                               
                                
  •                                 Go for a Night                                  out on bicycle                             
  •                         
                               
                                
  •                                 Go for a morning walk                             
  •                         
                        
                
            
        
    
  


html

  

    Bulma List
    
  
    
    

  

    
        
            

                Todo List             

        
        
            
                
                    
                            
                                
  •                                 Design a custom                                  database to store                                  your daily activity                             
  •                         
                               
                                
  •                                 Start your E-commerce                                  project to build                             
  •                         
                               
                                
  •                                 Take pictures of                                  beautiful flowers                             
  •                         
                               
                                
  •                                 Ride to a horse and                                  write your experience                             
  •                         
                               
                                
  •                                 Watch movie 'Godfather'                                  at night                             
  •                         
                               
                                
  •                                 Go for a trip                                  with bike                             
  •                         
                               
                                
  •                                 Buy a sumsung headset                             
  •                         
                               
                                
  •                                 Listen music                                  for one hour                             
  •                         
                               
                                
  •                                 Go for a Night                                  out on bicycle                             
  •                         
                               
                                
  •                                 Go for a morning walk                             
  •                         
                        
                
            
        
    
  


html


  

    Bulma List
    
  
    
    

  

    
        
            

                Todo List             

        
        
            
                
                    
                            
                                
  •                                 Design a custom                                  database to store                                  your daily activity                             
  •                         
                               
                                
  •                                 Start your E-commerce                                  project to build                             
  •                         
                               
                                
  •                                 Take pictures of                                  beautiful flowers                             
  •                         
                               
                                
  •                                 Ride to a horse and                                  write your experience                             
  •                         
                               
                                
  •                                 Watch movie 'Godfather'                                  at night                             
  •                         
                               
                                
  •                                 Go for a trip with bike                             
  •                         
                               
                                
  •                                 Buy a sumsung headset                             
  •                         
                        
                
            
        
    
  


html


  

    Bulma List
    
  
    
    

  

    
        
            

                Todo List             

        
        
            
                
                    
                            
                                
  •                                 Design a custom database to store                                  your daily activity                                                              
  •                         
                               
                                
  • Start your E-commerce project to build                                                              
  •                         
                               
                                
  • Take pictures of beautiful flowers                                                              
  •                         
                               
                                
  • Ride to a horse and write your experience                                                              
  •                         
                               
                                
  • Watch movie 'Godfather' at night                                                              
  •                         
                               
                                
  • Go for a trip with bike                                                              
  •                         
                               
                                
  • Buy a sumsung headset                                                              
  •                         
                               
                                
  • Listen music for one hour                                                              
  •                         
                               
                                
  • Go for a Night out on bicycle                                                              
  •                         
                               
                                
  • Go for a morning walk                                                              
  •                         
                        
                
            
        
    
  


html


  

    Bulma List
    
  
    
    

  

    
    
  
    
        
            

                Todo List             

        
        
            
                
                    
                            
                                                                                                                           
  •                                 Design a custom database                                 to store your daily activity                                                              
  •                         
                               
                                                                                                                           
  •                                 Take pictures of                                  beautiful flowers                                                              
  •                         
                               
                                                                                                                           
  •                                 Ride to a horse and                                  write your experience                                                              
  •                         
                               
                                                                                                                           
  •                                 Go for a trip with bike                                                              
  •                         
                               
                                                                                                                           
  •                                 Buy a sumsung headset                                                              
  •                         
                               
                                                                                                                           
  •                                 Listen music for one hour                                                              
  •                         
                               
                                                                                                                           
  •                                 Go for a morning walk                                                              
  •                         
                        
                
            
        
    
  


输出:

示例 2:此示例使用 Bulma 来显示当前活动项目。

html


  

    Bulma List
    
  
    
    

  

    
        
            

                Todo List             

        
        
            
                
                    
                            
                                
  •                                 Design a custom                                  database to store                                  your daily activity                             
  •                         
                               
                                
  •                                 Start your E-commerce                                  project to build                             
  •                         
                               
                                
  •                                 Take pictures of                                  beautiful flowers                             
  •                         
                               
                                
  •                                 Ride to a horse and                                  write your experience                             
  •                         
                               
                                
  •                                 Watch movie 'Godfather'                                  at night                             
  •                         
                               
                                
  •                                 Go for a trip with bike                             
  •                         
                               
                                
  •                                 Buy a sumsung headset                             
  •                         
                               
                                
  •                                 Listen music                                  for one hour                             
  •                         
                               
                                
  •                                 Go for a Night                                  out on bicycle                             
  •                         
                               
                                
  •                                 Go for a morning walk                             
  •                         
                        
                
            
        
    
  

输出:

示例 3:此示例使用 Bulma 创建项目的彩色列表。

html


  

    Bulma List
    
  
    
    

  

    
        
            

                Todo List             

        
        
            
                
                    
                            
                                
  •                                 Design a custom                                  database to store                                  your daily activity                             
  •                         
                               
                                
  •                                 Start your E-commerce                                  project to build                             
  •                         
                               
                                
  •                                 Take pictures of                                  beautiful flowers                             
  •                         
                               
                                
  •                                 Ride to a horse and                                  write your experience                             
  •                         
                               
                                
  •                                 Watch movie 'Godfather'                                  at night                             
  •                         
                               
                                
  •                                 Go for a trip                                  with bike                             
  •                         
                               
                                
  •                                 Buy a sumsung headset                             
  •                         
                               
                                
  •                                 Listen music                                  for one hour                             
  •                         
                               
                                
  •                                 Go for a Night                                  out on bicycle                             
  •                         
                               
                                
  •                                 Go for a morning walk                             
  •                         
                        
                
            
        
    
  

输出:

示例 4:此示例创建不同颜色的项目。

html



  

    Bulma List
    
  
    
    

  

    
        
            

                Todo List             

        
        
            
                
                    
                            
                                
  •                                 Design a custom                                  database to store                                  your daily activity                             
  •                         
                               
                                
  •                                 Start your E-commerce                                  project to build                             
  •                         
                               
                                
  •                                 Take pictures of                                  beautiful flowers                             
  •                         
                               
                                
  •                                 Ride to a horse and                                  write your experience                             
  •                         
                               
                                
  •                                 Watch movie 'Godfather'                                  at night                             
  •                         
                               
                                
  •                                 Go for a trip with bike                             
  •                         
                               
                                
  •                                 Buy a sumsung headset                             
  •                         
                        
                
            
        
    
  

输出:

示例 5:此示例创建带有删除链接的 Todo。

html



  

    Bulma List
    
  
    
    

  

    
        
            

                Todo List             

        
        
            
                
                    
                            
                                
  •                                 Design a custom database to store                                  your daily activity                                                              
  •                         
                               
                                
  • Start your E-commerce project to build                                                              
  •                         
                               
                                
  • Take pictures of beautiful flowers                                                              
  •                         
                               
                                
  • Ride to a horse and write your experience                                                              
  •                         
                               
                                
  • Watch movie 'Godfather' at night                                                              
  •                         
                               
                                
  • Go for a trip with bike                                                              
  •                         
                               
                                
  • Buy a sumsung headset                                                              
  •                         
                               
                                
  • Listen music for one hour                                                              
  •                         
                               
                                
  • Go for a Night out on bicycle                                                              
  •                         
                               
                                
  • Go for a morning walk                                                              
  •                         
                        
                
            
        
    
  

示例 6:此示例创建一个带有符号和删除链接的列表项。

html



  

    Bulma List
    
  
    
    

  

    
    
  
    
        
            

                Todo List             

        
        
            
                
                    
                            
                                                                                                                           
  •                                 Design a custom database                                 to store your daily activity                                                              
  •                         
                               
                                                                                                                           
  •                                 Take pictures of                                  beautiful flowers                                                              
  •                         
                               
                                                                                                                           
  •                                 Ride to a horse and                                  write your experience                                                              
  •                         
                               
                                                                                                                           
  •                                 Go for a trip with bike                                                              
  •                         
                               
                                                                                                                           
  •                                 Buy a sumsung headset                                                              
  •                         
                               
                                                                                                                           
  •                                 Listen music for one hour                                                              
  •                         
                               
                                                                                                                           
  •                                 Go for a morning walk                                                              
  •                         
                        
                
            
        
    
  

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