语义 UI 提要内容

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

提要元素用于按顺序记录网站/用户的活动。提要包含由不同用户执行的各种事件。语义 UI 为我们提供了样式化的提要。让我们看看各种提要内容。

语义 UI 提要内容：

• 标签：语义 UI 允许我们使用标签类向提要添加标签，例如图像、图标等。
• 日期：语义 UI 允许我们向提要内容添加时间戳，使用日期类指示其来源。
• 附加信息：我们可以使用额外的类将一堆附加内容添加到提要中，例如一组图像、文本等。

句法：

    

        

            ...
        
    
        ...
    
    ...

示例 1：在下面的示例中，我们创建了一个带有标签事件的提要。

HTML

  

    Semantic UI Feed Content
    
    
    
    
    

  

  
    
        GeeksforGeeks
        Semantic UI Feed Content
        
        
        
            
                
                    
                
                
                    
                        Mr. Sandeep at
                        
                            GeeksforGeeks
                         liked your profile.
                    
                    
                        
                             39 Likes
                        
                    
                
            
            
                
                    
                
                
                    
                        A Node.js article got published at
                        
                            GeeksforGeeks
                        .
                    
                    
                        
                             124 Likes
                        
                    
                
            
            
                
                    
                
                
                    
                        A Git article got published at
                        
                            GeeksforGeeks
                        .
                    
                    
                        
                             212 Likes
                        
                    
                
            
        
    

输出：

语义 UI 提要内容

示例 2：在下面的示例中，我们使用日期类创建了一个带有日期的事件。

HTML

  

    Semantic UI Feed Content
    
  
    
    
  
    
    

  

  
    
        GeeksforGeeks
        Semantic UI Feed Content
        
        
        
            
                
                    
                
                
                    
                        15 minutes ago
                    
                    
                        Mr. Sandeep at
                        
                            GeeksforGeeks
                         liked your profile.
                    
                    
                        
                             39 Likes
                        
                    
                
            
            
                
                    
                
                
                    
                        45 minutes ago
                    
                    
                        A Node.js article got published at
                        
                            GeeksforGeeks
                        .
                    
                    
                        
                             124 Likes
                        
                    
                
            
            
                
                    
                
                
                    
                        3 hours ago
                    
                    
                        A Git article got published at
                        
                            GeeksforGeeks
                        .
                    
                    
                        
                             212 Likes
                        
                    
                
            
        
    

输出：

语义 UI 提要内容

示例 3：在下面的示例中，我们使用额外的类创建了一个包含信息事件的提要。显示额外的文本和额外的图像。

HTML

  

    Semantic UI Feed Content
    
  
    
    
  
    
    

  

    
        GeeksforGeeks
        Semantic UI Feed Content
        
        
        
            
                
                    
                
                
                    
                        15 minutes ago
                    
                    
                        Mr. Sandeep at
                        
                            GeeksforGeeks
                         liked your profile.
                    
                    
                        Hey there, I really liked your profile.
                       Ping me if you are up for a conversation.
                    
                    
                        
                             39 Likes
                        
                    
                
            
            
                
                    
                
                
                    
                        45 minutes ago
                    
                    
                        A Node.js article got published at
                        
                            GeeksforGeeks
                        .
                    
                    
                        
                            
                        
                    
                    
                        
                             124 Likes
                        
                    
                
            
            
                
                    
                
                
                    
                        3 hours ago
                    
                    
                        A Git article got published at
                        
                            GeeksforGeeks
                        .
                    
                    
                        
                            
                        
                    
                    
                        
                             212 Likes
                        
                    
                
            
        
    

输出：

语义 UI 提要内容

参考： https://semantic-ui.com/views/feed.html