Semantic-UI Accordion 流体变化

Semantic UI 是一个基于 CSS preprocessorless 和 jQuery 的 UI 框架。它用于使用与之捆绑的元素和模块来构建美观且响应迅速的 Web 体验。

Accordion 模块用于使用户能够切换内容部分的显示。在特定时间，只能扩展一段内容。

在本文中，我们将看到 Semantic UI Accordion Fluid Variation。流体手风琴占据其父容器的整个宽度。

语义 UI 手风琴流体变化类：

• 流体：此类用于手风琴模块以获取其容器的整个宽度。

句法：

    ...

示例 1：以下示例显示了流体的使用 手风琴模块上的类以占据容器的整个宽度。

HTML

 

    Semantic UI - Accordion Fluid Variation
    
    
    
    
    
 
    
        .ui.container>.header {
            text-align: center;
        }
 
        h3 {
            margin-top: 0px;
        }
 
        .ui.ui.container>p {
            margin-top: 30px !important;
        }
    

 

    
        
            GeeksforGeeks
            Semantic-UI - Accordion Fluid Variation
        
 
         
 
Without fluid class:
 
 
        
            
                
                What is GeeksforGeeks?
            
            
                 
 

                    GeeksforGeeks is a computer science portal for
                    GeeksforGeeks where you can find articles on
                    various topics of computer science subjects.
                
 
 
            
            
                
                Does GeeksforGeeks provide courses?
            
            
                 
 

                    Yes. GeeksforGeeks provide courses on may
                    subjects like DSA, Competitive Programming,
                    GATE CSE, etc.
                
 
 
            
            
                
                Can I submit my articles on GeeksforGeeks?
            
            
                 
 

                    Yes. You can visit 
                    https://write.geeksforgeeks.org to
                    submit your articles on geeksforgeeks.
                
 
 
            
        
 
         
 
With fluid class:
 
 
        
            
                
                What is GeeksforGeeks?
            
            
                 
 

                    GeeksforGeeks is a computer science portal
                    for GeeksforGeeks where you can find articles
                    on various topics of computer science subjects.
                
 
 
            
            
                
                Does GeeksforGeeks provide courses?
            
            
                 
 

                    Yes. GeeksforGeeks provide courses on may
                    subjects like DSA, Competitive Programming,
                    GATE CSE, etc.
                
 
 
            
            
                
                Can I submit my articles on GeeksforGeeks?
            
            
                 
 

                    Yes. You can visit 
                    https://write.geeksforgeeks.org to
                    submit your articles on geeksforgeeks.
                
 
 
            
        
    
 
    
        $('.ui.accordion').accordion();
    

 

输出：

示例2：下面的示例显示了具有深色背景的流体手风琴，即倒手风琴。

HTML

 

    Semantic UI - Accordion Fluid Variation
    
    
    
    
 
    
        .ui.container>.header {
            text-align: center;
        }
 
        h3 {
            margin-top: 0px;
        }
    

 

    
        
            GeeksforGeeks
            Semantic UI - Accordion Fluid Variation
        
 
        
            
                
                    
                    What is GeeksforGeeks?
                
                
                     
 

                        GeeksforGeeks is a computer science
                        portal for GeeksforGeeks where you
                        can find articles on various
                        topics of computer science subjects.
                    
 
 
                
                
                    
                    Does GeeksforGeeks provide courses?
                
                
                     
 

                        Yes. GeeksforGeeks provide courses
                        on may subjects like DSA,
                        Competitive Programming, GATE CSE, etc.
                    
 
 
                
                
                    
                    Can I submit my articles on GeeksforGeeks?
                
                
                     
 

                        Yes. You can visit 
                        https://write.geeksforgeeks.org to
                        submit your articles on geeksforgeeks.
                    
 
 
                
            
        
    
    
        $('.ui.accordion').accordion();
    

 

输出：

参考： https://semantic-ui.com/modules/accordion.html#fluid