Bootstrap5 メッセージトースト(Toasts)
Bootstrap5 トースト(Toasts) は、ページの隅や下部に一時的な情報、通知、警告を表示する軽量な通知コンポーネントです。
トーストは通常、成功メッセージ、エラーメッセージ、警告、その他の通知など、短期間のメッセージをユーザーに表示するために使用されます。
トーストは、ページの左上、右上、左下、右下、ページ下部中央など、さまざまな位置に表示できます。
トーストの作成方法
トーストを作成するには、.toastクラスを使用し、そのクラス内に .toast-header と .toast-body クラスを追加して、タイトルとコンテンツを表します。
注意：トーストはデフォルトで非表示です。表示するには、.show を使用して表示を設定します。トーストを閉じるには、<button> 要素に追加します。data-bs-dismiss="toast":
例
<div class="toast show">
<div class="toast-header">トーストのタイトル<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">これはBootstrap 5のトーストの例です。</div>
</div>
試してみる »
ボタンをクリックしてトーストを表示するには、JavaScript で初期化する必要があります: ID で指定した要素のクリックイベントを取得し、toast()メソッドを呼び出します。
ボタンをクリックすると、次のコードはページ内のすべてのtoastクラスを表示します:
例
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())
}
試してみる »
トーストを右下に表示する:
例
<div class="container mt-5">
<button class="btn btn-primary" onclick="showToast()">トーストを表示</button>
</div>
<div class="position-fixed bottom-0 end-0 p-3">
<div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap Toast</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">これはBootstrap 5のトーストの例です。</div>
</div>
</div>
試してみる »
例
<!--複数のトーストを表示-->
<div aria-live="polite" aria-atomic="true" class="position-relative">
<!-- Position it: -->
<!--- `.toast-container` トースト間のスペースを設定します-->
<!--- `top-0` & `end-0` トーストの表示位置を設定します-->
<!--- `.p-3` 外側の余白を設定します-->
<div class="toast-container top-0 end-0 p-3">
<!--ここに複数のトーストコードを設定します-->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
<strong class="me-auto">トーストの例</strong>
<small class="text-muted">たった今</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">これは2番目のメッセージです</div>
</div>
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
<strong class="me-auto">トーストの例</strong>
<small class="text-muted">2秒前</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">これは最初のメッセージです</div>
</div>
</div>
</div>
<!--複数のトースト表示 終了-->
試してみる »