如何在 Bootstrap 中创建警告通知警报？

在执行操作之前或之后，我们经常会在某些网站上遇到特定通知。这些警报消息是在执行任务时应考虑的突出显示文本。使用 Bootstrap 中的预设类，可以在网站上显示这些警报消息。

方法： .alert 类后跟上下文类用于在网站上显示警报消息。警报类别是：.alert-success、.alert-info、.alert-warning、.alert-danger、.alert-primary、.alert-secondary、.alert-light 和 .alert-dark。我们可以使用 .alert-warning 在引导程序中创建警告通知警报。

以下是在 Bootstrap 中实现简单警告警报的过程。

第 1 步：在所有其他样式表之前将 Bootstrap 和 jQuery CDN 包含到 标签中以加载我们的 CSS。

第 2 步：添加 .alert 和警告警报上下文类（例如，.alert-warning）。

  A simple warning alert—check it out!

示例 1：在此示例中，我们将在 bootstrap 中看到警报类型。用户可以使用任何类型的警告警报。

index.html

  
    Warning Alerts
    
    
    
    
    
    
  
  
    
      
        GeeksForGeeks Bootstrap 5 warning messages
      
      Basic Warning alert
      
        Warning!
        There was a problem with connection.
      
      Warning alert with link
      
        Warning! 
        There was a problem with wifi connection
          Contact us.
      
      Warning alert with close button
      
        
          ×
        
        Warning!
        There was a problem with wifi connection.
      
      Warning alert with close button and fade animation
      
        
          ×
        
        Warning! 
        There was a problem with internet connection.
      
      Warning alert with heading
      
        
          ×
        
        Warning!
        Wrong credentials.
      
    
  

输出：

Bootstrap 中的警告警报类型

示例 2：在本示例中，我们将使用按钮单击来使用警告警报。当用户单击按钮时，将生成警告警报。

索引.html

  

    
    Buttons and alerts
    
    
    
    
    
    
    
  
    
        $(document).ready(function () {
            $('#success').click(function (e) {
                e.preventDefault()
                $('#message').html(`
                <div class="alert alert-success fade in">
                    <button type="button class="close close-alert" 
                        data-dismiss="alert" aria-hidden="true">
                        ×
                    </button>This is a success message
                </div>`);
            })
  
            $('#warning').click(function (e) {
                e.preventDefault()
                $('#message').html(`
                <div class="alert alert-warning fade in">
                    <button type="button" class="close close-alert" 
                        data-dismiss="alert" aria-hidden="true">
                        ×
                    </button> This is a warning message
                </div>`);
            });
        });
    

  

    
        GeeksForGeeks
        
            Warning Alert message using bootstrap
        
  
        
        
            
                Success
            
            
                Warning
            
        
        
  
        
    

  

输出：