Bootstrap 4 Toast
Bootstrap 4 Toast
Komponenta toastu je jako varovné pole, které se zobrazí pouze na několik sekund, když se něco stane (tj. když uživatel klikne na tlačítko, odešle formulář atd.).
Jak vytvořit toast
Chcete-li vytvořit toast, použijte .toasttřídu a přidejte do ní .toast-headera a
.toast-bodyuvnitř:
<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
Poznámka: Toasty musí být inicializovány pomocí jQuery: vyberte zadaný prvek a zavolejte toast()metodu.
Následující kód zobrazí všechny „toasty“ v dokumentu:
Příklad
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Ukaž a skryj toast
Toasty jsou ve výchozím nastavení skryté. Pomocí data-autohide="false"
atributu jej zobrazíte ve výchozím nastavení. Chcete-li jej zavřít, použijte prvek <button> a přidejte data-dismiss="toast":
Příklad
<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>
Všimněte si mr-auto, ml-2a mb-1tříd? Používají se k přidání specifických okrajů. Více se o nich dozvíte v kapitole Bootstrap 4 Utilities .
Kompletní reference Bootstrap Toast
Úplnou referenci o všech možnostech, metodách a událostech toastů naleznete v naší příručce Bootstrap JS Toast Reference .