Bootstrap 5 Toasts
Toasts
Toast 元件就像一個提醒框，它只會在發生某些事件時（例如，使用者點選按鈕、提交表單等）顯示幾秒鐘。
Toast Header 5 分鐘前
Toast body 中的一些文字
如何建立 Toast
要建立 Toast，請使用 .toast 類，並在其中新增 .toast-header 和 .toast-body。
注意： Toasts 預設是隱藏的。如果你想顯示它，請使用 .show 類。要關閉它，請使用 <button> 元素並新增 data-bs-dismiss="toast"。
<div class="toast show">
<div class="toast-header">
Toast Header
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
Toast body 中的一些文字
</div>
</div>
自己動手試一試 »
開啟一個 Toast
要透過點選按鈕來顯示 Toast，你必須使用 JavaScript 初始化它：選擇指定的元素並呼叫 toast() 方法。
以下程式碼將在你點選按鈕時顯示文件中的所有“toasts”
示例
<script>
document.getElementById("toastbtn").onclick = function() {
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
}
</script>
自己動手試一試 »
