布尔玛 |列表

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

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

html

  

    
    
  
    
    

  

    

        

            
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
                            
                        
                    
                
            
        
    

  

输出：

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

html

  

    
    
  
    
    

  

    

        

            

                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

  

    
    
  
    
    

  

    

        

            

                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

  

    
    
  
    
    

  

    

        

            

                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

  

    
    
  
    
    

  

    

        

            

                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
    
  
    
    
        div.columns {
            margin-top: 80px;
        }
  
        h1 {
            width: 100%;
            margin-top: 70px;
            color: green !important
        }
  
        div.columns {
            margin-top: 20px;
        }
  
        .list-item {
            color: black !important;
        }
  
        .tags {
            margin-bottom: 0px !important;
        }
  
        .tag {
            float: left;
        }
  
        .tag.is-delete {
            float: right
        }
    

  

    
    
    
  
    
        
            
                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 类，如容器、列、标题、按钮、标签等，以很好地设计我们的内容。