Bootstrap - 吐司通知：初学者的友好指南

你好，未来的网页开发者们！今天，我们将深入了解Bootstrap吐司通知的奇妙世界。如果你之前从未听说过它们——别担心，在本教程结束时，你将能够像专业人士一样使用它们！?

Bootstrap - Toasts

什么是Bootstrap吐司通知？

在我们开始之前，让我们先了解一下吐司通知是什么。想象你在使用一个移动应用程序，突然在屏幕底部弹出一个小的通知。这在网页开发中本质上就是一个吐司通知！它是一种轻量级的通知，旨在模仿我们在移动设备上看到的推送通知。

基本吐司通知

让我们从一个基本的吐司通知开始。以下是其代码的样子：

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11分钟前</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! 这是一个吐司通知消息。
</div>
</div>

让我们分解一下：

外部的带有toast类的div是我们的主要容器。
在内部，我们有toast-header和toast-body。
头部通常包含一个图像、标题、时间戳和一个关闭按钮。
正文是我们主要消息的位置。

实时吐司通知

现在，让我们让我们的吐司通知“活”起来！为此，我们需要一点JavaScript：

<button type="button" class="btn btn-primary" id="liveToastBtn">显示实时吐司</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11分钟前</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, World! 这是一个实时吐司通知消息。
</div>
</div>
</div>

<script>
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', () => {
const toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
</script>

在这里，我们添加了一个按钮，当点击时，将显示我们的吐司通知。底部的JavaScript监听点击事件，然后显示吐司。

半透明吐司通知

想让你的吐司通知有点透明吗？只需添加bg-light类：

<div class="toast bg-light" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11分钟前</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, World! 这是一个半透明吐司通知。
</div>
</div>

堆叠吐司通知

如果你想显示多个吐司通知？没问题！Bootstrap会整齐地堆叠它们：

<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>刚刚</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
看到了吗？就像这样。
</div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>2秒前</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
注意，吐司会自动堆叠
</div>
</div>
</div>

自定义内容

吐司通知不仅限于文本。你可以添加任何你喜欢的HTML内容：

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! 这是一个吐司通知消息。
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">采取行动</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">关闭</button>
</div>
</div>
</div>

在这里，我们在吐司正文中添加了按钮。发挥你的创意！

颜色方案

吐司通知可以有不同的颜色，以匹配你的网站主题或表示不同类型的消息：

<div class="toast bg-primary text-white" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small>11分钟前</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! 这是一个主要颜色吐司。
</div>
</div>

你可以将bg-primary替换为bg-success、bg-danger、bg-warning等。

吐司通知的位置

吐司通知可以放置在页面的任何位置。以下是如何将其放置在右上角的方法：

<div aria-live="polite" aria-atomic="true" class="position-relative">
<div class="toast-container position-absolute top-0 end-0 p-3">
<!-- 你的吐司通知在这里 -->
</div>
</div>

可访问性

可访问性至关重要！始终包含role="alert"和aria-live="assertive"属性，以确保屏幕阅读器可以正确地播报你的吐司通知。

以下是一个总结Toast方法的表格：

方法	描述
show()	显示吐司通知
hide()	隐藏吐司通知
dispose()	隐藏吐司通知并将其从DOM中移除

就这样！你现在是一个吐司大师。记住，熟能生巧，所以尝试在你下一个项目中加入这些功能。快乐编码！?

Credits: Image by storyset