Bootstrap警告框的詳細介紹

警告框（Alert）訊息大多是用來向終端使用者顯示諸如警告或確認訊息的資訊。使用警告框（Alert）插件，您可以為所有的警告框訊息添加可取消（dismiss）功能。

用法

您可以有以下兩種方式啟用警告框的可取消（dismissal）功能：

透過data 屬性：透過資料API（Data API）新增可取消功能，只需要在關閉按鈕上新增 data-dismiss="alert"，就會自動為警告框新增關閉功能。

預設用法

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

　　將任意文字和一個可選的關閉按鈕組合在一起就能組成一個警告框，.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>

 

以上是Bootstrap警告框的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！