布尔玛 4 列瓷砖

在本文中，我们将看到 Bulma 4 Columns Tiles。为了在您的 Web 应用程序中创建类似网格的结构，Bulma 框架提供了 tile 元素。这些元素用于构建 2D 设计模式，如 Pinterest 等。在 Bulma 中，我们还可以创建 4 列图块，可用于需要构建 4 列网格系统的地方。

Bulma 4 Columns Tiles 类：在 Bulma 中没有定义类来创建 4 列，我们需要简单地将 4 div 放在祖先类中。

语法：下面是显示 4 列图块的语法。

    

        

        ....
        
    
    
    

        

        ....
        
    
    
    

        

        ....
        
    
    
    

        

        ....
        
    
    

示例 1：下面的示例说明了 Bulma 4 列瓷砖

HTML

    
    
    
    
    


    

      
GeekforGeeks
      
Bulma 4 Column Tiles
  
      
      

        

          

            
Tile One
  
            
Subtitle
  
          
        
        

          

            
Tile Two
  
            
Subtitle
  
          
        
        

          

            
Tile Three
  
            
Subtitle
  
          
        
        

          

            
Tile Four
  
            
Subtitle
  
          
        
      
  
      

        

          

            

              

                
Tile Five
  
                
Subtitle
  
                

                
              
            
            

              

                

                  

                    

                      Tile Six
  
                    

                      Subtitle
  
                  
                
                

                  

                    

                      Tile Seven
  
                    

                      Subtitle
  
                  
                
              
              

                

                  

                    Tile Eight
  
                  

                    Subtitle
  
                
              
            
          
          

            

              

                

                  Tile Nine
  
                

                  Subtitle
  
                

                
              
            
            

              

                
Tile Ten
  
                
Subtitle
  
                

                
              
            
          
        
        

          

            

              

                GeeksforGeeks
              
  
              
Tile Eleven
  
              

                

                    
                  
                  

                    Learn about web developement 
                    and other web frameworks
                  
  
              
            
          
        
      
    

输出：

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

HTML

    
    
    
    
    


    

      
GeekforGeeks
      
Bulma 4 Column Tiles
  
      
      

        

          

            
PRACTICE
  
            

              Practice your coding knowledge
            
  
          
        
        

          

            
CODING COMPETITIONS
  
            

              Participate in programming competitions
            
  
          
        
        

          

            
JOBS
  
            

              Find and apply for your favourite jobs
            
  
          
        
        

          

            
GBLOGS
  
            

              All tech related blogs
  
          
        
      
  
      

        

          

            

              

                
TUTORIALS
  
                

                  Java, C++, Python, etc
  
                

                
              
            
            

              

                

                  

                    
CS SUBJECTS
  
                    

                      OS, DBMS, CN, SQL
                    
  
                  
                
                

                  

                    
WEB TECHNOLOGIES
  
                    

                      HTML, CSS, JS, React, BootStrap
                    
  
                  
                
              
              

                

                  
DSA
  
                  

                    Learn about Data Structures and Algorithms
                  
  
                
              
            
          
        
        

          

            

              
GeeksforGeeks
  
              
Tile Eleven
  
              

                

                    
                  
                  

                    Learn about web developement 
                    and other web frameworks
                  
  
              
            
          
        
      
    

输出：

布尔玛 4 列瓷砖

参考： https://bulma.io/documentation/layout/tiles/#4-columns