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

Τα σήματα κλιμακώνονται ώστε να ταιριάζουν με το μέγεθος του άμεσου γονικού στοιχείου χρησιμοποιώντας το σχετικό μέγεθος γραμματοσειράς και emμονάδες. Από την έκδοση 5, τα σήματα δεν έχουν πλέον στυλ εστίασης ή αιώρησης για συνδέσμους.

Επικεφαλίδες

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

Κουμπιά

Τα σήματα μπορούν να χρησιμοποιηθούν ως μέρος συνδέσμων ή κουμπιών για την παροχή μετρητή.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

Λάβετε υπόψη ότι ανάλογα με τον τρόπο χρήσης τους, τα σήματα μπορεί να προκαλούν σύγχυση στους χρήστες προγραμμάτων ανάγνωσης οθόνης και παρόμοιων βοηθητικών τεχνολογιών. Ενώ το στυλ των σημάτων παρέχει μια οπτική ένδειξη ως προς τον σκοπό τους, σε αυτούς τους χρήστες θα παρουσιαστεί απλώς το περιεχόμενο του σήματος. Ανάλογα με τη συγκεκριμένη κατάσταση, αυτά τα σήματα μπορεί να φαίνονται σαν τυχαίες πρόσθετες λέξεις ή αριθμούς στο τέλος μιας πρότασης, συνδέσμου ή κουμπιού.

Εκτός εάν το πλαίσιο είναι σαφές (όπως στο παράδειγμα "Ειδοποιήσεις", όπου γίνεται κατανοητό ότι το "4" είναι ο αριθμός των ειδοποιήσεων), εξετάστε το ενδεχόμενο να συμπεριλάβετε πρόσθετο πλαίσιο με ένα οπτικά κρυφό τμήμα πρόσθετου κειμένου.

Τοποθετημένο

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

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

Μπορείτε επίσης να αντικαταστήσετε την .badgeτάξη με μερικά ακόμη βοηθητικά προγράμματα χωρίς μέτρηση για έναν πιο γενικό δείκτη.

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

Χρώματα φόντου

Ορίστε ένα background-colorμε αντίθεση στο προσκήνιο colorμε τους .text-bg-{color}βοηθούς μας . Προηγουμένως απαιτούνταν η μη αυτόματη αντιστοίχιση των επιλογών σας .text-{color}και των .bg-{color}βοηθητικών προγραμμάτων για το στυλ, τα οποία μπορείτε ακόμα να χρησιμοποιήσετε εάν προτιμάτε.

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>

Σήματα χαπιών

Χρησιμοποιήστε την .rounded-pillκλάση utility για να κάνετε τα σήματα πιο στρογγυλεμένα με ένα μεγαλύτερο border-radius.

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

Μεταβλητές

Ως μέρος της εξελισσόμενης προσέγγισης μεταβλητών CSS του Bootstrap, τα σήματα χρησιμοποιούν πλέον τοπικές μεταβλητές CSS .badgeγια βελτιωμένη προσαρμογή σε πραγματικό χρόνο. Οι τιμές για τις μεταβλητές CSS ορίζονται μέσω Sass, επομένως η προσαρμογή Sass εξακολουθεί να υποστηρίζεται.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};
  

Μεταβλητές Sass

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;