17.1 警告框（Alerts）

大家看到Alerts這個(gè)單詞不要和js中的Alert警告窗相混淆，二者沒什么聯(lián)系。 Bootstrap5警告框，官方的定義是為典型用戶操作提供上下文反饋消息，并提供少量可用且靈活的警報(bào)消息。官方的定義有些讓人摸不著頭腦，一般來說警告框其實(shí)起名叫消息提醒更合適一點(diǎn)，通常在窗口右下角或者右上角提醒“您有幾條未讀消息”之類的。

<!doctype html>
<html lang="zh-CN">
  <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="container">
      <br><br><br>
      <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <strong>老劉!</strong> 你收到一條站內(nèi)短信，<a href="#" class="link-danger">點(diǎn)此查看</a>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>
復(fù)制代碼

17.2 警告框組成

警告框比較簡(jiǎn)單，由一個(gè)容器和一個(gè)關(guān)閉按鈕組成，其中關(guān)閉按鈕可以省略，可以通過js定時(shí)關(guān)閉，例如設(shè)置成顯示30秒后關(guān)閉。下面是一個(gè)最簡(jiǎn)單的消息框例子。

<!doctype html>
<html lang="zh-CN">
  <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>
復(fù)制代碼

17.3 警告框顏色

上面例子，除了在容器中用alert標(biāo)志這是個(gè)警告框之外，還有個(gè)alert-primary類，設(shè)置警告框的背景顏色。下面列出了警告框的所有常用顏色。

<!doctype html>
<html lang="zh-CN">
  <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="container">
      <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>
復(fù)制代碼

17.3 警告框中的鏈接顏色

17.4.1 自動(dòng)匹配

使用 .alert-link 實(shí)用程序類可以在任何警報(bào)中快速提供匹配的彩色鏈接，下面我僅給出三種顏色的對(duì)比。

<!doctype html>
<html lang="zh-CN">
  <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="container">
      <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="#" class="alert-link">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="#" class="alert-link">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="#" class="alert-link">an example link</a>. Give it a click if you like.
            </div>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>
復(fù)制代碼

17.4.2 使用彩色鏈接類

在《Bootstrap5中文手冊(cè)》助手分類中的彩色鏈接中，可以使用link-*類對(duì)鏈接著色。與text-*類不同，這些類具有：hover和：focus狀態(tài)。彩色鏈接不是警告框特有的，對(duì)所有鏈接有效，所以下面沒用警告框顏色，以下是各種顏色：

<!doctype html>
<html lang="zh-CN">
  <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="container">
      <br><br><br>
        <div><a href="#" class="link-primary">Primary link</a></div>
        <div><a href="#" class="link-secondary">Secondary link</a></div>
        <div><a href="#" class="link-success">Success link</a></div>
        <div><a href="#" class="link-danger">Danger link</a></div>
        <div><a href="#" class="link-warning">Warning link</a></div>
        <div><a href="#" class="link-info">Info link</a></div>
        <div><a href="#" class="bg-dark link-light">Light link</a></div>
        <div><a href="#" class="link-dark">Dark link</a></div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>
復(fù)制代碼

倒數(shù)第二個(gè)我把背景設(shè)置為黑色，否則不易分辨。

17.4 附加內(nèi)容

警報(bào)還可以包含其他HTML元素，如標(biāo)題、段落和分隔符。

<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<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>
復(fù)制代碼

雖然看起來還不錯(cuò)，不過不建議把它當(dāng)做布局排版的組件，網(wǎng)格和后面介紹的更加強(qiáng)大的卡片更適合排版。

17.5 關(guān)閉

開始的第一個(gè)例子中，我們已經(jīng)使用關(guān)閉按鈕，下面我們?cè)僦v一下其原理，如果不想深入研究的無效觀看本節(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)畫，請(qǐng)確保添加.fade和.show類。

當(dāng)警報(bào)解除時(shí)，元素將從頁面結(jié)構(gòu)中完全移除。如果鍵盤用戶使用“關(guān)閉”按鈕解除警報(bào)，他們的焦點(diǎn)將突然丟失，并根據(jù)瀏覽器的不同，重置為頁面/文檔的開頭。因此，我們建議包含額外的JavaScript來偵聽closed.bs.alert 事件并以編程方式將focus（）設(shè)置到頁面中最合適的位置。如果您計(jì)劃將焦點(diǎn)移動(dòng)到通常不接收焦點(diǎn)的非交互元素，請(qǐng)確保將tabindex="-1"添加到該元素。

今天的課程就到這里，請(qǐng)關(guān)注我，及時(shí)學(xué)習(xí) 俺老劉原創(chuàng)的《Bootstrap5零基礎(chǔ)到精通》第18節(jié) Bootstrap5徽章圖標(biāo)Badge組件用法。

第17節(jié) Bootstrap5警告框Alerts組件用法