Bootstrap 提供了警告框（alert）功能，通過精煉且靈活的警告消息為典型的用戶操作提供契合上下文的反饋。
一、警告框
警報可用于任何長度的文本，以及可選的關(guān)閉按鈕。要獲得正確的樣式，請使用八個必需的上下文類之一（例如，.alert-success）。對于內(nèi)聯(lián)移除，請使用alerts JavaScript插件。
<div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div> <div class="alert alert-secondary" role="alert"> A simple secondary alert—check it out! </div> <div class="alert alert-success" role="alert"> A simple success alert—check it out! </div> <div class="alert alert-danger" role="alert"> A simple danger alert—check it out! </div> <div class="alert alert-warning" role="alert"> A simple warning alert—check it out! </div> <div class="alert alert-info" role="alert"> A simple info alert—check it out! </div> <div class="alert alert-light" role="alert"> A simple light alert—check it out! </div> <div class="alert alert-dark" role="alert"> A simple dark alert—check it out! </div>
向輔助技術(shù)傳達意義：使用顏色來增加意義只會提供一種視覺指示，而不會傳達給輔助技術(shù)（如屏幕閱讀器）的用戶。確保由顏色表示的信息在內(nèi)容本身（例如可見文本）中是明顯的，或者通過其他方式包含，例如使用 .visually-hidden類隱藏的其他文本。
二、鏈接顏色
使用 .alert-link 實用程序類可以在任何警報中快速提供匹配的彩色鏈接。
<div class="alert alert-primary" role="alert"> A simple primary alert with <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-secondary" role="alert"> A simple secondary alert with <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-success" role="alert"> A simple success alert with <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-danger" role="alert"> A simple danger alert with <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-warning" role="alert"> A simple warning alert with <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-info" role="alert"> A simple info alert with <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-light" role="alert"> A simple light alert with <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-dark" role="alert"> A simple dark alert with <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">an example link</a>. Give it a click if you like. </div>
三、附加內(nèi)容
警告框（alert）還可以包含其他HTML元素，如標(biāo)題、段落和分隔符。
<div class="alert alert-success" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div>
四、關(guān)閉警告框
使用alert JavaScript插件，可以關(guān)閉任何內(nèi)聯(lián)警報。方法如下：
1、確保已加載警報插件或已編譯的引導(dǎo)JavaScript；
2、添加一個關(guān)閉按鈕和.alert-dismissible類，該類在警報的右側(cè)添加額外的填充，并定位關(guān)閉按鈕；
3、在close按鈕上，添加code>data-bs-dismiss=”alert”屬性，該屬性觸發(fā)JavaScript功能。一定要使用button元素在所有設(shè)備上進行正確的操作；
4、要在解除警報時設(shè)置警報動畫，請確保添加.fade和.show類。
以下是演示效果：
<div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> You should check in on some of those fields below. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div>
五、通過JavaScript觸發(fā)行為
1、觸發(fā)器
通過 JavaScript 代碼關(guān)閉警告框（alert）：
$('.alert').alert()
或者在警告框（alert）組件內(nèi)添加一個按鈕，并為按鈕設(shè)置相應(yīng)的 data 屬性，如下所示：
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
注意：關(guān)閉的警告框（alert）將被從 DOM 中刪除。
2、本組件所暴露的方法
$('.alert').alert('close')
3、本組件所暴露的事件
Bootstrap 的警告框（alert）插件暴露了一些可以監(jiān)聽的事件。
$('#myAlert').on('closed.bs.alert', function () {
// do something...
})
