Bootstrap 4 Toast
Bootstrap 4 Toast
De toast-component is als een waarschuwingsvenster dat slechts een paar seconden wordt weergegeven als er iets gebeurt (dwz wanneer de gebruiker op een knop klikt, een formulier verzendt, enz.).
Hoe maak je een toast?
Gebruik de .toastklasse om een toast te maken en voeg er een .toast-headeren een
.toast-bodyaan toe:
<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
Opmerking: Toasts moeten worden geïnitialiseerd met jQuery: selecteer het opgegeven element en roep de toast()methode aan.
De volgende code toont alle "toasts" in het document:
Voorbeeld
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Toast tonen en verbergen
Toast is standaard verborgen. Gebruik het data-autohide="false"
attribuut om het standaard weer te geven. Om het te sluiten, gebruik je een <button> element en voeg je toe data-dismiss="toast":
Voorbeeld
<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>
Let op de mr-auto, ml-2en mb-1klassen? Ze worden gebruikt om specifieke marges toe te voegen. U leert er meer over in het hoofdstuk Bootstrap 4 Utilities .
Volledige Bootstrap Toast-referentie
Ga voor een volledige referentie van alle toastopties, methoden en evenementen naar onze Bootstrap JS Toast Reference .