布尔玛瓷砖修改器

Bulma 是 Jeremy Thomas 开发的开源 CSS 框架。该框架基于 CSS Flexbox 属性。它具有高度响应性，最大限度地减少了对响应行为的媒体查询的使用。

Bulma 框架中的 Tile 是一个单元素类，借助它我们可以创建二维布局或类似地铁的网格等。

在某些情况下，我们必须以某种方式操作我们的图块以达到预期的结果。这可以通过使用平铺修改器来完成。让我们学习瓷砖修改器并了解如何使用它们以及它们可以在我们的瓷砖上执行哪些操作。

tile 元素共有 16 个修饰符。从 is-1 到 is-12 类有 3 个上下文修饰符、1 个方向修饰符和 12 个大小修饰符。这些类按各自提到的顺序在下面列出。

Bulma Tiles 修饰符类：

• is-ancestor：它是瓦片的开始。此修饰符包裹其他瓷砖。
• is-parent：它是一个修饰符，位于is-ancestor修饰符之下。
• is-child：它是一个修饰符，位于is-parent修饰符之下。
• is-vertical：此类使图块垂直。
• is-1：它是一个大小修饰符类，从is-1开始到is-12类。

句法：

    

        ...
    
    ...

示例 1：让我们看一个包含上面讨论过的所有三种修饰符的程序。

HTML

  

    
    
    Bulma Tiles Example
    
    
    
  
    
        body {
            margin-left: 20px;
            margin-right: 10px;
        }
    

  

    
        GeeksforGeeks
        Tile Modifiers
    
  
    
        
            
                
                    This tile is Vertical
                    
                        We are vertical!
                    
                    
                
            
  
            
                
                    Middle Tile
                    
                        We are middle!
                    
                    
                
            
        
  
        
            
                Wide tile
                
                    We are wide!
                
                
            
        
    

  

输出：

示例 2：以下代码还演示了上述 tile 修饰符类。

HTML

  

    
    
    Bulma Tiles Example
    
    
    
    
        body {
            margin-left: 20px;
            margin-right: 10px;
        }
    

  

    
        GeeksforGeeks
        Tile Modifiers
    
  
    
  
        
            
                
                    Tile 1
  
                    
                        CSS (Cascading Style Sheets) is a 
                        stylesheet language used to design 
                        the webpage to make it attractive.
                    
                
                  
                
                    Tile 2
  
                    
                        The reason for using this is to simplify the
                        process of making web pages presentable.
                    
                
            
  
            
                
                    Tile 3
  
                    
                        More importantly, it enables you to do
                        this independent of the HTML that 
                        makes up each web page.
                    
  
                    
                        It is the basic structure of HTML webpage 
                        and we use CSS style inside webpage. In 
                        a web page, we use internal CSS (i.e. 
                        adding CSS code inside head tag of HTML 
                        code).
                    
  
                    
                        It is the combination of Hypertext and 
                        Markup language. Hypertext defines the 
                        link between the web pages
                    
                
            
        
    

  

输出：

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