Toast Bootstrap 5

Toast (Τούρτα)

Το στοιχείο Toast είναι παρόμοιο με το παράθυρο προειδοποίησης, και εμφανίζεται μόνο για μερικά δευτερόλεπτα όταν συμβαίνει κάτι (π.χ. όταν ο χρήστης κάνει κλικ σε ένα κουμπί, υποβάλλει ένα φόρμα κ.λπ.).

Πώς να δημιουργήσετε Toast

Για να δημιουργήσετε Toast, χρησιμοποιήστε .toast Κλάσεις, και προσθέστε .toast-header και .toast-body。

Λάβετε υπόψη:Προεπιλεγμένα, το toast είναι κρυμμένο. Αν θέλετε να το εμφανίσετε, χρησιμοποιήστε .show Κλάση. Αν θέλετε να το κλείσετε, χρησιμοποιήστε το στοιχείο <button> και προσθέστε data-bs-dismiss="toast"：

<div class="toast show">
  <div class="toast-header">
    Τίτλος του Toast
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Κείμενο του σώματος του toast.
  </div>
</div>

Δοκιμάστε το προσωπικά

Ανοίξτε το Toast

Για να εμφανίσετε το Toast με κλικ στο κουμπί, πρέπει να το�始化άσετε με JavaScript: επιλέξτε το καθορισμένο στοιχείο και καλέστε toast() Μέθοδος.

Όταν πατήσετε το κουμπί, το παρακάτω κώδικας θα εμφανίσει όλους τους toast του έγγραφου:

Παράδειγμα

<script>
document.getElementById("toastbtn").onclick = function() {
  var toastElList = [].slice.call(document.querySelectorAll('.toast'))
  var toastList = toastElList.map(function(toastEl) {
    return new bootstrap.Toast(toastEl)
  )
  toastList.forEach(toast => toast.show())
}
</script>

Δοκιμάστε το προσωπικά