如何创建 Bootstrap Dismissible Alert？

Bootstrap 是一个免费的开源工具，可以非常轻松地制作响应式和美观的网页。警报用于通知网页的用户和访问者某些操作或信息。此外，我们可以为用户提供解除警报的功能。但是简单的警报并不是那么好看。所以在 Bootstrap 的帮助下，我们可以在网页内容中制作非常好的 Alerts，即内联 Alerts，稍后我们将学习如何关闭它们。

方法：我们将首先在我们的网站中创建一个div元素，其中包含一些内容。我们需要将类和角色字段添加为alert 。然后该元素将用作Alert 。现在，我们将创建一个按钮来关闭警报。我们可以使用按钮的data-dismiss 字段在元素内部创建警报作为警报，也可以在容器外部创建一个javascript函数。我们将在本教程中学习这两种方法。首先在head标签内导入 bootstrap 的CDN 库。

示例 1：为了使警报可关闭，我们需要在类中添加 alert-dismissible。现在为了使警报消失，我们需要引导程序的 Javascript 库。我们仅首次将其包括在内。现在根据引导程序，最好使用按钮。我们可以将按钮包含在警报容器内部或外部。我们将调用脚本文件中的一个函数来关闭警报容器。脚本文件包含一个函数。当用户按下关闭按钮时，上述函数被调用，根据我们的函数，警报被关闭。上面的代码使用了 jQuery 库，因此我们的项目需要引导 jQuery 库。

The ".alert('close')" is a bootstrap function.

HTML

  

    
    
    GeeksforGeeks
    
    
    
    
    
    

  

    GeeksforGeeks
    Bootstrap Dismissal Alert
    
        Alert it's GEEKSFORGEEKS
    
    
        Close
    
      
    

  

Javascript

function onButtonPress() {
    $('.alert').alert('close')
}

输出：

Bootstrap 解雇警报

例子2：在这个例子中，我们将使用一个按钮，代码如下。这里的按钮应该是type=”button”和class=”close” 。我们已将按钮放置在 div 容器内，以便该按钮将与警报一起显示，并在解除警报时删除该按钮。这里重要的是data-dismiss=”alert”因为否则它将不起作用。当我们单击按钮时，bootstrap 调用的函数只是我们在第一个示例中调用来隐藏警报的函数。

HTML

  

    
    
    GeeksforGeeks
    
    
    
    
    
    

  

    GeeksforGeeks
    Bootstrap Dismissal Alert
    
        Alert it's GEEKSFORGEEKS
        
            Close
        
    

  

输出：