Source

Ειδοποιήσεις

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

Παραδείγματα

Οι ειδοποιήσεις είναι διαθέσιμες για οποιοδήποτε μήκος κειμένου, καθώς και ένα προαιρετικό κουμπί απόρριψης. Για σωστό στυλ, χρησιμοποιήστε μία από τις οκτώ απαιτούμενες κλάσεις συμφραζομένων (π.χ., .alert-success). Για ενσωματωμένη απόρριψη, χρησιμοποιήστε την προσθήκη ειδοποιήσεων jQuery .

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>
Μετάδοση νοήματος στις υποστηρικτικές τεχνολογίες

Η χρήση χρώματος για να προσθέσετε νόημα παρέχει μόνο μια οπτική ένδειξη, η οποία δεν θα μεταδοθεί στους χρήστες βοηθητικών τεχνολογιών – όπως οι συσκευές ανάγνωσης οθόνης. Βεβαιωθείτε ότι οι πληροφορίες που υποδηλώνονται με το χρώμα είναι είτε προφανείς από το ίδιο το περιεχόμενο (π.χ. το ορατό κείμενο), είτε περιλαμβάνονται με εναλλακτικά μέσα, όπως πρόσθετο κείμενο κρυμμένο με την .sr-onlyτάξη.

Χρησιμοποιήστε την .alert-linkκλάση βοηθητικού προγράμματος για να παρέχετε γρήγορα αντίστοιχους έγχρωμους συνδέσμους σε οποιαδήποτε ειδοποίηση.

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Πρόσθετο περιεχόμενο

Οι ειδοποιήσεις μπορούν επίσης να περιέχουν πρόσθετα στοιχεία HTML όπως επικεφαλίδες, παραγράφους και διαχωριστικά.

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

Απόρριψη

Χρησιμοποιώντας την προσθήκη JavaScript ειδοποίησης, είναι δυνατή η απόρριψη οποιασδήποτε ενσωματωμένης ειδοποίησης. Δείτε πώς:

  • Βεβαιωθείτε ότι έχετε φορτώσει την προσθήκη ειδοποίησης ή το μεταγλωττισμένο Bootstrap JavaScript.
  • Εάν δημιουργείτε το JavaScript μας από την πηγή, απαιτείutil.js . Η μεταγλωττισμένη έκδοση περιλαμβάνει αυτό.
  • Προσθέστε ένα κουμπί απόρριψης και την .alert-dismissibleκλάση, η οποία προσθέτει επιπλέον padding στα δεξιά της ειδοποίησης και τοποθετεί το .closeκουμπί.
  • Στο κουμπί απόρριψης, προσθέστε το data-dismiss="alert"χαρακτηριστικό, το οποίο ενεργοποιεί τη λειτουργία JavaScript. Φροντίστε να χρησιμοποιήσετε το <button>στοιχείο μαζί του για σωστή συμπεριφορά σε όλες τις συσκευές.
  • Για να ενεργοποιήσετε τις ειδοποιήσεις κατά την απόρριψή τους, φροντίστε να προσθέσετε τις κλάσεις .fadeκαι ..show

Μπορείτε να το δείτε σε δράση με μια ζωντανή επίδειξη:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Συμπεριφορά JavaScript

Ενεργοποιητές

Ενεργοποίηση απόρριψης μιας ειδοποίησης μέσω JavaScript:

$('.alert').alert()

Ή με dataχαρακτηριστικά σε ένα κουμπί εντός της ειδοποίησης , όπως φαίνεται παραπάνω:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Σημειώστε ότι το κλείσιμο μιας ειδοποίησης θα την αφαιρέσει από το DOM.

Μέθοδοι

Μέθοδος Περιγραφή
$().alert() Κάνει μια ειδοποίηση να ακούει για συμβάντα κλικ σε στοιχεία καταγωγής που έχουν το data-dismiss="alert"χαρακτηριστικό. (Δεν είναι απαραίτητο όταν χρησιμοποιείτε την αυτόματη προετοιμασία του data-api.)
$().alert('close') Κλείνει μια ειδοποίηση αφαιρώντας την από το DOM. Εάν υπάρχουν οι κλάσεις .fadeκαι .showστο στοιχείο, η ειδοποίηση θα εξαφανιστεί πριν αφαιρεθεί.
$().alert('dispose') Καταστρέφει την ειδοποίηση ενός στοιχείου. 
$('.alert').alert('close')

Εκδηλώσεις

Η προσθήκη ειδοποίησης του Bootstrap εκθέτει μερικά συμβάντα για σύνδεση στη λειτουργικότητα ειδοποίησης.

Εκδήλωση Περιγραφή
close.bs.alert Αυτό το συμβάν ενεργοποιείται αμέσως όταν closeκαλείται η μέθοδος παρουσίας.
closed.bs.alert Αυτό το συμβάν ενεργοποιείται όταν η ειδοποίηση έχει κλείσει (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})