Bootstrap - 消息提示：初学者的友好指南

你好，未来的网页开发者們！今天，我們將要深入Bootstrap消息提示的精彩世界。如果你之前從未聽說過它們，別擔心——在這個教學結束之前，你將會像專家一樣進行消息提示！?

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! This is a Toast message.
</div>
</div>

讓我們來分析一下：

• 外部的div，類別為toast，是我們的主要容器。
• 內部，我們有一個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! This is a live toast message.
</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! This is a translucent toast.
</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">
See? Just like this.
</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">
Heads up, toasts will stack automatically
</div>
</div>
</div>

自定義內容

消息提示不僅僅限於文本。你可以添加任何你喜歡的HTML內容：

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
<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! This is a primary toast.
</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中移除

就這些！現在你已經是Toast大師了。記住，熟練是需要練習的，所以試著在你下一個專案中整合這些功能。開心編程！?

Credits: Image by storyset