Bootstrap中警示框的示例分析

小編給大家分享一下Bootstrap中警示框的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)是工信部頒發(fā)資質(zhì)IDC服務(wù)器商，為用戶提供優(yōu)質(zhì)的成都托管服務(wù)器服務(wù)

在網(wǎng)站中，網(wǎng)頁總是需要和用戶一起做溝通與交流。特別是當用戶操作上下文為用戶提供一些有效的警示框，比如說告訴用戶操作成功、操作錯誤、提示或者警告等。如下圖所示：

在Bootstrap框架有一個獨立的組件，實現(xiàn)上述的效果，這個組件被稱為警示框。

默認警示框

Bootstrap框架通過“alert“樣式來實現(xiàn)警示框效果。在默認情況之下，提供了四種不同的警示框效果：
1、成功警示框：告訴用用戶操作成功，在“alert”樣式基礎(chǔ)上追加“alert-success”樣式，具體呈現(xiàn)的是背景、邊框和文本都是綠色；
2、信息警示框：給用戶提供提示信息，在“alert”樣式基礎(chǔ)上追加“alert-info”樣式，具體呈現(xiàn)的是背景、邊框和文本都是淺藍色；
3、警告警示框：提示用戶小心操作（提供警告信息），在“alert”樣式基礎(chǔ)上追加“alert-warning”樣式，具體呈現(xiàn)的是背景、邊框、文本都是淺黃色；
4、錯誤警示框：提示用戶操作錯誤，在“alert”樣式基礎(chǔ)上追加“alert-danger”樣式，具體呈現(xiàn)的是背景、邊框和文本都是淺紅色。

如下圖示：

具體使用的時候，可以在類名為“alert”的div容器里放置提示信息。實現(xiàn)不同類型警示框，只需要在“alert”基礎(chǔ)上追加對應(yīng)的類名，如下：

<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>

可關(guān)閉的警示框

大家在平時瀏覽網(wǎng)頁的時候，會發(fā)現(xiàn)一些警示框帶有關(guān)閉按鈕，用戶一點擊關(guān)閉按鈕就能自動關(guān)閉顯示的警示框（也就是讓警示框隱藏不顯示）。在Bootstrap框架中的警示框也具有這樣的功能。
使用方法：

只需要在默認的警示框里面添加一個關(guān)閉按鈕。然后進行三個步驟：
1、需要在基本警示框“alert”的基礎(chǔ)上添加“alert-dismissable”樣式。
2、在button標簽中加入class=”close”類，實現(xiàn)警示框關(guān)閉按鈕的樣式。
3、要確保關(guān)閉按鈕元素上設(shè)置了自定義屬性：“data-dismiss=”alert””（因為可關(guān)閉警示框需要借助于Javascript來檢測該屬性，從而控制警示框的關(guān)閉）。
具體使用如下：

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

警示框的鏈接

有時候你可能想在警示框中加入鏈接地址，用來告訴用戶跳到某一個地方或新的頁面。而這個時候你又想讓用戶能明顯的看出來這是鏈接地址。在Bootstrap框架中對警示框里的鏈接樣式做了一個高亮顯示處理。為不同類型的警示框內(nèi)的鏈接進行了加粗處理，并且顏色相應(yīng)加深。

實現(xiàn)方法：

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中警示框的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁標題：Bootstrap中警示框的示例分析
URL標題：http://muchs.cn/article26/ighgcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、網(wǎng)站排名、商城網(wǎng)站、網(wǎng)站收錄、全網(wǎng)營銷推廣、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)