整理自慕課筆記
在網站中，網頁總是需要和用戶一起做溝通與交流。特別是當用戶操作上下文為用戶提供一些有效的警示框，比如說告訴用戶操作成功、操作錯誤、提示或者警告等。如下圖所示：
在Bootstrap框架有一個獨立的組件，實現上述的效果，這個組件被稱為警示框。
默認警示框
Bootstrap框架通過“alert“樣式來實現警示框效果。在默認情況之下，提供了四種不同的警示框效果：
1、成功警示框：告訴用用戶操作成功，在“alert”樣式基礎上追加“alert-success”樣式，具體呈現的是背景、邊框和文本都是綠色；
2、信息警示框：給用戶提供提示信息，在“alert”樣式基礎上追加“alert-info”樣式，具體呈現的是背景、邊框和文本都是淺藍色；
3、警告警示框：提示用戶小心操作（提供警告信息），在“alert”樣式基礎上追加“alert-warning”樣式，具體呈現的是背景、邊框、文本都是淺黃色；
4、錯誤警示框：提示用戶操作錯誤，在“alert”樣式基礎上追加“alert-danger”樣式，具體呈現的是背景、邊框和文本都是淺紅色。
如下圖示：
具體使用的時候，可以在類名為“alert”的div容器裡放置提示信息。實現不同類型警示框，只需要在“alert”基礎上追加對應的類名，如下：
<div class="alert alert-success" role="alert">恭喜您操作成功！</div> <div class="alert alert-info" role="alert">請輸入正確的密碼</div> <div class="alert alert-warning" role="alert">您已操作失敗兩次，還有最後一次機會</div> <div class="alert alert-danger" role="alert">對不起，您輸入的密碼有誤</div>
可關閉的警示框
大家在平時浏覽網頁的時候，會發現一些警示框帶有關閉按鈕，用戶一點擊關閉按鈕就能自動關閉顯示的警示框（也就是讓警示框隱藏不顯示）。在Bootstrap框架中的警示框也具有這樣的功能。
使用方法：
只需要在默認的警示框裡面添加一個關閉按鈕。然後進行三個步驟：
1、需要在基本警示框“alert”的基礎上添加“alert-dismissable”樣式。
2、在button標簽中加入class=”close”類，實現警示框關閉按鈕的樣式。
3、要確保關閉按鈕元素上設置了自定義屬性：“data-dismiss=”alert””（因為可關閉警示框需要借助於Javascript來檢測該屬性，從而控制警示框的關閉）。
具體使用如下：
<div class="alert alert-success alert-dismissable" role="alert"> <button class="close" type="button" data-dismiss="alert">×</button> 恭喜您操作成功！ </div>
警示框的鏈接
有時候你可能想在警示框中加入鏈接地址，用來告訴用戶跳到某一個地方或新的頁面。而這個時候你又想讓用戶能明顯的看出來這是鏈接地址。在Bootstrap框架中對警示框裡的鏈接樣式做了一個高亮顯示處理。為不同類型的警示框內的鏈接進行了加粗處理，並且顏色相應加深。
實現方法：
Bootstrap框架是通過給警示框加的鏈接添加一個名為“alert-link”的類名，通過“alert-link”樣式給鏈接提供高亮顯示。
具體使用如下：
<div class="alert alert-success" role="alert"> <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a> . </div> <div class="alert alert-info" role="alert"> <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a> , but it's not super important. </div> <div class="alert alert-warning" role="alert"> <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a> . </div> <div class="alert alert-danger" role="alert"> <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. </div>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。