语义 UI 响应式网格

Semantic UI 是一个现代框架，用于为网站开发无缝设计，它为用户提供了轻量级的组件体验。它使用预定义的 CSS 和 jQuery 来合并到不同的框架中。

Semantic UI Responsive Grids 为我们提供了五种类型的响应式网格，如容器、可堆叠、倒序、加倍和手动调整。她在这篇文章中我们将简要地了解一下。

语义 UI 响应网格：

• 容器：它与网格一起使用，以提供响应式、固定宽度的容器，用于包装页面内容。
• 可堆叠：它被起诉，因此可堆叠网格将自动将行堆叠到移动设备上的单个列。
• 反转顺序：它被用来使网格反转变体，允许您按设备反转列或行的顺序。
• 加倍：使用它是为了让每个设备跳转的网格可以是双倍的列宽。
• 手动调整：通过指定 (x) 宽设备或仅设备列或行来手动调整设备显示。

句法：

  

  

  ...

下面的示例说明了语义 UI 响应网格：

示例 1：

HTML

    
    


    
        
GeeksforGeeks
        Semantic-UI Menu Content
    
    Manual Tweak:
    

      

        

      
      
HTML
      
CSS
      
JS
      
PHP
    
    Doubling:
    

      

        
HTML
        
CSS
        
JS
        
PHP
      
    
    Reverse Order:
    

      

        HTML
      
      

        CSS
      
      

        JS
      
    

输出：

示例 2：在本文中，我们将使用 stackbale 和容器响应式网格。

HTML

    
    


    
        
GeeksforGeeks
        Semantic-UI Menu Content
    
    Stackable:
    

      
HTML
      
CSS
      
JS
      
PHP
    
    Container:
    

      
HTML
      
CSS
      
JS
      
PHP
    

输出：

参考： https ://semantic-ui.com/collections/grid.html