Bootstrap警告框，bootstrap警告

Bootstrap警告框，bootstrap警告
前面的話

　　在網站中，網頁總是需要和使用者一起做溝通與交流。特別是當使用者操作上下文為使用者提供一些有效警示框，比如說告訴使用者操作成功、操作錯誤、提示或者警告等。在Bootstrap架構有一個獨立的組件，實作類別似的效果，這個組件被稱為警示框。本文將詳細介紹Bootstrap警告框

 

預設用法

　　警告框組件通過提供一些靈活的預定義訊息，為常見的使用者動作提供反饋訊息

　　將任意文本和一個可選的關閉按鈕組合在一起就能組成一個警告框，.alert 類是必須要設定的，另外還提供了有特殊意義的4個類（例如，.alert-success），代表不同的警告資訊

.alert {  padding: 15px;  margin-bottom: 20px;  border: 1px solid transparent;  border-radius: 4px;}.alert h4 {  margin-top: 0;  color: inherit;}.alert .alert-link {  font-weight: bold;}.alert > p,.alert > ul {  margin-bottom: 0;}.alert > p + p {  margin-top: 5px;}

　　警告框沒有預設類，只有基類和修飾類。預設的灰色警告框並沒有多少意義。所以您使用一種有意義的警告類。目前提供了成功、訊息、警告和危險

　　1、成功警示框：告訴使用者操作成功，在“alert”樣式基礎上追加“alert-success”樣式，具體呈現的是背景、邊框和文本都是綠色；

　　2、資訊警示框：給使用者提供提示資訊，在“alert”樣式基礎上追加“alert-info”樣式，具體呈現的是背景、邊框和文本都是淺藍色；

　　3、警警示示框：提示使用者小心操作（提供警告資訊），在“alert”樣式基礎上追加“alert-warning”樣式，具體呈現的是背景、邊框、文本都是淺黃色；

　　4、錯誤警示框：提示使用者操作錯誤，在“alert”樣式基礎上追加“alert-danger”樣式，具體呈現的是背景、邊框和文本都是淺紅色

<div class="alert" role="alert">基類</div><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來檢測該屬性，從而控制警示框的關閉）

.alert-dismissable {  padding-right: 35px;}.alert-dismissable .close {  position: relative;  top: -2px;  right: -21px;  color: inherit;}

 

連結

　　有時可能想在警示框中加入連結地址，用來告訴使用者跳到某一個地方或新的頁面。而這個時候又想讓使用者能明顯的看出來這是連結地址。在Bootstrap架構中對警示框裡的連結樣式做了一個高亮顯示處理。為不同類型的警示框內的連結進行了加粗處理，並且顏色相應加深

　　Bootstrap架構是通過給警示框加的連結添加一個名為“alert-link”的類名，通過“alert-link”樣式給連結提供高亮顯示 

.alert .alert-link {  font-weight: bold;}.alert-success .alert-link {  color: #2b542c;}.alert-info .alert-link {  color: #245269;}.alert-warning .alert-link {  color: #66512c;}.alert-danger .alert-link {  color: #843534;}

<div class="alert alert-success" role="alert">成功 <a href="#" class="alert-link">詳情查看</a></div><div class="alert alert-info" role="alert">資訊提示 <a href="#" class="alert-link">詳情查看</a></div><div class="alert alert-warning" role="alert">警告 <a href="#" class="alert-link">詳情查看</a></div><div class="alert alert-danger" role="alert">錯誤 <a href="#" class="alert-link">詳情查看</a></div>