布尔玛瓷砖

Bulma 是一个免费的开源 CSS 框架，用于构建 Web 应用程序。在本文中，我们将看到 Bulma Tiles。 Bulma 框架提供了 tile 元素以创建网格 tile 形式的布局。为了首先创建一个 tile 布局，我们使用一个包含所有其他 tile 的祖先 tile。然后，如果您需要垂直构建瓷砖，我们使用 is-vertical （默认为水平）类。要添加内容，只需使用is-parent和is-child类。平铺元素可用于创建二维设计模式，如 Pinterest 等。

布尔玛瓷砖类：

• tile：这是唯一用于创建 2-D 布局以构建类似 tile 结构的类。

句法：

    

        ....
    
    

        

            ....
        
    
    

示例 1：以下示例说明了 Bulma 瓷砖。

HTML

  

  
  
  
  
  

  

  

    
GeekforGeeks
    
Bulma Tiles
  
    
    

      

        

          

            

              
Vertical Tile
  
              
Topmost tile
  
            
            

              
Second Tile
  
              
Bottom tile
  
            
          
          

            

              
Middle Tile
  
              
Middle second tile
  
            
          
        
        

          

            
Wide tile
  
            
Image inside Tile
  
            

              
            
          
        
      
      

        

          

            
Tallest tile
            

              Larger one as compared to other tiles
            
            

          
        
      
    
  

  

输出：

布尔玛瓷砖

示例 2：说明 Bulma 瓷砖的另一个示例。

HTML

  
    
    
    
    
  
  
    

      
GeekforGeeks
      
Bulma Tiles
        
      

        

          

            

              

                
Welcome to
              
              

                
Learn, Tutorials, Contest
                
Only for Geeks!
              
            
            

              

                
GeeksforGeeks
                
              
            
          
          

            

              
Technical Articles and GBlog
              
Read about Latest Technolgies....
              

              
            
          
        
        

          

            

              
Explore
              

                
Find Jobs
                
Learn from Tutorials
                
Practice coding
                
Courses
                
Learn Programming
                
Participate in Coding contest
              
            
          
        
      
    
  

输出：

布尔玛瓷砖

参考： https://bulma.io/documentation/layout/tiles/