📜  语义 UI 卡列计数变化

📅  最后修改于: 2022-05-13 01:56:14.172000             🧑  作者: Mango

语义 UI 卡列计数变化

Semantic UI 是一个开源框架,它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同,并且具有多种不同的元素可用于使您的网站看起来更加惊人和响应迅速。

语义 UI Card 元素以类似于使用语义 UI 类的扑克牌的方式显示站点内容。语义 UI 提供了多种卡片变体,如流体卡片、居中卡片、凸起卡片、链接卡片、浮动内容、文本对齐、彩色、列数、可堆叠、加倍。在本文中,我们将讨论语义 UI 卡片组的列计数变化。

Semantic UI Card Variations Column Count Card Group Variant 使卡片组在具有所需列数的布局中排列。我们使用列数作为类以及语义 UI 的 UI 和卡片类来创建列计数卡片组变体。

Semantic-UI Card Variations 列计数卡组变体类:

  • column-count:此类用于强制卡片组采用所需列数的布局,其中列数本身用作类。

句法:

示例 1:以下示例演示语义 UI 卡组的列计数变化。这个例子有一个 5 列的卡片组。

HTML


  

    
    
    
    Semantic UI card column count variation
    

  

    
    

GeeksforGeeks

    Semantic UI card column count Variation     

    
                 
                
                                     
            
               
                
                                     
            
                       
                
                                     
            
            
                
                                     
            
               
                
                                     
            
            
                
                                     
            
               
                
                                     
            
                       
                
                                     
            
            
                
                                     
            
               
                
                                     
            
    
    
    


HTML


  

    
    
    
    Semantic UI card column count variation
    

  

    
    

GeeksforGeeks

    Semantic UI card column count Variation     

    
                 
                
                                     
            
               
                
                                     
            
                       
                
                                     
            
            
                
                                     
            
               
                
                                     
            
            
                
                                     
            
               
                
                                     
            
                       
                
                                     
            
            
                
                                     
            
               
                
                                     
            
        
         
    


输出:

输出

示例 2:以下示例演示语义 UI 卡组的列计数变化。这个例子有一个 3 列的卡片组。

HTML



  

    
    
    
    Semantic UI card column count variation
    

  

    
    

GeeksforGeeks

    Semantic UI card column count Variation     

    
                 
                
                                     
            
               
                
                                     
            
                       
                
                                     
            
            
                
                                     
            
               
                
                                     
            
            
                
                                     
            
               
                
                                     
            
                       
                
                                     
            
            
                
                                     
            
               
                
                                     
            
        
         
    

输出:

输出

参考: https ://semantic-ui.com/views/card.html#column-count