Blaze UI 邮筒

Blaze UI是一个 CSS 开源轻量级 UI 工具包，它为构建定制和可扩展的应用程序提供了出色的工具。它可以与任何存在的框架一起使用。它可以适应任何生态系统。所有设计或 CSS 都是移动优先的，因此是响应式的。

Blaze UI Pillar Boxes用于创建在左右方向上具有相等填充的单元格。细胞左右对称，看起来像柱子。我们可以使用它们在网格中显示项目或在网格或内联中弯曲它们。

Blaze UI Pillar Boxes 类：以下是根据其填充降序排列的不同类。

• u-pillar-box-super：它具有最大的填充。
• u-pillar-box-xlarge：它的填充比 super 少。
• u-pillar-box-large：它有大填充。
• u-pillar-box-medium：具有中等填充。
• u-pillar-box-small：内边距小于中号。
• u-pillar-box-xsmall：它有比 tiny 更大的填充。
• u-pillar-box-tiny：它的填充非常少。
• u-pillar-box-none：没有填充。

语法：将类应用于容器等任何元素，如下所示：

....

示例 1：在以下示例中，我们使用 jQuery 应用了三个带有邮筒填充的项目，然后我们使用提供的按钮对其进行修改。

HTML

  

    
    
    
    
    
    
    
    
    
    

  

    
        GeeksforGeeks
        Blaze UI Pillar Boxes
    
  
    
    
        
            
                Car
            
            
                Chair
            
            
                Ludo
            
        
    
    
        
            Super
        
        
            Xlarge
        
        
            Large
        
        
            Medium
        
        
            Small
        
        
            Xsmall
        
        
            Tiny
        
        
            None
        
    
      
    
        const pillarStyles = [
            'u-pillar-box-super',
            'u-pillar-box-xlarge',
            'u-pillar-box-large',
            'u-pillar-box-medium',
            'u-pillar-box-small',
            'u-pillar-box-xsmall',
            'u-pillar-box-tiny',
            'u-pillar-box-none',
        ]
        let current = pillarStyles[0]
        $('.item').addClass(current)
        function toggleStyle(index) {
            $('.item').removeClass(current)
            current = pillarStyles[index]
            $('.item').addClass(current)
        }
    

  

输出：

示例 2：以下代码演示了 Blaze UI 超级邮筒，其中包含一些细节。

HTML

  

    
    
    
    
    
    
    
    
    
    
  
    
        .card {
            background-color: lightgreen;
            margin: 8px;
            border-radius: 4px;
        }
  
        .card h3 {
            color: rgb(12, 58, 22);
        }
    

  

    
        GeeksforGeeks
        Blaze UI Pillar Boxes
    
    
        
            Data Strucures
            
                A data structure is a particular way 
                of organizing data in a computer
                so that it can be used effectively.
            
        
        
            Algorithms
            
                an algorithm is a finite sequence 
                of well-defined instructions,
                typically used to solve a class of 
                specific problems or to perform a
                computation.
            
        
        
            Machine Learning
            
                Machine Learning is the field of 
                study that gives computers the
                capability to learn without being 
                explicitly programmed.
            
        
    

  

输出：

参考： https://www.blazeui.com/utils/boxing/