语义 UI 消息附加变体

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

一条消息显示与某些内容相关的信息。 Semantic-UI 有一个非常酷的消息元素，可以与文本、图标等一起使用。语义 UI 具有不同类型的消息变体，例如大小变体、附加变体、紧凑变体和彩色变体消息。在本文中，我们将了解语义 UI 中附加的消息变体。

语义 UI 中的附加消息可以格式化为将其自身附加到其他内容。它没有像普通消息元素那样的任何底部边距。要将普通消息元素转换为语义 UI 中的附加消息，我们使用附加类以及 ui 和消息类。

语义 UI 消息附加变体类：

• 附加：附加类通过使底部边距为零来使消息元素附加到其他内容。

句法：

content....

示例 1：此示例演示语义 UI 中附加的消息元素。

HTML

    Semantic-UI Message Attached Variation
    
    
    
    
    

  

    
        
            GeeksforGeeks
        
        Semantic UI Message
        
    
    Attached message
    
         
    

输出：

语义 UI 消息附加变体

示例 2：此示例演示了语义 UI 中带有错误和警告变化的多个附加消息元素。

HTML

  

    Semantic-UI Message Attached Variation
    
    
    
    
    

  

    
        
            GeeksforGeeks
        
        Semantic UI Message
        
    
    
      Attached message
    
    
        
          A Computer Science portal for geeks. It contains
          well written, well thought and well explained computer
          science and programming articles
        
         
        
          A Computer Science portal for geeks. It contains 
          well written, well thought and well explained computer
          science and programming articles.
        
  
    
    
        
        Dont miss opportunity learn at GeeksforGeeks.
    

输出：

语义 UI 消息附加变体

参考： https ://semantic-ui.com/collections/message.html#attached