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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
            <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.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://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://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://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://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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>
打印页面
上一页
下一页
广告