Σήματα

Τεκμηρίωση και παραδείγματα για σήματα, το μικρό μας πλήθος και το στοιχείο επισήμανσης.

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

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

Τα σήματα κλιμακώνονται ώστε να ταιριάζουν με το μέγεθος του άμεσου γονικού στοιχείου χρησιμοποιώντας το σχετικό μέγεθος γραμματοσειράς και 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 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>

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

Χρησιμοποιήστε τις τάξεις βοηθητικών προγραμμάτων παρασκηνίου για να αλλάξετε γρήγορα την εμφάνιση ενός σήματος. Λάβετε υπόψη ότι όταν χρησιμοποιείτε την προεπιλογή του Bootstrap .bg-light, πιθανότατα θα χρειαστείτε ένα βοηθητικό πρόγραμμα χρώματος κειμένου όπως .text-darkγια το σωστό στυλ. Αυτό συμβαίνει επειδή τα βοηθητικά προγράμματα παρασκηνίου δεν ορίζουν τίποτα άλλο παρά μόνο background-color.

Πρωταρχικός Δευτερεύων Επιτυχία Κίνδυνος Προειδοποίηση Πληροφορίες Φως Σκοτάδι

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

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

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

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

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

Πρωταρχικός Δευτερεύων Επιτυχία Κίνδυνος Προειδοποίηση Πληροφορίες Φως Σκοτάδι

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

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;