Χρωματιστά
Μεταφέρετε το νόημα μέσω colorμιας χούφτας τάξεων χρησιμότητας χρωμάτων. Περιλαμβάνει επίσης υποστήριξη για συνδέσμους στυλ με καταστάσεις αιώρησης.
Χρωματιστά
Χρωματίστε το κείμενο με βοηθητικά προγράμματα χρωμάτων. Εάν θέλετε να χρωματίσετε συνδέσμους, μπορείτε να χρησιμοποιήσετε τις .link-*βοηθητικές κλάσεις που έχουν :hoverκαι :focusκαταστάσεις.
.κείμενο-πρωτοβάθμιο
.κείμενο-δευτερεύον
.κείμενο-επιτυχία
.κείμενο-κίνδυνος
.κείμενο-προειδοποίηση
.κείμενο-πληροφορίες
.κείμενο-φως
.κείμενο-σκοτεινό
.κείμενο-σώμα
.κείμενο-σίγαση
.κείμενο-λευκό
.κείμενο-μαύρο-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 bg-dark">.text-warning</p>
<p class="text-info bg-dark">.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>Μετάδοση νοήματος στις υποστηρικτικές τεχνολογίες
Η χρήση χρώματος για να προσθέσετε νόημα παρέχει μόνο μια οπτική ένδειξη, η οποία δεν θα μεταδοθεί στους χρήστες βοηθητικών τεχνολογιών – όπως οι συσκευές ανάγνωσης οθόνης. Βεβαιωθείτε ότι οι πληροφορίες που υποδηλώνονται με το χρώμα είναι είτε προφανείς από το ίδιο το περιεχόμενο (π.χ. το ορατό κείμενο), είτε περιλαμβάνονται με εναλλακτικά μέσα, όπως πρόσθετο κείμενο κρυμμένο με την .visually-hiddenτάξη.
Ιδιαιτερότητα
Μερικές φορές οι κλάσεις συμφραζομένων δεν μπορούν να εφαρμοστούν λόγω της ιδιαιτερότητας ενός άλλου επιλογέα. Σε ορισμένες περιπτώσεις, μια επαρκής λύση είναι να αναδιπλώσετε το περιεχόμενο του στοιχείου σας σε ένα <div>ή περισσότερο σημασιολογικό στοιχείο με την επιθυμητή κλάση.
Sass
Εκτός από την παρακάτω λειτουργικότητα Sass, εξετάστε το ενδεχόμενο να διαβάσετε σχετικά με τις προσαρμοσμένες ιδιότητες CSS που περιλαμβάνονται (γνωστές και ως μεταβλητές CSS) για χρώματα και πολλά άλλα.
Μεταβλητές
Τα περισσότερα colorβοηθητικά προγράμματα δημιουργούνται από τα χρώματα του θέματός μας, τα οποία επανατοποθετούνται από τις γενικές μεταβλητές της παλέτας χρωμάτων μας.
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;
$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;
Διατίθενται επίσης χρώματα σε κλίμακα του γκρι, αλλά μόνο ένα υποσύνολο χρησιμοποιείται για τη δημιουργία οποιωνδήποτε βοηθητικών προγραμμάτων.
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
Χάρτης
Στη συνέχεια, τα χρώματα θεμάτων τοποθετούνται σε έναν χάρτη Sass, ώστε να μπορούμε να τα κάνουμε βρόχο για να δημιουργήσουμε τα βοηθητικά προγράμματα, τους τροποποιητές στοιχείων και πολλά άλλα.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Τα χρώματα σε κλίμακα του γκρι είναι επίσης διαθέσιμα ως χάρτης Sass. Αυτός ο χάρτης δεν χρησιμοποιείται για τη δημιουργία βοηθητικών προγραμμάτων.
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
);
Utilities API
Τα βοηθητικά προγράμματα χρώματος δηλώνονται στο API βοηθητικών προγραμμάτων μας σε scss/_utilities.scss. Μάθετε πώς να χρησιμοποιείτε το API βοηθητικών προγραμμάτων.
"color": (
property: color,
class: text,
values: map-merge(
$theme-colors,
(
"white": $white,
"body": $body-color,
"muted": $text-muted,
"black-50": rgba($black, .5),
"white-50": rgba($white, .5),
"reset": inherit,
)
)
),