Kako dodati Bootstrap 5 toast pri učitavanju stranice

Pošaljite laganu i lako prilagodljivu toast poruku posjetiteljima čim se stranica učita.

Toastovi su lagane obavijesti dizajnirane tako da podsjećaju na push notifikacije popularne na mobilnim i desktop operativnim sustavima. Izgrađeni su s flexboxom pa ih je lako poravnati i pozicionirati.

Nekoliko stvari koje trebate znati kada koristite toast plugin:

• Toastovi su opt-in iz razloga performansi, što znači da ih morate sami inicijalizirati.
• Toastovi će se automatski sakriti ako ne navedete autohide: false.

Osnovni HTML kod 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 kod koji koristim za prikaz toast poruke pri učitavanju:

window.onload = (event) => {
    let myAlert = document.querySelectorAll('.toast');
    let bsAlert = new bootstrap.Toast(myAlert);
    bsAlert.show();
}

Više možete pronaći u službenoj Bootstrap 5 dokumentaciji.

Za razliku od Bootstrapa 4, Bootstrap 5 koristi vanilla JavaScript — nije potrebna jQuery ovisnost. Toastovi se mogu pokrenuti ne samo na učitavanju stranice, već i klikom na gumb, slanjem obrasca ili nakon AJAX odgovora. U Bootstrapu 5.3+ toastovi također podržavaju tamni način rada s data-bs-theme="dark". Isti inicijalizacijski obrazac radi sa svim okidačima. Toastovi se mogu pozicionirati pomoću Bootstrapovih utilitija za pozicioniranje — gore-desno, dolje-centar ili vlastitim CSS-om. Više toastova se automatski slaže, a aria-live atribut osigurava da ih najave čitači zaslona. Za većinu slučajeva, postavite toast kontejner kao fiksni element u gornjem desnom kutu prozora.