Bootstrap 简明教程
Bootstrap - Toasts
本章讨论有关组件 toasts 的内容。轻量级且可自定义的吐司就像警示消息。吐司是向用户提供响应式且不显眼的通知的有用工具。
-
Bootstrap 中的吐司用于在屏幕的底部或顶部显示非阻塞性通知。
-
它们可以在不中断当前任务的情况下向用户提供反馈或对其发出某些事件或操作的警报。
-
吐司可以包含文本、图像或任何其他 HTML 内容，并且可以进行自定义以适应网站或应用程序的设计。
-
它们还可以由用户关闭或在自行消失前设置一段时间。
-
你必须自己初始化吐司，因为出于性能原因，这种初始化是选择加入的。
-
如果你未指定 autohide: false ，那么吐司将自动隐藏。
-
吐司组件的动画效果取决于 prefers-reduced-motion 媒体查询。
-
建议向吐司添加标题和正文，以使其更具可扩展性和可预测性。
-
你需要一个元素才能包含你的吐司，并且必须有一个关闭按钮。
Basic toast
为了创建一个基本的吐司，你需要使用 .toast 类并添加一个 .toast-header 来提供标题，添加一个 .toast-body 来添加内容。
我们来看一个基本吐司的示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!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 查询用于触发吐司：
或
在 HTML 中添加以下链接：
Live toast
以下是页面上可以查看实时吐司的示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!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 有些半透明，并与出现它们的页面融合。
我们看一个示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!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 中添加纵向空间。
我们看一个示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!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
-
可以通过移除子组件、添加一些实用程序，甚至在你自己的标记中来自定义 Toast。
-
你可以从 Bootstrap 图标中添加一个自定义图标或去掉 .toast-header ，向内容中添加按钮等。
让我们看一个自定义 Toast 的示例，其中两个按钮被添加到 Toast 主体中：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!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 颜色方案。
让我们看一个将颜色方案添加到 Toast 中的示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!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 的可用选项：
-
.position-absolute - 它用于相对于其最近定位的祖先来放置元素。
-
.top- * - 设置 Toast 的顶部对齐位置。
-
.bottom- * - 设置 Toast 的底部对齐位置。
-
.start- * - 设置 Toast 的开始对齐位置。
-
.end- * - 设置 Toast 的结束对齐位置。
定位类采取的值范围从 0 到 50 。
让我们看一个定位类示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!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>当使用一个接一个生成许多通知的系统时，你可以使用一个包装元素来堆叠这些通知。请参阅下面的示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!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 实用程序。让我们看一个示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!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. 中。
-
屏幕阅读器会自动识别活动区域的更改，而无需设置用户的焦点。
-
通过包含 aria-atomic="true" ，确保完整的 toast 被识别为一个单独（原子）单元。
-
当显示给用户的信息重要时，使用 alert components 而不是 toast。
-
在生成或更新 toast 之前，实时区域应该出现在标记中。
-
根据内容，你需要调整 role 和 aria-live 属性；例如：在错误情况下，使用 role="alert" aria-live="assertive"*Otherwise, use: *role="status" aria-live="polite"
-
你必须更新 delay timeout 以允许用户阅读 toast，因为显示的内容会动态变化。
-
必须向 toast 添加一个关闭按钮，以允许用户在使用 autohide: false 时关闭 toast。
我们看一个示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!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>