布尔玛 |盒子

Bulma是一个基于 Flexbox 的免费开源 CSS 框架。它组件丰富、兼容且文档齐全。它本质上是高度敏感的。它使用类来实现其设计。
box 元素只是一个带有阴影、边框、半径和一些填充的容器。我们可以在项目设计的很多地方使用它。它为我们的项目提供了交互式外观。

示例 1：此示例使用 Bulma 创建一个盒子容器。

  

    
    
  
    
    

  

    

        

            

                

                    

                        Geek for Geeks
                    
  
                    

                        'GeeksforGeeks' is a computer 
                        science portal.it was created 
                        with a goal in mind to provide
                        well written, well thought and
                        well explained solutions for 
                        selected questions. The core 
                        team of five super geeks 
                        constituting of technology 
                        lovers and computer science 
                        enthusiasts have been constantly 
                        working in this direction.
                    
  
                    

                        
                            Know more about GfG
                        
                    
                
            
        
    

  

输出：

示例 2：此示例使用 Bulma 创建输入框。

  

    Bulma Box
    
  
    
    
        div.columns {
            margin-top: 80px;
        }
  
        .buttons {
            margin-top: 12px;
        }
    

  

    
    
    
      
    
        
            
                
                    
                        
                            Login
                        
                    
                    
                        
                            Username
                            
                                
  
                                
                                    
                                
                            
                        
  
                        
                            
                                Password
                            
  
                            
                                
                                
                                    
                                
                            
  
                            
                                
                                    Login
                                
                            
                        
                    
                
            
        
    

  

输出：

示例 3：此示例使用 Bulma 创建消息框。

  

    Bulma Box
    
  
    
    
        div.columns {
            margin-top: 80px;
        }
  
        .buttons {
            margin-top: 15px;
        }
    

  

    
    
    
      
    
        
            
                
                    
                        
                            
                                
                            
                        
                        
                            
                                
                                    GeeksforGeeks 
                                    @geeks 
                                    
                                    Welcome to GeeksforGeeks
                                    
                                    'GeeksforGeeks' is a computer 
                                    science portal. It was created 
                                    with a goal in mind to provide 
                                    well written, well thought and 
                                    well explained solutions for 
                                    selected questions. The core 
                                    team of five super geeks 
                                    constituting of technology lovers 
                                    and computer science enthusiasts 
                                    have been constantly working 
                                    in this direction .
                                
                            
                            
                                
                                    
                                        
                                            
                                        
                                    
                                    
                                        
                                            
                                        
                                    
                                    
                                        
                                            
                                        
                                    
                                
                            
                        
                    
                
            
        
    

  

输出：

注意：在上面的所有示例中，我们使用了一些额外的 Bulma 类，如容器、列、标题、按钮、媒体、图像、输入、标签等，以很好地设计我们的内容。