Bootstrap中的警示框

警示框

在網站中，網頁老是須要和用戶一塊兒作溝通與交流。特別是當用戶操做上下文爲用戶提供一些有效的警示框，好比說告訴用戶操做成功、操做錯誤、提示或者警告等。以下圖所示：

在Bootstrap框架有一個獨立的組件，實現上述的效果，這個組件被稱爲警示框。

源碼版本：

☑ LESS版本：對應的源碼文件alerts.less

☑ Sass版本：對應的源碼文件_alerts.scss

☑ 編譯後的版本：bootstrap.css文件第4427行～第4499行

警示框--默認警示框

Bootstrap框架經過「alert「樣式來實現警示框效果。在默認狀況之下，提供了四種不一樣的警示框效果：

  一、成功警示框：告訴用用戶操做成功，在「alert」樣式基礎上追加「alert-success」樣式，具體呈現的是背景、邊框和文本都是綠色；

  二、信息警示框：給用戶提供提示信息，在「alert」樣式基礎上追加「alert-info」樣式，具體呈現的是背景、邊框和文本都是淺藍色；

  三、警告警示框：提示用戶當心操做（提供警告信息），在「alert」樣式基礎上追加「alert-warning」樣式，具體呈現的是背景、邊框、文本都是淺黃色；

  四、錯誤警示框：提示用戶操做錯誤，在「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>

實現原理：

其中「alert」樣式的源碼主要是設置了警示框的背景色、邊框、圓角和文字顏色。另外對其內部幾個元素h四、p、ul和「.alert-link」作了樣式上的特殊處理：

/*bootstrap.css文件第4427行～第4446行*/ .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; }

不一樣類型的警示框，主要是經過「alert-success」、「alert-info」、「alert-warning」和「alert-danger」樣式來實現：

/*bootstrap.css文件第4456行～第4499行*/ .alert-success {   color: #3c763d;   background-color: #dff0d8;   border-color: #d6e9c6; } .alert-success hr {   border-top-color: #c9e2b3; } .alert-success .alert-link {   color: #2b542c; } .alert-info {   color: #31708f;   background-color: #d9edf7;   border-color: #bce8f1; } .alert-info hr {   border-top-color: #a6e1ec; } .alert-info .alert-link {   color: #245269; } .alert-warning {   color: #8a6d3b;   background-color: #fcf8e3;   border-color: #faebcc; } .alert-warning hr {   border-top-color: #f7e1b5; } .alert-warning .alert-link {   color: #66512c; } .alert-danger {   color: #a94442;   background-color: #f2dede;   border-color: #ebccd1; } .alert-danger hr {   border-top-color: #e4b9c0; } .alert-danger .alert-link {   color: #843534; }

警示框--可關閉的警示框

你們在平時瀏覽網頁的時候，會發現一些警示框帶有關閉按鈕，用戶一點擊關閉按鈕就能自動關閉顯示的警示框（也就是讓警示框隱藏不顯示）。在Bootstrap框架中的警示框也具備這樣的功能。

使用方法：

只須要在默認的警示框裏面添加一個關閉按鈕。而後進行三個步驟：

一、須要在基本警示框「alert」的基礎上添加「alert-dismissable」樣式。

二、在button標籤中加入class="close"類，實現警示框關閉按鈕的樣式。

三、要確保關閉按鈕元素上設置了自定義屬性：「data-dismiss="alert"」（由於可關閉警示框須要藉助於Javascript來檢測該屬性，從而控制警示框的關閉）。

具體使用以下：

<div class="alert alert-success alert-dismissable" role="alert">     <button class="close" type="button" data-dismiss="alert">&times;</button>     恭喜您操做成功！ </div>

運行效果以下：

 

原理分析：

在樣式上，須要在基本警示框「alert」的基礎上添加「alert-dismissable」樣式，這樣就能夠實現帶關閉功能的警示框。

/*bootstrap.css文件第4447行～第4455行*/ .alert-dismissable {   padding-right: 35px; } .alert-dismissable .close {   position: relative;   top: -2px;   right: -21px;   color: inherit; }

警示框--警示框的連接

有時候你可能想在警示框中加入連接地址，用來告訴用戶跳到某一個地方或新的頁面。而這個時候你又想讓用戶能明顯的看出來這是連接地址。在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>

實現原理：

實現樣式以下：

/*bootstrap.css文件第4437行～第4439行*/ .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; }