Semantic-UI 项宽松变化

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

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

Semantic UI Item Relaxed Variation为分组的项目提供了更多的填充，使项目在负空间的情况下更加宽敞。

语义 UI 项宽松变体类：

• 放松：这个类使项目放松并添加一些填充。
• 非常放松：这个类增加了更多的填充，更加放松。

语法：添加轻松或非常轻松的类以向项目添加更多填充，如下所示：

    ...

示例 1 ：在下面的示例中，我们有三个选项按钮可以选择不放松、放松或非常放松，我们可以看到各自的输出。

HTML

    
        
        
        
        
        
        
            body {
            padding: 10px;
            margin: 10px;
            }
        
    
    
        
            
                
                    
                        GeeksforGeeks
                    
                
                
                Semantic UI Item Relaxed Variation
                
            
        
        
            
                Not Relaxed
                Relaxed
                
                    Very Relaxed
                
            
        
        
            
                
                    
                
                
                    
                        Data Structures and Algorithms
                    
                    
                        
                        
                        31 Likes
                        
                    
                
            
            
                
                    
                
                
                    
                        Machine Learning
                    
                    
                        
                        
                        123 Favourites
                        
                    
                
            
        
        
            function relaxedOption(option) {
              $('#gfgrelaxed').removeClass('very relaxed').removeClass('relaxed')
              $('#gfgrelaxed').addClass(option)
            }
        
    

输出

参考： https ://semantic-ui.com/views/item.html#relaxed