📜  语义-UI |列表

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

语义-UI |列表

Semantic UI 是一个开源框架,它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同,并且有很多不同的元素可用于使您的网站看起来更令人惊叹。它使用一个类将 CSS 添加到元素中。该列表用于显示同一类型下的数据的组相关数据。

下面给出了所有列表示例。

示例 1:在此示例中,我们将使用 Semantic-ui 看到一些基本类型的列表。



    
        Semantic UI
        
    
    
        
            

JS libraries

            
                
React
                
Lodash
                
Request
            
        
             

输出:

示例 2:在此示例中,我们将使用图标划分列表。



    
        Semantic UI
        
    
    
        
            

Notifications

            
                
                                         
                                                    Geeksforgeeks liked your post                                                  
20 mins ago
                    
                
                
                                         
                                                   Geeksforgeeks added you as an Intern                                                  
22 mins ago
                    
                
                
                                         
                                                   Geeksforgeeks accepted your Request                                                  
1 hour ago
                    
                
            
        
             

输出

示例 3:在此示例中,我们将看到个人详细信息列表。



    
        Semantic UI
        
    
    
        
            

Geeksforgeeks

            
                
                                         
                        Geeksforgeeks                     
                
                
                                         
                        Noida, UP                     
                
                
                                         
                                                    carrier@geeksforgeeks.org                                              
                
                
                                         
                        geeksforgeeks.org                     
                
            
        
             

输出

示例 4:在此示例中,我们将看到项目符号列表。



    
        Semantic UI
        
    
    
        
            

JavaScript Uses

            
                    
  • Web
  •                 
  • Mobile App
  •                 
  • Desktop App
  •                 
  •                     Frameworks                     
                              
    • ReactJS
    •                         
    • NodeJS
    •                         
    • AngularJS
    •                     
                    
  •             
        
             

输出

示例 5:在此示例中,我们将创建有序列表。



    
        Semantic UI
        
    
    
        
            

JavaScript Uses

            
                    
  1. Web
  2.                 
  3. Mobile App
  4.                 
  5. Desktop App
  6.                 
  7.                     Frameworks                     
                              
    1. ReactJS
    2.                         
    3. NodeJS
    4.                         
    5. AngularJS
    6.                     
                    
  8.             
        
             

输出

示例 6:在此示例中,我们将创建带有图标的列表。



    
        Semantic UI
        
    
    
        
            

Semantic-UI Icons

                     
             

输出

示例 7:在此示例中,我们将创建包含图像的列表。



    
        Semantic UI
        
    
    
        
            

List with Images

            
                
                                         
                        geeksforgeeks                         
                         A computer Science Portal                         
                    
                
                
                                         
                        geeksforgeeks                         
                         A Computer Science Portal                         
                    
                
                
                                         
                        geeksforgeeks                         
                         A computer Science portal                         
                    
                
            
        
             

输出

示例 8:在此示例中,我们将创建描述列表。



    
        Semantic UI
        
    
    
        
            

Description List

            
                
                                         
                        Geeksforgeeks                         
                          Learn anything related to Computer Science                          
                    
                
                
                                         
                        Internshala                         
                           Earn while you study                         
                    
                
                
                                         
                        Hacker Rank                         
                         Test your coding skills.                        
                    
                
            
        
             

输出

示例 9:在此示例中,我们将创建浮动列表。



    
        Semantic UI
        
    
    
        
            

Floated List

            
                
                    
                        
Delete
                    
                                         
                        Basket Ball                     
                
                
                    
                        
Delete
                    
                                         
                        Hockey                     
                
                
                    
                        
Delete
                    
                                         
                        Table Tennis                     
                
            
        
             

输出