English 中文(简体)
Bootstrap Tutorial

Bootstrap with CSS

Bootstrap Layout Components

Bootstrap Plugins

Bootstrap Demos

Bootstrap Useful Resources

Selected Reading

Bootstrap - Alert Plugin
  • 时间:2024-11-03

Bootstrap - Alert Plugin


Previous Page Next Page  

Alert messages are mostly used to display information such as warning or confirmation messages to the end users. Using alert message plugin you can add dismiss functionapty to all alert messages.

If you want to include this plugin functionapty inspanidually, then you will need the alert.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include the bootstrap.js or the minified bootstrap.min.js.

Usage

You can enable dismissal of an alert in the following two ways −

    Via data attributes − To dismiss via Data API just add data-dismiss = "alert" to your close button to automatically give an alert close functionapty.

<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
   &times;
</a>

    Via JavaScript − To dismiss via JavaScript use the following syntax −

$(".alert").alert()

Example

The following example demonstrates the use of alert plugin via data attributes.

<span class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">
      &times;
   </a>
   
   <strong>Warning!</strong> There was a problem with your network connection.
</span>