Χρωματιστά
Μεταφέρετε το νόημα μέσω 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>.text-opacity-*βοηθητικών προγραμμάτων και μεταβλητών CSS για βοηθητικά προγράμματα κειμένου
.text-black-50και
.text-white-50καταργούνται από την έκδοση 5.1.0. Θα αφαιρεθούν στην έκδοση 6.0.0.
Μετάδοση νοήματος στις υποστηρικτικές τεχνολογίες
Η χρήση χρώματος για να προσθέσετε νόημα παρέχει μόνο μια οπτική ένδειξη, η οποία δεν θα μεταδοθεί στους χρήστες βοηθητικών τεχνολογιών – όπως οι συσκευές ανάγνωσης οθόνης. Βεβαιωθείτε ότι οι πληροφορίες που υποδηλώνονται με το χρώμα είναι είτε προφανείς από το ίδιο το περιεχόμενο (π.χ. το ορατό κείμενο), είτε περιλαμβάνονται με εναλλακτικά μέσα, όπως πρόσθετο κείμενο κρυμμένο με την .visually-hiddenτάξη.
Αδιαφάνεια
Προστέθηκε στην έκδοση 5.1.0
Από την έκδοση 5.1.0, τα βοηθητικά προγράμματα χρωμάτων κειμένου δημιουργούνται με το Sass χρησιμοποιώντας μεταβλητές CSS. Αυτό επιτρέπει αλλαγές χρωμάτων σε πραγματικό χρόνο χωρίς μεταγλώττιση και δυναμικές αλλαγές διαφάνειας άλφα.
Πως δουλεύει
Εξετάστε το προεπιλεγμένο μας .text-primaryβοηθητικό πρόγραμμα.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Χρησιμοποιούμε μια έκδοση RGB της μεταβλητής CSS --bs-primary(με την τιμή 13, 110, 253) και επισυνάπτουμε μια δεύτερη μεταβλητή CSS, --bs-text-opacity, για τη διαφάνεια άλφα (με μια προεπιλεγμένη τιμή 1χάρη σε μια τοπική μεταβλητή CSS). Αυτό σημαίνει ότι όποτε χρησιμοποιείτε .text-primaryτώρα, η υπολογισμένη colorτιμή σας είναι rgba(13, 110, 253, 1). Η τοπική μεταβλητή CSS μέσα σε κάθε .text-*κλάση αποφεύγει ζητήματα κληρονομικότητας, έτσι ώστε οι ένθετες παρουσίες των βοηθητικών προγραμμάτων να μην έχουν αυτόματα τροποποιημένη διαφάνεια άλφα.
Παράδειγμα
Για να αλλάξετε αυτήν την αδιαφάνεια, παρακάμψτε --bs-text-opacityμέσω προσαρμοσμένων στυλ ή ενσωματωμένων στυλ.
<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>Ή, επιλέξτε από οποιοδήποτε από τα .text-opacityβοηθητικά προγράμματα:
<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>Ιδιαιτερότητα
Μερικές φορές οι κλάσεις συμφραζομένων δεν μπορούν να εφαρμοστούν λόγω της ιδιαιτερότητας ενός άλλου επιλογέα. Σε ορισμένες περιπτώσεις, μια επαρκής λύση είναι να αναδιπλώσετε το περιεχόμενο του στοιχείου σας σε ένα <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
);
Τα χρώματα RGB δημιουργούνται από έναν ξεχωριστό χάρτη Sass:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Και οι αδιαφάνειες χρωμάτων βασίζονται σε αυτό με τον δικό τους χάρτη που καταναλώνεται από το API βοηθητικών προγραμμάτων:
$utilities-text: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-color)
)
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");
Utilities API
Τα βοηθητικά προγράμματα χρώματος δηλώνονται στο API βοηθητικών προγραμμάτων μας σε scss/_utilities.scss. Μάθετε πώς να χρησιμοποιείτε το API βοηθητικών προγραμμάτων.
"color": (
property: color,
class: text,
local-vars: (
"text-opacity": 1
),
values: map-merge(
$utilities-text-colors,
(
"muted": $text-muted,
"black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated
"reset": inherit,
)
)
),
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),