语义 UI 项目堆叠变化

语义用户界面 是用于为网站开发无缝设计的现代框架。它为用户提供了轻量级的组件体验。它使用预定义的 CSS 和 jQuery 来整合不同的框架。

语义 UI 项在网站上呈现大量相似类型的数据。 Item 可以包含图像、标题、描述、按钮、日期等。Item 是 Semantic UI 中项目的集合。

Semantic UI Item Stacking Variation 可以指定项目表的堆叠方式。 Stacking 变体设置项目如何响应响应性。

语义 UI 项堆叠变体类：

• stackable ：表格中的项目响应不同的屏幕尺寸并更改布局。
• unstackable ：表格中的项目不响应不同的屏幕尺寸，不改变布局。

语法：

    ....

示例：在下面的示例中，我们有一些项目和一个按钮。单击按钮时，布局更改为可堆叠或不可堆叠。

HTML

  
    
    
   
    
    
    
      body {
        padding: 10px;
        margin: 10px;
      }
    
  
  
    
      
        
           GeeksforGeeks 
        
          Semantic UI Item Stacking Variation 
      
    
    
      
      
        Stackable/Unstackable
      
    
    
      
        
          
        
        
          
            Data Structures and Algorithms
          
          
            
            
              31 Likes
            
          
        
      
      
        
          
        
        
          
            Machine Learning
          
          
            
            
              123 Favourites
            
          
        
      
    
    
      function stackReverse() {
        $('#gfgstack').toggleClass('unstackable').toggleClass('stackable')
      }
    
  

输出：

语义 UI 项目堆叠变化

参考链接： https://semantic-ui.com/views/item.html#stacking