Bootstrap 5 Toast

Toast（吐司）

Toast 組件類似警告框，當發生某些事情時（例如當用戶單擊按鈕、提交表單等）時，它只會顯示幾秒鐘。

如何創建 Toast

如需創建 Toast，請使用 .toast 類，并在其中添加 .toast-header 和 .toast-body。

注意：默認情況下，toast 是隱藏的。如果要顯示它，請使用 .show 類。如果要關閉它，請使用 <button> 元素并添加 data-bs-dismiss="toast"：

<div class="toast show">
  <div class="toast-header">
    Toast 標題
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    toast 主體內的文本。
  </div>
</div>

親自試一試

打開 Toast

如需通過單擊按鈕顯示 Toast，您必須使用 JavaScript 對其進行初始化：請選取指定的元素并調用 toast() 方法。

當您單擊按鈕時，以下代碼將顯示文檔中的所有 toast：

實例

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

親自試一試