Alert messages are mostly used to want the end user to display information such as warning or confirmation messages. Using the Alert plugin, you can add a cancelable feature to all warning box messages.
If you want to reference the functionality of the plugin separately, then you need to reference alert.js. Or, as mentioned in the Bootstrap plugin overview chapter, you can refer to bootstrap.js or compressed versions of bootstrap.min.js.
1. Usage
You can enable the dismissal function of the warning box in the following two ways:
1. Through data attributes: Add a cancelable function through the Data API (Data API). Just add data-dismiss="alert" to the close button, and the closing function will be automatically added to the warning box.
<a data-dismiss="alert" href="#" aria-hidden="true"> ×</a>
2. Through JavaScript: Add cancelled functions through JavaScript:
$(".alert").alert()
2. Simple examples
The warning box is the information box for clicking hours.
1. Basic examples
<div> <button type="button" data-dismiss="alert"> <span>×</span> </button> <p>Warning: Your browser does not support it! </p> </div>
2. Add fade effect
<div>
If JavaScript is used, it can be replaced by data-dismiss="alert"
//JavaScript method $('.close').on('click', function() { $('#alert').alert('close');})There are two types of events in the Alert plug-in:
//Events, other similarities $('#alert').on('close.bs.alert', function() { alert('Called when the close method is triggered!');});This series of tutorials has been compiled into: Bootstrap Basic Tutorials Special Topics, welcome to click to learn.
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all about this article. I hope it will be helpful for everyone to learn the Bootstrap warning box plugin.