Χρωματιστά
Μεταφέρετε νόημα μέσω του χρώματος με μια χούφτα κατηγορίες χρησιμότητας χρωμάτων. Περιλαμβάνει επίσης υποστήριξη για συνδέσμους στυλ με καταστάσεις αιώρησης.
Η ενασχόληση με την ιδιαιτερότητα
Μερικές φορές οι κλάσεις συμφραζομένων δεν μπορούν να εφαρμοστούν λόγω της ιδιαιτερότητας ενός άλλου επιλογέα. Σε ορισμένες περιπτώσεις, μια επαρκής λύση είναι να τυλίξετε το περιεχόμενο του στοιχείου σας σε ένα <div>με την τάξη.
Μετάδοση νοήματος στις υποστηρικτικές τεχνολογίες
Η χρήση χρώματος για να προσθέσετε νόημα παρέχει μόνο μια οπτική ένδειξη, η οποία δεν θα μεταδοθεί στους χρήστες βοηθητικών τεχνολογιών – όπως οι συσκευές ανάγνωσης οθόνης. Βεβαιωθείτε ότι οι πληροφορίες που υποδηλώνονται με το χρώμα είναι είτε προφανείς από το ίδιο το περιεχόμενο (π.χ. το ορατό κείμενο), είτε περιλαμβάνονται με εναλλακτικά μέσα, όπως πρόσθετο κείμενο που είναι κρυμμένο με την .sr-onlyτάξη.
Χρώμα
.κείμενο-πρωτοβάθμιο
.κείμενο-δευτερεύον
.κείμενο-επιτυχία
.κείμενο-κίνδυνος
.κείμενο-προειδοποίηση
.κείμενο-πληροφορίες
.κείμενο-φως
.κείμενο-σκοτεινό
.κείμενο-σώμα
.κείμενο-σίγαση
.κείμενο-λευκό
.κείμενο-μαύρο-50
.κείμενο-λευκό-50
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>Οι τάξεις κειμένου με βάση τα συμφραζόμενα λειτουργούν επίσης καλά σε άγκυρες με τις παρεχόμενες καταστάσεις αιώρησης και εστίασης. Σημειώστε ότι η κατηγορία .text-whiteκαι .text-mutedδεν έχει πρόσθετο στυλ συνδέσμου πέρα από την υπογράμμιση.
<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>Χρώμα του φόντου
Παρόμοια με τις κατηγορίες χρωμάτων κειμένου με βάση τα συμφραζόμενα, ορίστε εύκολα το φόντο ενός στοιχείου σε οποιαδήποτε κλάση με βάση τα συμφραζόμενα. Τα στοιχεία αγκύρωσης θα σκουραίνουν όταν τοποθετείτε το δείκτη του ποντικιού, όπως και οι κλάσεις κειμένου. Τα βοηθητικά προγράμματα παρασκηνίου δεν ορίζονταιcolor , επομένως σε ορισμένες περιπτώσεις θα θέλετε να χρησιμοποιήσετε .text-*βοηθητικά προγράμματα.
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>Κλίση φόντου
Όταν $enable-gradientsέχει οριστεί σε true(η προεπιλογή είναι false), μπορείτε να χρησιμοποιήσετε .bg-gradient-κατηγορίες βοηθητικών προγραμμάτων. Μάθετε για τις επιλογές μας Sass για να ενεργοποιήσετε αυτές τις τάξεις και πολλά άλλα.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark