Bootstrap 4 Toast
Bootstrap 4 Toast
Die roosterbrood-komponent is soos 'n waarskuwingskassie wat net vir 'n paar sekondes gewys word wanneer iets gebeur (dws wanneer die gebruiker op 'n knoppie klik, 'n vorm indien, ens.).
Hoe om 'n roosterbrood te skep
Om 'n heildronk te skep, gebruik die .toastklas en voeg 'n .toast-headeren 'n
.toast-bodybinnekant daarvan by:
<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
Let wel: Toasts moet geïnisialiseer word met jQuery: kies die gespesifiseerde element en roep die toast()metode.
Die volgende kode sal alle "roosterbrood" in die dokument wys:
Voorbeeld
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Wys en versteek 'n heildronk
Heilbrood word by verstek versteek. Gebruik die data-autohide="false"
kenmerk om dit by verstek te wys. Om dit toe te maak, gebruik 'n <button> element en voeg by 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 die mr-auto, ml-2en mb-1klasse? Hulle word gebruik om spesifieke marges by te voeg. Jy sal meer oor hulle leer in die Bootstrap 4 Utilities-hoofstuk .
Voltooi Bootstrap Toast-verwysing
Vir 'n volledige verwysing van alle roosterbrood opsies, metodes en gebeure, gaan na ons Bootstrap JS Toast Reference .