ブートストラップ4トースト
ブートストラップ4トースト
トーストコンポーネントは、何かが発生したとき（つまり、ユーザーがボタンをクリックしたとき、フォームを送信したときなど）に数秒間だけ表示されるアラートボックスのようなものです。
トーストヘッダー
5分前
トースト本体内のテキスト
トーストの作り方
トーストを作成するには、.toastクラスを使用して、その中にとを追加し.toast-headerます
.toast-body。
<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
注：トーストはjQueryで初期化する必要があります。指定された要素を選択してtoast()メソッドを呼び出します。
次のコードは、ドキュメント内のすべての「トースト」を表示します。
例
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
トーストの表示と非表示
トーストはデフォルトで非表示になっています。data-autohide="false"
デフォルトで表示するには、属性を使用します。data-dismiss="toast"それを閉じるには、<button>要素を使用して：を追加します。
例
<div class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto text-primary">Toast Header</strong>
<small class="text-muted">5 mins ago</small>
<button
type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
Some text
inside the toast body
</div>
</div>
mr-auto、ml-2およびmb-1クラスに注意してください。これらは、特定のマージンを追加するために使用されます。これらの詳細については、Bootstrap4ユーティリティの章を参照してください。
完全なブートストラップトーストリファレンス
すべてのトーストオプション、メソッド、およびイベントの完全なリファレンスについては、 BootstrapJSトーストリファレンスにアクセスしてください。