Bootstrap 4 Tosty
Bootstrap 4 Tosty
Komponent toastowy jest jak okienko ostrzegawcze, które jest wyświetlane tylko przez kilka sekund, gdy coś się wydarzy (np. gdy użytkownik kliknie przycisk, prześle formularz itp.).
Jak zrobić tosty
Aby stworzyć toast, użyj .toastklasy i dodaj do niej a .toast-headeroraz
.toast-bodywnętrze:
<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
Uwaga: Tosty należy inicjować za pomocą jQuery: wybierz określony element i wywołaj toast()metodę.
Poniższy kod pokaże wszystkie „grzanki” w dokumencie:
Przykład
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Pokaż i ukryj toast
Tosty są domyślnie ukryte. Użyj data-autohide="false"
atrybutu, aby wyświetlić go domyślnie. Aby go zamknąć, użyj elementu <button> i dodaj data-dismiss="toast":
Przykład
<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>
Zwróć uwagę na mr-autoklasy ml-2i mb-1? Służą do dodawania określonych marginesów. Więcej na ich temat dowiesz się z rozdziału Bootstrap 4 Utilities .
Kompletna referencja do tostów Bootstrap
Aby uzyskać pełne informacje o wszystkich opcjach, metodach i zdarzeniach toastów, przejdź do naszego podręcznika Bootstrap JS Toast Reference .