Προτεινόμενα μαθήματα:

Bootstrap 5 προειδοποιήσεις

Προειδοποιήσεις

Bootstrap 5 παρέχει μια απλή μέθοδο δημιουργίας προκαθορισμένων μηνυμάτων προειδοποιητικού σφάλματος:

  • Οι προειδοποιητικές σφάλματα δημιουργούνται με τη χρήση της κλάσης .alert, ακολουθούμενη από μια από τις κλάσεις περιεχομένου:
  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light

Παράδειγμα

<div class="alert alert-success">
  <strong>Επιτυχία!</strong> Αυτό το παράδειγμα προειδοποιητικού σφάλματος δείχνει επιτυχία ή θετική ενέργεια.
</div>

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

.alert-dark

Ο σύνδεσμος προειδοποιητικού σφάλματος .alert-link Η κλάση προστίθεται σε οποιοδήποτε σύνδεσμο στο παράδειγμα προειδοποιητικού σφάλματος, δημιουργώντας ένα "συμμάχικο χρώμα σύνδεσμο":

Παράδειγμα

<div class="alert alert-success">
  <strong>Επιτυχία!</strong> Πρέπει να <a href="#" class="alert-link">δείτε αυτό το μήνυμα</a>.
</div>

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

Κλείσιμο προειδοποιητικού σφάλματος

Για να κλείσετε το μήνυμα προειδοποιητικού σφάλματος, προσθέστε .alert-dismissible Η κλάση προστίθεται στο κουτί προειδοποιητικού σφάλματος. Στη συνέχεια, προσθέστε class="btn-close" και data-bs-dismiss="alert" Προσθέστε στο σύνδεσμο ή στο κουμπί στοιχείου ( όταν πατήσετε, το παράδειγμα προειδοποιητικού σφάλματος θα εξαφανιστεί ).

Παράδειγμα

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Επιτυχία!</strong> Αυτό το παράδειγμα προειδοποιητικού σφάλματος δείχνει επιτυχία ή θετική ενέργεια.
</div>

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

Ανίχνευση προειδοποιητικής σφάλματος

.fade και .show Η κλάση προστίθεται όταν κλείνει το μήνυμα προειδοποίησης με εφέ εμφάνισης και εξαφάνισης:

Παράδειγμα

<div class="alert alert-danger alert-dismissible fade show">

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