首頁 > 文章 > web前端 > 深入解說Bootstrap中警告框組件的使用方法

深入解說Bootstrap中警告框組件的使用方法

青灯夜游轉載: 2021-11-29 19:13:072613瀏覽

Bootstrap中怎麼彈出警告框（Alerts）？以下這篇文章透過程式碼實例來講解Bootstrap5警告框組件的用法，希望對大家有幫助！

1 警告框（Alerts）

大家看到Alerts這個字不要跟js中的Alert警告視窗混淆，二者沒什麼連結。 Bootstrap5警告框，官方的定義是為典型使用者操作提供上下文回饋訊息，並提供少量可用且靈活的警報訊息。官方的定義有些讓人摸不著頭腦，一般來說警告框其實起名叫訊息提醒比較合適一點，通常在視窗右下角或右上角提醒「您有幾個未讀訊息」之類的。【相關推薦：《bootstrap教學》】

<!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> 你收到一条站内短信，<a href="#">点此查看</a>
        <button type="button" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

深入解說Bootstrap中警告框組件的使用方法

#2 警告框組成

警告框比較簡單，由一個容器和一個關閉按鈕組成，其中關閉按鈕可以省略，可以透過js定時關閉，例如設定成顯示30秒後關閉。下面是一個最簡單的訊息框範例。

<!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">
        老刘!你收到一条站内短信。
        </div>

     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

深入解說Bootstrap中警告框組件的使用方法

3 警告框顏色

上面例子，除了在容器中用alert標誌這是個警告框之外，還有個alert-primary類，設定警告框的背景顏色。下面列出了警告框的所有常用顏色。

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

深入解說Bootstrap中警告框組件的使用方法

4 警告框中的連結顏色

#4.1 自動比對

使用.alert-link 公用程式類別可以在任何警報中快速提供匹配的彩色鏈接，下面我僅給出三種顏色的對比。

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

深入解說Bootstrap中警告框組件的使用方法

4.2 使用彩色連結類別

在《Bootstrap5中文手冊》助理分類中的彩色連結中，可以使用link-*類別對連結著色。與text-*類別不同，這些類別具有：hover和：focus狀態。彩色連結不是警告框特有的，對所有連結都有效，所以下面沒用警告框顏色，以下是各種顏色：

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

深入解說Bootstrap中警告框組件的使用方法

倒數第二個我把背景設定為黑色，否則不易分辨。

5 附加內容

警報也可以包含其他HTML元素，例如標題、段落和分隔符號。

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

深入解說Bootstrap中警告框組件的使用方法

雖然看起來還不錯，不過不建議把它當作佈局排版的元件，網格和後面介紹的更強大的卡片更適合排版。

6 關閉

開始的第一個例子中，我們已經使用關閉按鈕，下面我們再講一下其原理，如果不想深入研究的無效觀看本節，直接複製例子即可。

使用alert JavaScript插件，可以關閉任何內嵌警報（即警告框）。方法如下：

確保已載入bootstrap.bundle.min.js。
新增一個關閉按鈕和.alert-dismissible類，該類別在警報的右側添加額外的填充，並定位關閉按鈕。
在close按鈕上，加入data-bs-dismiss="alert"屬性，該屬性觸發JavaScript功能。請務必使用button元素在所有裝置上進行正確的操作。
要在解除警報時設定警報動畫，請確保新增.fade和.show類別。

當警報解除時，元素將從頁面結構中完全移除。如果鍵盤使用者使用「關閉」按鈕解除警報，他們的焦點將突然遺失，並根據瀏覽器的不同，重設為頁面/文件的開頭。因此，我們建議包含額外的JavaScript來偵聽closed.bs.alert 事件並以程式設計方式將focus（）設定到頁面中最合適的位置。如果您打算將焦點移至通常不接收焦點的非互動元素，請確保將tabindex="-1"新增至該元素。

更多關於bootstrap的相關知識，可訪問：bootstrap基礎教程！！

以上是深入解說Bootstrap中警告框組件的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript bootstrap html JS 事件 alert

陳述：

本文轉載於：juejin.cn。如有侵權，請聯絡admin@php.cn刪除

上一篇：深入解說Bootstrap中手風琴組件的使用方法（實例）下一篇：深入解說Bootstrap中手風琴組件的使用方法（實例）

看更多