Bootstrap - 吐司

本章讨论组件toast。Toast 就像警报消息一样，是轻量级且可定制的。Toast 是一个有用的工具，可向用户提供响应灵敏且不引人注目的通知。

Bootstrap 中的 Toast 用于在屏幕底部或顶部显示非阻塞通知。
他们可以提供反馈或提醒用户某些事件或操作，而不会中断他们当前的任务。
Toast 可以包含文本、图像或任何其他 HTML 内容，并且可以进行自定义以适合网站或应用程序的设计。
它们也可以被用户关闭或在自行消失之前有设定的持续时间。
您必须自己初始化 toast，因为它们是出于性能原因而选择加入的。
如果不指定autohide: false，toasts 将自动隐藏。
Toast组件的动画效果取决于prefers-reduced-motion媒体查询。
建议将 header 和 body 添加到 toast 中，以使其更具可扩展性和可预测性。
您需要一个元素来包含您的 toast，并且必须有一个关闭按钮。

基本吐司

为了创建基本的 toast，您需要使用.toast类并添加.toast-header来提供标题，并添加.toast-body来添加内容。

让我们看一个基本的吐司示例：

例子

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <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">
      <h3>Toast Example</h3>
      <p>A toast is like an alert box that is shown.</p>
      <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <small>A toast without an event</small>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
          Toast is shown without any event like on a click of a button.
        </div>
      </div>
    </div>
  </body>
</html>

过去，自动添加.hide类以使用display:none完全隐藏 toast，而不是使用opacity:0。现在，不再需要这个了。

以下 JavaScript 查询用于触发 toast：

    const toastTrigger = document.getElementById('liveToastBtn')
    const toastLiveExample = document.getElementById('liveToast')

    if (toastTrigger) {
      const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
      toastTrigger.addEventListener('click', () => {
        toastBootstrap.show()
      })
    }

或者

    $(document).ready(function() {
			$('#liveToast').click(function() {
				$('.toast').toast({
					animation: false,
					delay: 3000
				});
				$('.toast').toast('show');
			});
		});

在您的 html 中添加以下链接：

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

活吐司

以下是可以在您的页面上查看的实时祝酒示例：

例子

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Toasts</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>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class="container mx-auto mt-2">
	<h4>View Live toast</h4>
	<button type="button" class="btn btn-success" id="liveToast">View toast live</button>
    <div class="toast-container position-fixed bottom-0 end-0 p-4">
        <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
        <strong class="me-auto">Live Toast</strong>
        <small>Now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            This is a live toast and placed at the bottom of the page.
        </div>
        </div>
    </div>
	<script>
		$(document).ready(function() {
			$('#liveToast').click(function() {
				$('.toast').toast({
					animation: false,
					delay: 3000
				});
				$('.toast').toast('show');
			});
		});
	</script>
</body>
</html>

半透明吐司

Toast 有点半透明，并与它们出现的页面融为一体。

让我们看一个例子：

例子

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Toasts</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>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
	<h4>Translucent toast</h4>
	<button type="button" class="btn btn-success" id="viewToast">Click for toast</button>
    <div class="toast-container position-top top-0">
        <div id="viewToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
        <strong class="me-auto">Translucent Toast</strong>
        <small class="text-body-secondary">First toast</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            This is a translucent toast and placed at the top of the page.
        </div>
        </div>
    </div>
	<script>
		$(document).ready(function() {
			$('#viewToast').click(function() {
				$('.toast').toast({
					animation: false,
					delay: 3000
				});
				$('.toast').toast('show');
			});
		});
	</script>
</body>
</html>

吐司的堆叠

吐司可以通过包裹而堆叠在吐司容器中。堆叠时，吐司会增加垂直空间。

让我们看一个例子：

例子

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Toasts</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>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
	<h4>Stacking of toasts</h4>
	<button type="button" class="btn btn-success" id="viewToast">View stacked toasts</button>
    <!-- First Toast -->
    <div class="toast-container position-top top-0">
        <div id="viewToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
        <strong class="me-auto">Toast 1</strong>
        <small class="text-body-secondary">First toast</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body text-bg-warning">
            This is toast 1 and is placed at the top of the page.
        </div>
        </div>
        <!-- Second Toast -->
        <div id="viewToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
          <strong class="me-auto">Toast 2</strong>
          <small class="text-body-secondary">Second toast</small>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body text-bg-info">
              This is toast 2 and is placed below toast 1.
          </div>
          </div>
    </div>
	<script>
		$(document).ready(function() {
			$('#viewToast').click(function() {
				$('.toast').toast({
					animation: false,
					delay: 3000
				});
				$('.toast').toast('show');
			});
		});
	</script>
