您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“Bootstrap中警告框組件的使用方法是什么”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
大家看到Alerts這個(gè)單詞不要和js中的Alert警告窗相混淆,二者沒(méi)什么聯(lián)系。 Bootstrap5警告框,官方的定義是為典型用戶操作提供上下文反饋消息,并提供少量可用且靈活的警報(bào)消息。官方的定義有些讓人摸不著頭腦,一般來(lái)說(shuō)警告框其實(shí)起名叫消息提醒更合適一點(diǎn),通常在窗口右下角或者右上角提醒“您有幾條未讀消息”之類的。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>警告窗口組件</title> </head> <body> <div> <br><br><br> <div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>老劉!</strong> 你收到一條站內(nèi)短信,<a href="#">點(diǎn)此查看</a> <button type="button" data-bs-dismiss="alert" aria-label="Close"></button> </div> </div> <script src="../bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
警告框比較簡(jiǎn)單,由一個(gè)容器和一個(gè)關(guān)閉按鈕組成,其中關(guān)閉按鈕可以省略,可以通過(guò)js定時(shí)關(guān)閉,例如設(shè)置成顯示30秒后關(guān)閉。下面是一個(gè)最簡(jiǎn)單的消息框例子。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>警告窗口組件</title> </head> <body> <div class="alert alert-primary"> 老劉!你收到一條站內(nèi)短信。 </div> <script src="../bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
上面例子,除了在容器中用alert標(biāo)志這是個(gè)警告框之外,還有個(gè)alert-primary類,設(shè)置警告框的背景顏色。下面列出了警告框的所有常用顏色。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>警告窗口組件</title> </head> <body> <div> <br><br><br> <div class="alert alert-primary" role="alert"> alert-primary </div> <div class="alert alert-secondary" role="alert"> alert-secondary </div> <div class="alert alert-success" role="alert"> alert-success </div> <div class="alert alert-danger" role="alert"> alert-danger </div> <div class="alert alert-warning" role="alert"> alert-warning </div> <div class="alert alert-info" role="alert"> alert-info </div> <div class="alert alert-light" role="alert"> alert-light </div> <div class="alert alert-dark" role="alert"> alert-dark </div> </div> <script src="../bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
使用 .alert-link 實(shí)用程序類可以在任何警報(bào)中快速提供匹配的彩色鏈接,下面我僅給出三種顏色的對(duì)比。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>彩色鏈接</title> </head> <body> <div> <br><br><br> <div class="alert alert-primary" role="alert"> A simple primary alert with <a href="#">an example link</a>. Give it a click if you like. </div> <div class="alert alert-secondary" role="alert"> A simple secondary alert with <a href="#">an example link</a>. Give it a click if you like. </div> <div class="alert alert-success" role="alert"> A simple success alert with <a href="#">an example link</a>. Give it a click if you like. </div> <br><br> <div class="alert alert-primary" role="alert"> A simple primary alert with <a href="#">an example link</a>. Give it a click if you like. </div> <div class="alert alert-secondary" role="alert"> A simple secondary alert with <a href="#">an example link</a>. Give it a click if you like. </div> <div class="alert alert-success" role="alert"> A simple success alert with <a href="#">an example link</a>. Give it a click if you like. </div> </div> <script src="../bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
在《Bootstrap5中文手冊(cè)》助手分類中的彩色鏈接中,可以使用link-*
類對(duì)鏈接著色。與text-*
類不同,這些類具有:hover和:focus狀態(tài)。彩色鏈接不是警告框特有的,對(duì)所有鏈接有效,所以下面沒(méi)用警告框顏色,以下是各種顏色:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>彩色鏈接</title> </head> <body> <div> <br><br><br> <div><a href="#">Primary link</a></div> <div><a href="#">Secondary link</a></div> <div><a href="#">Success link</a></div> <div><a href="#">Danger link</a></div> <div><a href="#">Warning link</a></div> <div><a href="#">Info link</a></div> <div><a href="#" class="bg-dark link-light">Light link</a></div> <div><a href="#">Dark link</a></div> </div> <script src="../bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
倒數(shù)第二個(gè)我把背景設(shè)置為黑色,否則不易分辨。
警報(bào)還可以包含其他HTML元素,如標(biāo)題、段落和分隔符。
<div class="alert alert-success" role="alert"> <h5 class="alert-heading">Well done!</h5> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div>
雖然看起來(lái)還不錯(cuò),不過(guò)不建議把它當(dāng)做布局排版的組件,網(wǎng)格和后面介紹的更加強(qiáng)大的卡片更適合排版。
開(kāi)始的第一個(gè)例子中,我們已經(jīng)使用關(guān)閉按鈕,下面我們?cè)僦v一下其原理,如果不想深入研究的無(wú)效觀看本節(jié),直接復(fù)制例子即可。
使用alert JavaScript插件,可以關(guān)閉任何內(nèi)聯(lián)警報(bào)(即警告框)。方法如下:
確保已加載bootstrap.bundle.min.js。
添加一個(gè)關(guān)閉按鈕和.alert-dismissible類,該類在警報(bào)的右側(cè)添加額外的填充,并定位關(guān)閉按鈕。
在close按鈕上,添加data-bs-dismiss="alert"屬性,該屬性觸發(fā)JavaScript功能。一定要使用button元素在所有設(shè)備上進(jìn)行正確的操作。
要在解除警報(bào)時(shí)設(shè)置警報(bào)動(dòng)畫(huà),請(qǐng)確保添加.fade和.show類。
當(dāng)警報(bào)解除時(shí),元素將從頁(yè)面結(jié)構(gòu)中完全移除。如果鍵盤用戶使用“關(guān)閉”按鈕解除警報(bào),他們的焦點(diǎn)將突然丟失,并根據(jù)瀏覽器的不同,重置為頁(yè)面/文檔的開(kāi)頭。因此,我們建議包含額外的JavaScript來(lái)偵聽(tīng)closed.bs.alert 事件并以編程方式將focus()設(shè)置到頁(yè)面中最合適的位置。如果您計(jì)劃將焦點(diǎn)移動(dòng)到通常不接收焦點(diǎn)的非交互元素,請(qǐng)確保將tabindex="-1"添加到該元素。
“Bootstrap中警告框組件的使用方法是什么”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。