Toast push obavijesti posjetiteljima, lagana i lako prilagodljiva poruka upozorenja.
Toast je lagana obavijest dizajnirana da oponaša push obavijesti koje su popularizirali mobilni i stolni operativni sustavi. Izgrađeni su s flexboxom, tako da ih je lako poravnati i postaviti.
Stvari koje treba znati kada koristite Toast:
- toast aktivirate sami zbog izvedbe, pa ih morate inicijalizirati.
- toast će se automatski sakriti ako ne navedete
autohide: false.
Osnovni HTML kôd iz Bootstrap dokumentacije:
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
Osnovni JS kôd iz moje glave potreban za pokretanje Toasta:
window.onload = (event) => {
let myAlert = document.querySelectorAll('.toast');
let bsAlert = new bootstrap.Toast(myAlert);
bsAlert.show();
}
Pronađite više informacija u službenoj Bootstrap 5 dokumentaciji.