</body>
</html>

定制内容

可以通过删除子组件、添加一些实用程序甚至您自己的标记来自定义 toast。
您可以从 Bootstrap 图标添加自定义图标或删除.toast-header、向内容添加按钮等。

让我们看一个自定义 Toast 的示例，其中在 Toast 主体中添加了两个按钮：

例子

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Toasts</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>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
	<h4>Customization of toasts</h4>
	<!-- Button to trigger the toasts -->
    <button type="button" class="btn btn-primary" id="myBtn">View customized toast</button>
    <div class="toast-container">
      <div class="toast">
        <div class="toast-header bg-secondary-subtle">
          <strong>Thanks</strong>
        </div>
        <div class="toast-body text-bg-secondary">Buttons are added to the toast.</div>
        <button type="button" class="btn btn-success btn-sm">Submit</button>
        <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="toast" aria-label="Close">Cancel</button>
      </div>
    </div>
    <script>
      $(document).ready(function() {
        $('#myBtn').click(function() {
          $('.toast').toast({
            animation: false,
            delay: 3000
          });
          $('.toast').toast('show');
        });
      });
    </script>
</body>
</html>

配色方案

可以使用颜色和背景实用程序创建不同的吐司配色方案。

让我们看一个将配色方案添加到 toast 的示例：

例子

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Toasts</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>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
	<h4>Color scheme</h4>
    <p>Color scheme added to the toast</p>
	<!-- Button to trigger the toasts -->
    <button type="button" class="btn btn-primary" id="myBtn">Click for toast</button>
    <div class="toast-container">
      <div class="toast">
        <div class="toast-header bg-warning-subtle">
          <strong>Toast Header</strong>
        </div>
        <div class="toast-body text-bg-success">Color scheme is added to the header and body of the toast.</div>
    </div>
    </div>
    <script>
      $(document).ready(function() {
        $('#myBtn').click(function() {
          $('.toast').toast({
            animation: false,
            delay: 3000
          });
          $('.toast').toast('show');
        });
      });
    </script>
</body>
</html>

吐司的摆放位置

toast放置功能用于设置toast在网页上的位置。以下是可用于放置 Toast 的选项：

.position-absolute - 用于相对于其最近定位的祖先来定位元素。
.top-* - 设置 toast 顶部对齐的位置。
.bottom-* - 设置 toast 底部对齐的位置。
.start-* - 设置 toast 的起始对齐位置。
.end-* - 设置 toast 结束对齐的位置。

安置类别所采用的值范围为0到50。

让我们看一个安置类的例子：

例子

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Toasts</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>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
	<h4>Placement - Toasts</h4>
    <p>Set the position of the toasts on webpage</p>
	<!-- Button to trigger the toasts -->
    <button type="button" class="btn btn-primary" id="myBtn">Click for toast</button>
     <!--Top left -->
    <div class="toast-container top-0 start-0">
        <div class="toast">
            <div class="toast-header">
              <strong class="me-auto">Toast 1</strong>
              <small class="text-body-secondary">Toast top left </small>
              <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Position at Top left.
            </div>
        </div>
    </div>
     <!--Top center-->
    <div class="toast-container top-0 start-50 translate-middle-x">
        <div class="toast">
            <div class="toast-header">
              <strong class="me-auto">Toast 2</strong>
              <small class="text-body-secondary">Toast at top center</small>
              <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Position at Top Center.
            </div>
        </div>
    </div>
     <!--Top right -->
    <div class="toast-container top-0 end-0"> 
        <div class="toast">
            <div class="toast-header">
              <strong class="me-auto">Toast 3</strong>
              <small class="text-body-secondary">Toast at top right</small>
              <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Position at Top Right.
            </div>
        </div>
    </div>
    <!--Middle left-->
    <div class="toast-container top-50 start-0 translate-middle-y"> 
      <div class="toast">
          <div class="toast-header">
            <strong class="me-auto">Toast 4</strong>
            <small class="text-body-secondary">Toast at middle left</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              Position at middle left.
          </div>
      </div>
    </div>
    <!--Middle left-->
    <div class="toast-container top-50 start-50 translate-middle"> 
      <div class="toast">
          <div class="toast-header">
            <strong class="me-auto">Toast 5</strong>
            <small class="text-body-secondary">Toast at middle center</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              Position at middle center.
          </div>
      </div>
    </div>
    <!--Middle right-->
    <div class="toast-container top-50 end-0 translate-middle-y"> 
      <div class="toast">
          <div class="toast-header">
            <strong class="me-auto">Toast 6</strong>
            <small class="text-body-secondary">Toast at middle right</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              Position at middle right.
          </div>
      </div>
    </div>
    <!--Bottom left-->
    <div class="toast-container bottom-0 start-0"> 
      <div class="toast">
          <div class="toast-header">
            <strong class="me-auto">Toast 7</strong>
            <small class="text-body-secondary">Toast at bottom left</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              Position at bottom left.
          </div>
      </div>
    </div>
    <!--Bottom center-->
    <div class="toast-container bottom-0 start-50 translate-middle-x"> 
      <div class="toast">
          <div class="toast-header">
            <strong class="me-auto">Toast 8</strong>
            <small class="text-body-secondary">Toast at bottom center</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              Position at bottom center.
          </div>
      </div>
    </div>
    <!--Bottom right-->
    <div class="toast-container bottom-0 end-0"> 
      <div class="toast">
          <div class="toast-header">
            <strong class="me-auto">Toast 9</strong>
            <small class="text-body-secondary">Toast at bottom right</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              Position at bottom right.
          </div>
      </div>
    </div>
    <script>
      $(document).ready(function() {
        $('#myBtn').click(function() {
          $('.toast').toast({
            animation: false,
            delay: 3000
          });
          $('.toast').toast('show');
        });
      });
    </script>
