Bootstrap 简明教程

Bootstrap - Toasts

本章讨论有关组件 toasts 的内容。轻量级且可自定义的吐司就像警示消息。吐司是向用户提供响应式且不显眼的通知的有用工具。

This chapter discusses about the component toasts. Toasts are like alert messages, that are lightweight and customizable. Toasts are a useful tool for providing responsive and unobtrusive notifications to the user.

Toasts in Bootstrap are used to display non-blocking notifications at the bottom or top of the screen.
They can provide feedback or alert the user to certain events or actions, without interrupting their current task.
Toasts can contain text, images, or any other HTML content, and can be customized to fit the design of the website or application.
They can also be dismissed by the user or have a set duration before disappearing on their own.
You must initialize the toasts yourself, as they are opt-in for performance reasons.
If you do not specify autohide: false, toasts will automatically hide.
The animation effect of the toast component is dependent on the prefers-reduced-motion media query.
A header and a body is recommended to be added to a toast to make it more extensible and predictable.
You require a single element to contain your toast and must have a dismiss button.

Basic toast

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

In order to create a basic toast, you need to use the .toast class and add a .toast-header to provide a heading and a .toast-body to add the content.

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

Let us see an example of a basic toast:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

以下 JavaScript 查询用于触发吐司：

The following JavaScript query is used to trigger a toast:

或

在 HTML 中添加以下链接：

Add the following link in your html:

Live toast

以下是页面上可以查看实时吐司的示例：

Following is an example of a live toast that can be viewed on your page:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

Translucent toast

Toast 有些半透明，并与出现它们的页面融合。

Toasts are somewhat translucent and blend with the page on which they appear.

我们看一个示例：

Let us see an example:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

Stacking of toasts

通过将它们包裹起来，Toast 可以在 Toast 容器中堆叠。堆叠后会在 Toast 中添加纵向空间。

Toasts can be stacked in a toast container by wrapping them. Vertical space is added to the toasts when stacked.

我们看一个示例：

Let us see an example:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

Custom content

The toasts can be customized by removing the sub-components, adding some utilities or even for that matter, your own markup.
You can add a custom icon from Bootstrap icons or remove the .toast-header, add buttons to the content, etc.

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

Let us see an example for the customization of a toast, where two buttons are added to the toast body:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

Color schemes

可以使用 * colors* 和 * background* 实用程序创建不同的 Toast 颜色方案。

Different toast color schemes can be created using the colors and background utilities.

让我们看一个将颜色方案添加到 Toast 中的示例：

Let us see an example of adding the color scheme to a toast:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

Placement of toasts

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

The toast placement feature is used to set the position of the toast on the webpage. Following are the options available for placement of toasts:

.position-absolute - It is used to position the element relative to its closest positioned ancestor.
.top-* - sets the position of the top alignment of the toast.
.bottom-* - sets the position of the bottom alignment of the toast.
.start-* - sets the position of the start alignment of the toast.
.end-* - sets the position of the end alignment of the toast.

定位类采取的值范围从 0 到 50 。

The values taken by the placement classes range from 0 to 50.

让我们看一个定位类示例：

Let us see an example of the placement classes:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

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

When working with systems that generate many notifications, one after the other, you can use a wrapping element to stack these notifications. Refer the example given below:

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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 实用程序。让我们看一个示例：

In order to align toasts horizontally and/or vertically, use the flexbox utilties. Let us see an example:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

Accessibility

为了让有屏幕阅读器和/或类似辅助技术的用户可以访问 Toast，你应该将 Toast 封装在 aria-live region. 中。

In order to make the toasts accessible to the users with screen readers and / or similar assistive technologies, you should wrap the toasts in an aria-live region.

Changes to the live regions are automatically identified by the screen readers, without setting the user’s focus.
Ensure that the complete toast is identified as a single (atomic) unit, by including aria-atomic="true".
When the information shown to the user is important, use the alert components rather than toasts.
The live region should be present in the markup before the toast is generated or updated.
Depending on the content, you need to adapt the role and aria-live attributes; such as: In case of error, use: role="alert" aria-live="assertive"*Otherwise, use: *role="status" aria-live="polite"
You must update the delay timeout in order to let the user read the toast, as the content being displayed changes dynamically.
A close button must be added to the toast, to allow users to close the toast, when using autohide: false.

我们看一个示例：

Let us see an example:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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