语义UI |信息

Semantic UI 是一个开源框架，它使用 CSS 和 jQuery 来构建出色的用户界面。它与使用的引导程序相同，并且有很多不同的元素可以用来使您的网站看起来更神奇。它使用一个类向元素添加 CSS。一条消息显示与某些内容相关的信息。

示例 1：

  

    Semantic UI
    

  

    
        
            
                Geeksforgeeks
            
            A computer science Portal.
        
    
    
    

  

输出：

示例 2：列出消息

  

    Semantic UI
    

  

    
        
            
                New Courses
            
            
                Data Structure
                AngularJS
                NodeJS
            
        
    
    
    

  

输出：

示例 3：此示例创建一个可关闭消息。这需要导入 jQuery 库。

句法：

$('.message .close').on('click', function() {
    $(this).closest('.message').transition('fade');
});

完整代码：

  

    Semantic UI
    
      
    
    
  
    
    

  

    
        
            
            
                Thank you for Choosing Geeksforgeeks!
            
            Hope you have great learning here.
        
    
  
    
        $('.message .close').on('click', function () {
            $(this).closest('.message').transition('fade');
        });      
    

  

输出：

笔记：

• 您可以添加类信息、错误、成功、肯定和警告以更改消息的外观。例如： 要显示警告消息：class=’ui warning message’。
• 您可以编写任何颜色或大小类来分别更改类的颜色或大小。