</body>
</html>

当使用一个接一个地生成许多通知的系统时，您可以使用包装元素来堆叠这些通知。请参考下面给出的示例：

例子

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Toasts</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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-toasts p-0">
    <div aria-live="polite" aria-atomic="true" class="position-relative">

      <div class="toast-container top-0 start-0 p-3">
    
        <!-- Toasts within the container -->
        <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <strong class="me-auto">Toast 1</strong>
            <small class="text-body-secondary">Toast on top</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
            Toast at the top of the container.
          </div>
        </div>
    
        <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <strong class="me-auto">Toast 2</strong>
            <small class="text-body-secondary">Second toast</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
            Second toast in the stack.
          </div>
        </div>

        <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <strong class="me-auto">Toast 3</strong>
            <small class="text-body-secondary">Third toast</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
            Another toast in the stack.
          </div>
        </div>

        <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <strong class="me-auto">Toast 4</strong>
            <small class="text-body-secondary">Last toast</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
            Fourth toast at the bottom of the stack.
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

为了水平和/或垂直对齐 Toast，请使用 Flexbox 实用程序。让我们看一个例子：

例子

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Toasts</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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-toasts d-flex">
    <!-- Adding a flexbox container for alignment of the toasts -->
    <div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
    
      <!-- Then put toasts within the flexbox container-->
      <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header bg-danger-subtle">
          <strong class="me-auto">Toast within flexbox</strong>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
          This is a toast that is placed within a flexbox container and justified center.
        </div>
      </div>
    </div>
  </body>
</html>

无障碍

为了使具有屏幕阅读器和/或类似辅助技术的用户可以访问 toast，您应该将 toast 包裹在aria-live 区域中。

屏幕阅读器会自动识别活动区域的更改，而无需设置用户的焦点。
通过包含aria-atomic="true"确保完整的 toast 被识别为单个（Atomics）单元。
当向用户显示的信息很重要时，请使用警报组件而不是 toast。
在生成或更新 toast 之前，活动区域应出现在标记中。
根据内容的不同，需要调整角色和aria-live属性；例如：
- 如果出现错误，请使用：
  角色=“警报” aria-live=“断言”
- 否则，使用：
  角色=“状态” aria-live=“礼貌”
您必须更新延迟超时，以便让用户阅读 toast，因为显示的内容会动态变化。
必须将关闭按钮添加到 toast，以允许用户在使用autohide: false时关闭 toast 。

让我们看一个例子：

例子

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Toasts</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>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
	<h4>Accessibility - Toasts</h4>
    <p>Make the toasts accessible according to the value of role and aria-live</p>
	<!-- Button to trigger the toasts -->
    <button type="button" class="btn btn-primary" id="myBtn">Click for toast</button>
    <div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
        <div class="toast">
            <div class="toast-header">
              <strong class="me-auto">Toast 1</strong>
              <small class="text-body-secondary">First toast</small>
              <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                A toast that is like an alert.
            </div>
        </div>
    </div>
    <div role="status" aria-live="polite" aria-atomic="true" class="toast" data-bs-autohide="false">
      <div class="toast">
          <div class="toast-header">
            <strong class="me-auto">Toast 2</strong>
            <small class="text-body-secondary">Second toast</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              Toast where role=status and aria-live=polite.
          </div>
      </div>
  </div>
    <script>
      $(document).ready(function() {
        $('#myBtn').click(function() {
          $('.toast').toast({
            animation: false,
            delay: 3000
          });
          $('.toast').toast('show');
        });
      });
    </script>
</body>
</html>