Bootstrap 5 トースト

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>

自分で試してみる