Bootstrap - 警報

上一頁
下一頁

本章討論 Bootstrap 警報。警報訊息通常是向用戶顯示的突出訊息，需要使用者執行某些操作，例如警告、錯誤、資訊或確認訊息。

透過使用上下文類（例如.alert-success，.alert-warning，.alert-info等）擴充套件.alert基類，您可以使用 Bootstrap 快速輕鬆地構建各種原因的吸引人的警報訊息。要取消任何警報，您還可以包含一個可選的關閉按鈕。

簡單警報

Bootstrap 提供了總共 8 種不同的警報型別。以下示例演示了最常見的警報，例如成功、錯誤或危險、警告和資訊警報等。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Alerts</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="container mt-3">
            <h4 class="fs-2">Examples of alert messages</h4>
            <div class="alert alert-primary" role="alert">
                It is a primary alert box!
            </div>
            <div class="alert alert-secondary" role="alert">
                It is a secondary alert box!
            </div>
            <div class="alert alert-success" role="alert">
                It is a success alert box!
            </div>
            <div class="alert alert-danger" role="alert">
                It is a danger alert box!
            </div>
            <div class="alert alert-warning" role="alert">
                It is a warning alert box!
            </div>
            <div class="alert alert-info" role="alert">
                It is an info alert box!
            </div>
            <div class="alert alert-light" role="alert">
                It is a light alert box!
            </div>
            <div class="alert alert-dark" role="alert">
                It is a dark alert box!
            </div>
        </div>
    </body>
</html>

輔助功能提示：僅使用顏色來顯示警報訊息僅提供視覺指示，這對使用螢幕閱讀器等輔助技術的使用者沒有幫助。確保含義本身從內容中明確。

使用替代方法使用.visually-hidden 類來增加內容的清晰度。

即時警報示例

您可以在您的網頁上新增即時警報訊息。要實現此目的，請參考以下示例

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Bootstrap - Alerts</title>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>        
        </head>
        <body>
            <div class="container mt-3">
                <h4 class="fs-2">Live alert</h4>
                <div class="alert alert-primary alert-dismissible" role="alert">
                    <div id="liveAlertPlaceholder"></div>
                    <button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
                </div>
            </div>
            <script>
                const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
                const appendAlert = (message, type) => {
                const wrapper = document.createElement('div')
                wrapper.innerHTML = [
                `<div class="alert alert-${type} alert-dismissible" role="alert">`,
                `   <div>${message}</div>`,
                '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
                '</div>'
                ].join('')
                alertPlaceholder.append(wrapper)
                }
                const alertTrigger = document.getElementById('liveAlertBtn')
                if (alertTrigger) {
                    alertTrigger.addEventListener('click', () => {
                    appendAlert('Amazing, this is a live alert message!', 'success')
                    })
                    }
            </script>
      </body>
    </html>

