Toast

Toast（吐司）

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

如何創(chuàng)建 Toast

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

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

<div class="toast show">
  <div class="toast-header">
    Toast 標(biāo)題
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    toast 主體內(nèi)的文本。
  </div>
</div>

打開 Toast

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

當(dāng)您單擊按鈕時，以下代碼將顯示文檔中的所有 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>