Μετάβαση στο κύριο περιεχόμενο Μετάβαση στην πλοήγηση εγγράφων
in English

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

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

Σε αυτήν την σελίδα

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

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

<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>
Μετάδοση νοήματος στις υποστηρικτικές τεχνολογίες

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

Ζωντανό παράδειγμα

Κάντε κλικ στο κουμπί παρακάτω για να εμφανίσετε μια ειδοποίηση (κρυμμένη με ενσωματωμένα στυλ για έναρξη) και μετά απορρίψτε την (και καταστρέψτε) με το ενσωματωμένο κουμπί κλεισίματος.

<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

Χρησιμοποιούμε την ακόλουθη JavaScript για να ενεργοποιήσουμε την επίδειξη ζωντανής ειδοποίησης:

var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')

function alert(message, type) {
  var wrapper = document.createElement('div')
  wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'

  alertPlaceholder.append(wrapper)
}

if (alertTrigger) {
  alertTrigger.addEventListener('click', function () {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

Χρησιμοποιήστε την .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>

εικονίδια

Ομοίως, μπορείτε να χρησιμοποιήσετε βοηθητικά προγράμματα flexbox και Εικονίδια Bootstrap για να δημιουργήσετε ειδοποιήσεις με εικονίδια. Ανάλογα με τα εικονίδια και το περιεχόμενό σας, μπορεί να θέλετε να προσθέσετε περισσότερα βοηθητικά προγράμματα ή προσαρμοσμένα στυλ.

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
    An example alert with an icon
  </div>
</div>

Χρειάζεστε περισσότερα από ένα εικονίδια για τις ειδοποιήσεις σας; Εξετάστε το ενδεχόμενο να χρησιμοποιήσετε περισσότερα εικονίδια Bootstrap και να δημιουργήσετε ένα τοπικό sprite SVG για να αναφέρετε εύκολα τα ίδια εικονίδια επανειλημμένα.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    An example alert with an icon
  </div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
  <div>
    An example success alert with an icon
  </div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example warning alert with an icon
  </div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</div>

Απόρριψη

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

  • Βεβαιωθείτε ότι έχετε φορτώσει την προσθήκη ειδοποίησης ή το μεταγλωττισμένο Bootstrap JavaScript.
  • Προσθέστε ένα κουμπί κλεισίματος και την .alert-dismissibleκλάση, η οποία προσθέτει επιπλέον padding στα δεξιά της ειδοποίησης και τοποθετεί το κουμπί κλεισίματος.
  • Στο κουμπί κλεισίματος, προσθέστε το data-bs-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="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Όταν μια ειδοποίηση απορρίπτεται, το στοιχείο αφαιρείται εντελώς από τη δομή της σελίδας. Εάν ένας χρήστης πληκτρολογίου απορρίψει την ειδοποίηση χρησιμοποιώντας το κουμπί κλεισίματος, η εστίασή του θα χαθεί ξαφνικά και, ανάλογα με το πρόγραμμα περιήγησης, θα επαναφερθεί στην αρχή της σελίδας/εγγράφου. Για αυτόν τον λόγο, συνιστούμε να συμπεριλάβετε πρόσθετη JavaScript που ακούει το closed.bs.alertσυμβάν και ορίζει μέσω προγραμματισμού focus()την πιο κατάλληλη θέση στη σελίδα. Εάν σχεδιάζετε να μετακινήσετε την εστίαση σε ένα μη διαδραστικό στοιχείο που συνήθως δεν λαμβάνει εστίαση, φροντίστε να προσθέσετε tabindex="-1"στο στοιχείο.

Sass

Μεταβλητές

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           $border-radius;
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            $border-width;
$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

Παραλλαγή mixin

Χρησιμοποιείται σε συνδυασμό με $theme-colorsγια τη δημιουργία κλάσεων τροποποιητών συμφραζομένων για τις ειδοποιήσεις μας.

@mixin alert-variant($background, $border, $color) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

  .alert-link {
    color: shade-color($color, 20%);
  }
}

Βρόχος

Βρόχος που δημιουργεί τις κατηγορίες τροποποιητών με το alert-variant()mixin.

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);
  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

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

Αρχικοποίηση

Αρχικοποίηση στοιχείων ως ειδοποιήσεις

var alertList = document.querySelectorAll('.alert')
var alerts =  [].slice.call(alertList).map(function (element) {
  return new bootstrap.Alert(element)
})

Για τον αποκλειστικό σκοπό της απόρριψης μιας ειδοποίησης, δεν είναι απαραίτητο να αρχικοποιήσετε το στοιχείο με μη αυτόματο τρόπο μέσω του JS API. Κάνοντας χρήση του data-bs-dismiss="alert", το στοιχείο θα αρχικοποιηθεί αυτόματα και θα απορριφθεί σωστά.

Δείτε την ενότητα σκανδαλισμών για περισσότερες λεπτομέρειες.

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

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

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

ή σε ένα κουμπί έξω από την ειδοποίηση χρησιμοποιώντας το data-bs-targetόπως φαίνεται παρακάτω:

<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>

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

Μέθοδοι

Μέθοδος Περιγραφή
close Κλείνει μια ειδοποίηση αφαιρώντας την από το DOM. Εάν υπάρχουν οι κλάσεις .fadeκαι .showστο στοιχείο, η ειδοποίηση θα εξαφανιστεί πριν αφαιρεθεί.
dispose Καταστρέφει την ειδοποίηση ενός στοιχείου. (Καταργεί τα αποθηκευμένα δεδομένα στο στοιχείο DOM)
getInstance Στατική μέθοδος που σας επιτρέπει να λαμβάνετε την παρουσία ειδοποίησης που σχετίζεται με ένα στοιχείο DOM, μπορείτε να τη χρησιμοποιήσετε ως εξής:bootstrap.Alert.getInstance(alert)
getOrCreateInstance Στατική μέθοδος που επιστρέφει μια παρουσία ειδοποίησης που σχετίζεται με ένα στοιχείο DOM ή δημιουργεί μια νέα σε περίπτωση που δεν είχε αρχικοποιηθεί. Μπορείτε να το χρησιμοποιήσετε ως εξής:bootstrap.Alert.getOrCreateInstance(element) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Εκδηλώσεις

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

Εκδήλωση Περιγραφή
close.bs.alert Ενεργοποιείται αμέσως όταν closeκαλείται η μέθοδος του στιγμιότυπου.
closed.bs.alert Ενεργοποιήθηκε όταν η ειδοποίηση έχει κλείσει και οι μεταβάσεις CSS έχουν ολοκληρωθεί. 
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})