整理關(guān)于Bootstrap警示框的慕課筆記
整理自慕課筆記
在網(wǎng)站中,網(wǎng)頁總是需要和用戶一起做溝通與交流。特別是當(dāng)用戶操作上下文為用戶提供一些有效的警示框,比如說告訴用戶操作成功、操作錯誤、提示或者警告等。如下圖所示:
在Bootstrap框架有一個獨(dú)立的組件,實現(xiàn)上述的效果,這個組件被稱為警示框。
默認(rèn)警示框
Bootstrap框架通過“alert“樣式來實現(xiàn)警示框效果。在默認(rèn)情況之下,提供了四種不同的警示框效果:
1、成功警示框:告訴用用戶操作成功,在“alert”樣式基礎(chǔ)上追加“alert-success”樣式,具體呈現(xiàn)的是背景、邊框和文本都是綠色;
2、信息警示框:給用戶提供提示信息,在“alert”樣式基礎(chǔ)上追加“alert-info”樣式,具體呈現(xiàn)的是背景、邊框和文本都是淺藍(lá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">您已操作失敗兩次,還有最后一次機(jī)會</div> <div class="alert alert-danger" role="alert">對不起,您輸入的密碼有誤</div>
可關(guān)閉的警示框
大家在平時瀏覽網(wǎng)頁的時候,會發(fā)現(xiàn)一些警示框帶有關(guān)閉按鈕,用戶一點(diǎn)擊關(guān)閉按鈕就能自動關(guān)閉顯示的警示框(也就是讓警示框隱藏不顯示)。在Bootstrap框架中的警示框也具有這樣的功能。
使用方法:
只需要在默認(rèn)的警示框里面添加一個關(guān)閉按鈕。然后進(jìn)行三個步驟:
1、需要在基本警示框“alert”的基礎(chǔ)上添加“alert-dismissable”樣式。
2、在button標(biāo)簽中加入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">×</button> 恭喜您操作成功! </div>
警示框的鏈接
有時候你可能想在警示框中加入鏈接地址,用來告訴用戶跳到某一個地方或新的頁面。而這個時候你又想讓用戶能明顯的看出來這是鏈接地址。在Bootstrap框架中對警示框里的鏈接樣式做了一個高亮顯示處理。為不同類型的警示框內(nèi)的鏈接進(jìn)行了加粗處理,并且顏色相應(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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
深入理解JavaScript系列(13) This? Yes,this!
在這篇文章里,我們將討論跟執(zhí)行上下文直接相關(guān)的更多細(xì)節(jié)。討論的主題就是this關(guān)鍵字。實踐證明,這個主題很難,在不同執(zhí)行上下文中this的確定經(jīng)常會發(fā)生問題2012-01-01下載網(wǎng)站打開頁面后間隔多少時間才顯示下載鏈接地址的代碼
有時候可能為了一些更好的廣告效果等原因,需要讓用戶等待一段時間以后,再顯示真實下載地址代碼,有利于緩解服務(wù)器壓力。2010-04-04js取兩個數(shù)組的交集|差集|并集|補(bǔ)集|去重示例代碼
求兩個集合的補(bǔ)集、交集、差集、并集等等在實際應(yīng)用中經(jīng)常會使用到,下面與大家分享下具體的實現(xiàn)代碼,感興趣的朋友可以參考下,希望對大家有所幫助2013-08-08layui 實現(xiàn)表單和文件上傳一起傳到后臺的例子
今天小編就為大家分享一篇layui 實現(xiàn)表單和文件上傳一起傳到后臺的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09