Διακριτικά Bootstrap 5

Εμβλήματα

Τα εμβλήματα (Badges) χρησιμοποιούνται για να προσθέσουν επιπλέον πληροφορίες στο περιεχόμενο:

στο <span> στο στοιχείο .badge Κλάσεις και κλάσεις περιβάλλοντος (όπως .bg-secondary） για να δημιουργήσετε ορθογώνιο εμβλημα. Σημειώστε ότι το εμβλημα θα κλιμακωθεί για να ταιριάζει με το μέγεθος του γονικού στοιχείου (αν υπάρχει):

Παράδειγμα

<h1>Παράδειγμα τίτλου <span class="badge bg-secondary">Νέο</span></h1>
<h2>Παράδειγμα τίτλου <span class="badge bg-secondary">Νέο</span></h2>
<h3>Παράδειγμα τίτλου <span class="badge bg-secondary">Νέο</span></h3>
<h4>Παράδειγμα τίτλου <span class="badge bg-secondary">Νέο</span></h4>
<h5>Παράδειγμα τίτλου <span class="badge bg-secondary">Νέο</span></h5>
<h6>Παράδειγμα τίτλου <span class="badge bg-secondary">Νέο</span></h6>

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

Κλάση περιβάλλοντος εμβλήματος

Χρησιμοποιήστε οποιαδήποτε κλάση περιβάλλοντος (.bg-*) Αλλάξτε το χρώμα του εμβλήματος:

Παράδειγμα

<span class="badge bg-primary">Κύρια</span>
<span class="badge bg-secondary">Δευτερεύων</span>
<span class="badge bg-success">Επιτυχία</span>
<span class="badge bg-danger">Κίνδυνος</span>
<span class="badge bg-warning">Προειδοποίηση</span>
<span class="badge bg-info">Πληροφορίες</span>
<span class="badge bg-light">Φωτεινό</span>
<span class="badge bg-dark">Σκοτεινό</span>

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

Κάψουλα εμβλήματος

Χρήση .rounded-pill Η κλάση κάνει τα εμβλήματα πιο γυαλιστερά:

Παράδειγμα

<span class="badge rounded-pill bg-primary">Κύριο</span>
<span class="badge rounded-pill bg-secondary">Δευτερεύον</span>
<span class="badge rounded-pill bg-success">Επιτυχία</span>
<span class="badge rounded-pill bg-danger">Κίνδυνος</span>
<span class="badge rounded-pill bg-warning">Προειδοποίηση</span>
<span class="badge rounded-pill bg-info">Πληροφορίες</span>
<span class="badge rounded-pill bg-light">Φωτεινό</span>
<span class="badge rounded-pill bg-dark">Σκοτεινό</span>

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

Εμβλήματα στο στοιχείο

Παράδειγμα χρήσης εμβλήματος μέσα στο κουμπί:

Παράδειγμα

<button type="button" class="btn btn-primary">
  Μηνύματα <span class="badge bg-danger">4</span>
</button>

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