以下 Javascript 用於觸發即時警報演示

  const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
            const appendAlert = (message, type) => {
            const wrapper = document.createElement('div')
            wrapper.innerHTML = [
            `'
            ].join('')
              alertPlaceholder.append(wrapper)
            }
            const alertTrigger = document.getElementById('liveAlertBtn')
            if (alertTrigger) {
                alertTrigger.addEventListener('click', () => {
                appendAlert('Amazing, this is a live alert message!', 'success')
                 })
                }

連結顏色

實用程式類.alert-link可用於任何警報訊息，以立即生成匹配顏色的連結，如下例所示。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Alerts</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="container mt-3">
            <h4 class="fs-2">Alert messages with links</h4>
            <div class="alert alert-primary" role="alert">
                It is a primary alert with <a href="https://tutorialspoint.tw/bootstrap/bootstrap_alerts.htm" class="alert-link">tutorialspoint.com</a>
            </div>
            <div class="alert alert-secondary" role="alert">
                It is a secondary alert with <a href="https://tutorialspoint.tw/bootstrap/bootstrap_alerts.htm" class="alert-link">tutorialspoint.com</a>
            </div>
            <div class="alert alert-success" role="alert">
                It is a success alert with <a href="https://tutorialspoint.tw/bootstrap/bootstrap_alerts.htm" class="alert-link">tutorialspoint.com</a>
            </div>
            <div class="alert alert-danger" role="alert">
                It is a danger alert with <a href="https://tutorialspoint.tw/bootstrap/bootstrap_alerts.htm" class="alert-link">tutorialspoint.com</a>
            </div>
            <div class="alert alert-warning" role="alert">
                It is a warning alert with <a href="https://tutorialspoint.tw/bootstrap/bootstrap_alerts.htm" class="alert-link">tutorialspoint.com</a>
            </div>
        </div>
  </body>
</html>

附加內容

警報中還可以包含額外的 HTML 元素，例如標題、段落和分隔符。以下示例演示了這一點。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Alerts</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="container mt-3">
            <h4 class="fs-2">Alert messages with additional content</h4>
            <div class="alert alert-success" role="alert">
                <h4 class="alert-heading">Congratulations! Sending my best wishes.</h4>
                <p>Congratulations on your graduation! Sending you our best wishes for a happy and successful future.</p>
                <hr>
                <p class="mb-0">What could be better than something sweet to celebrate an accomplishment!!!</p>
              </div>
        </div>
  </body>
</html>

帶有圖示的警報

要建立帶有圖示的警報，請使用彈性盒實用工具和Bootstrap 圖示。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Alerts</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="container mt-3">
            <h4 class="fs-2">Alert messages with icons</h4>
            <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                <symbol id="success-bg" viewBox="0 0 16 16">
                  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                </symbol>
                <symbol id="info-bg" viewBox="0 0 16 16">
                  <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
                </symbol>
                <symbol id="warning-bg" viewBox="0 0 16 16">
                  <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                </symbol>
            </svg>
            <div class="alert alert-primary d-flex align-items-center" role="alert">
                <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use xlink:href="#info-bg"/></svg>
                <div>
                  It is an info alert with an info icon.
                </div>
            </div>
            <div class="alert alert-success d-flex align-items-center" role="alert">
                <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use xlink:href="#success-bg"/></svg>
                <div>
                  It is a success alert with a success icon.
                </div>
            </div>
            <div class="alert alert-warning d-flex align-items-center" role="alert">
                <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use xlink:href="#warning-bg"/></svg>
                <div>
                  It is a warning alert with a warning icon.
                </div>
            </div>
            <div class="alert alert-danger d-flex align-items-center" role="alert">
                <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use xlink:href="#warning-bg"/></svg>
                <div>
                  It is a danger alert with a danger icon.
                </div>
            </div>
        </div>
  </body>
</html>

關閉警報

可以使用警報 JavaScript 外掛內聯關閉任何警報。請參考以下幾點

  • 確保已載入內建的 Bootstrap JavaScript 或警報外掛。

  • 新增關閉按鈕和.alert-dismissible類，這將放置關閉按鈕並向警報右側提供額外的填充。

  • 可以透過向關閉按鈕新增data-bs-dismiss="alert"屬性來啟用 JavaScript 功能。

讓我們在下面的示例中檢視此功能

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Alerts</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="container mt-3">
            <h4 class="fs-2">Dismissal of alerts</h4>
            <div class="alert alert-primary alert-dismissible" role="alert">
                <strong>Primary Alert Box!</strong> Click on close icon to dismiss the alert box.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
              <div class="alert alert-success alert-dismissible" role="alert">
                <strong>Success Alert Box!</strong> Click on close icon to dismiss the alert box.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
              <div class="alert alert-warning alert-dismissible" role="alert">
                <strong>Warning Alert Box!</strong> Click on close icon to dismiss the alert box.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
        </div>
  </body>
</html>

關閉警報訊息後，如果您將焦點設定在通常不會接收焦點的非互動式元素上，請確保向元素新增tabindex="-1"。因為，如果不這樣做，可能會丟失焦點並在關閉警報訊息後將其重置到頁面開頭。

動畫警報

實用程式類.fade和.show在您關閉警報訊息時建立動畫效果。讓我們在下面的示例中檢視此功能。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Alerts</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="container mt-3">
        <h4 class="fs-2">Alert messages with animation</h4>
            <div class="alert alert-info alert-dismissible fade show" role="alert">
                <strong>Primary Alert Box!</strong> This will close the alert box with fading effect.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <strong>Success Alert Box!</strong> This will close the alert box with fading effect.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <strong>Warning Alert Box!</strong> This will close the alert box with fading effect.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
  </body>
</html>
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.