甲爪聯盟講解：網站中常見到的提示框設計

提示框用於給客戶提示輸出消息，一般用於信息反饋。Bootstrap中提供了一組靈活的提示框機制。在以往的網頁製做過程當中咱們常常使用alert來提示輸出消息，可是這樣並非太友好，並且界面也不是很漂亮，Bootstrap改善了這一點。
Bootstrap中的提示框分爲四種。
class="alert-success"，成功提示框：告訴用戶操做成功，呈現的背景、邊框和文本都綠色。
class="alert-info"，信息提示框：呈現的背景、邊框和文本都是淺藍色。
class="alert-warning"，警告提示框，呈現的背景、邊框、文本都是淺黃色。
class="alert-danger"，錯誤提示框：呈現的背景、邊框和文本都是淺紅色。
這與前面章節講到的按鈕（button）中的幾種主題色基本相似，使用方式也差很少。以上四種樣式的使用都不是基於class="alert"，代碼以下：

上述代碼定義了四種不一樣的提示框，這是Bootstrap中提示框的最基本的用法，頁面運行效果如圖所示。上面的代碼提示框是包含在網格系統的列中的，提示框的寬度默認佔據容器的100%。

上面的提示框沒有任何功能做用，咱們能夠在提示框上添加一個按鈕用於關閉提示框，這個在Bootstrap中也是支持的。彈出框的關閉是依賴js插件的，這個會在後續的章節中講解。要想實現提示框的關閉功能，只需如下幾個步驟便可，代碼以下：
在提示框class="alert"中添加一個按鈕。
在提示框class="alert"上添加"alert-dismissable"樣式類。
在新增按鈕上添加樣式class="close"，用於顯示關閉圖標。
在新增按鈕上新增屬性data-dismiss="alert「。

上述代碼中定義了兩個提示框，其中第一個提示框中添加了「關閉」按鈕，當咱們單擊「關閉」按鈕時提示框會消失。其中「&times」；是顯示一個「（」型符號，頁面運行效果如圖所示。

咱們能夠在提示框中加入一個連接用於提示跳轉到另一個頁面，並在Bootstrap框架中對提示框裏的連接樣式作一個高亮顯示處理，爲不一樣類型的提示框內的連接進行加粗處理，而且使顏色相應加深，代碼以下：

代碼中定義了兩個提示框，分別添加了「幫助」連接，運行效果如圖8-14所示，連接文本內容高亮顯示。

本文由甲爪cpa廣告聯盟整理編輯！http://www.jiazhua.com轉載請註明！