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 = [
            ``,
            `   ${message}`,
            '   ',
            ''
            ].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://www.tutorialspoint.com/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://www.tutorialspoint.com/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://www.tutorialspoint.com/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://www.tutorialspoint.com/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://www.tutorialspoint.com/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>

带图标的警报

要使用图标创建警报，请使用flexbox 实用程序和Bootstrap Icons。

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

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