Σήματα
Τεκμηρίωση και παραδείγματα για σήματα, το μικρό μας πλήθος και το στοιχείο επισήμανσης.
Παράδειγμα
Τα σήματα κλιμακώνονται ώστε να ταιριάζουν με το μέγεθος του άμεσου γονικού στοιχείου χρησιμοποιώντας το σχετικό μέγεθος γραμματοσειράς και emμονάδες.
Παράδειγμα επικεφαλίδαςΝέος
Παράδειγμα επικεφαλίδαςΝέος
Παράδειγμα επικεφαλίδαςΝέος
Παράδειγμα επικεφαλίδαςΝέος
Παράδειγμα επικεφαλίδαςΝέος
Παράδειγμα επικεφαλίδαςΝέος
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>Τα σήματα μπορούν να χρησιμοποιηθούν ως μέρος συνδέσμων ή κουμπιών για την παροχή μετρητή.
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>Λάβετε υπόψη ότι ανάλογα με τον τρόπο χρήσης τους, τα σήματα μπορεί να προκαλούν σύγχυση στους χρήστες προγραμμάτων ανάγνωσης οθόνης και παρόμοιων βοηθητικών τεχνολογιών. Ενώ το στυλ των σημάτων παρέχει μια οπτική ένδειξη ως προς τον σκοπό τους, σε αυτούς τους χρήστες θα παρουσιαστεί απλώς το περιεχόμενο του σήματος. Ανάλογα με τη συγκεκριμένη κατάσταση, αυτά τα σήματα μπορεί να φαίνονται σαν τυχαίες πρόσθετες λέξεις ή αριθμούς στο τέλος μιας πρότασης, συνδέσμου ή κουμπιού.
Εκτός εάν το πλαίσιο είναι σαφές (όπως στο παράδειγμα "Ειδοποιήσεις", όπου γίνεται κατανοητό ότι το "4" είναι ο αριθμός των ειδοποιήσεων), εξετάστε το ενδεχόμενο να συμπεριλάβετε πρόσθετο πλαίσιο με ένα οπτικά κρυφό τμήμα πρόσθετου κειμένου.
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>Παραλλαγές με βάση τα συμφραζόμενα
Προσθέστε οποιαδήποτε από τις παρακάτω κατηγορίες τροποποιητών για να αλλάξετε την εμφάνιση ενός σήματος.
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>Μετάδοση νοήματος στις υποστηρικτικές τεχνολογίες
Η χρήση χρώματος για να προσθέσετε νόημα παρέχει μόνο μια οπτική ένδειξη, η οποία δεν θα μεταδοθεί στους χρήστες βοηθητικών τεχνολογιών – όπως οι συσκευές ανάγνωσης οθόνης. Βεβαιωθείτε ότι οι πληροφορίες που υποδηλώνονται με το χρώμα είναι είτε προφανείς από το ίδιο το περιεχόμενο (π.χ. το ορατό κείμενο), είτε περιλαμβάνονται με εναλλακτικά μέσα, όπως πρόσθετο κείμενο που είναι κρυμμένο με την .sr-onlyτάξη.
Σήματα χαπιών
Χρησιμοποιήστε την .badge-pillκατηγορία τροποποιητών για να κάνετε τα σήματα πιο στρογγυλεμένα (με μεγαλύτερη border-radiusκαι πρόσθετη οριζόντια padding). Χρήσιμο αν χάσετε τα σήματα από το v3.
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>Συνδέσεις
.badge-*Η χρήση των τάξεων με βάση τα συμφραζόμενα σε ένα <a>στοιχείο παρέχει γρήγορα σήματα με δυνατότητα δράσης με καταστάσεις αιώρησης και εστίασης.
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>