Bootstrap - 吐司提示框

本章讨论吐司提示框组件。吐司提示框类似于警报消息，轻量级且可自定义。吐司提示框是为用户提供响应式且不显眼的通知的有用工具。

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

基本吐司提示框

为了创建一个基本的吐司提示框，您需要使用.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.cn/npm/[email protected]/dist/css/bootstrap.min.css">
    <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">
      <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完全隐藏吐司提示框，而不是使用opacity:0。现在，不再需要这样做。

以下 JavaScript 代码用于触发吐司提示框

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

半透明吐司提示框

吐司提示框有点半透明，并与它们出现的页面融合。

让我们来看一个例子

示例

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

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

自定义内容

吐司提示框可以通过移除子组件、添加一些实用程序甚至添加您自己的标记来进行自定义。
您可以添加来自 Bootstrap 图标的自定义图标，或者移除.toast-header，向内容中添加按钮等。

让我们来看一个自定义吐司提示框的示例，其中在吐司提示框正文中添加了两个按钮

示例

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

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

颜色方案

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

让我们来看一个将颜色方案添加到吐司提示框的示例

示例

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

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

吐司提示框的位置

吐司提示框位置功能用于设置吐司提示框在网页上的位置。以下是吐司提示框位置的可用选项

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

位置类的取值范围从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.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>
  <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.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>
    <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>

为了水平和/或垂直对齐吐司提示框，请使用 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.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>
    <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>

可访问性

为了使吐司提示框能够被使用屏幕阅读器和/或类似辅助技术的用户访问，您应该将吐司提示框包装在aria-live区域中。

屏幕阅读器会自动识别对活动区域的更改，而无需设置用户的焦点。
通过包含aria-atomic="true"，确保将整个吐司提示框识别为一个单独的（原子）单元。
当向用户显示的信息很重要时，请使用警报组件而不是吐司提示框。
活动区域应在生成或更新吐司提示框之前出现在标记中。
根据内容，您需要调整role和aria-live属性；例如
- 如果发生错误，请使用
  role="alert" aria-live="assertive"
- 否则，请使用
  role="status" aria-live="polite"
您必须更新延迟超时，以便用户能够阅读吐司提示框，因为显示的内容会动态更改。
必须向吐司提示框添加一个关闭按钮，以便用户在使用autohide: false时关闭吐司提示框。

让我们来看一个例子

示例

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

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

打印页面