Colori
Trasmetti significato colorcon una manciata di classi di utilità del colore. Include anche il supporto per i collegamenti di stile con gli stati al passaggio del mouse.
Colori
Colora il testo con le utilità colore. Se vuoi colorare i link, puoi usare le .link-*classi helper che hanno :hovere :focusstati.
.testo-primario
.testo-secondario
.testo-successo
.testo-pericolo
.avviso di testo
.text-info
.testo-luce
.testo-scuro
.testo-corpo
.testo disattivato
.testo-bianco
.testo-nero-50
.testo-bianco-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-*utilità e variabili CSS per utilità di testo
.text-black-50e
.text-white-50sono obsoleti a partire dalla v5.1.0. Verranno rimossi nella v6.0.0.
Trasmettere significato alle tecnologie assistive
L'uso del colore per aggiungere significato fornisce solo un'indicazione visiva, che non verrà trasmessa agli utenti di tecnologie assistive, come i lettori di schermo. Assicurati che le informazioni denotate dal colore siano ovvie dal contenuto stesso (ad esempio il testo visibile), o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la .visually-hiddenclasse.
Opacità
Aggiunto nella v5.1.0
A partire dalla v5.1.0, le utilità del colore del testo vengono generate con Sass utilizzando variabili CSS. Ciò consente modifiche del colore in tempo reale senza modifiche e modifiche dinamiche della trasparenza alfa.
Come funziona
.text-primaryConsidera la nostra utilità predefinita .
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Usiamo una versione RGB della nostra variabile CSS --bs-primary(con il valore di 13, 110, 253) e alleghiamo una seconda variabile CSS, --bs-text-opacity, per la trasparenza alfa (con un valore predefinito 1grazie ad una variabile CSS locale). Ciò significa che ogni volta che usi .text-primaryora, il tuo valore calcolato colorè rgba(13, 110, 253, 1). La variabile CSS locale all'interno di ogni .text-*classe evita problemi di ereditarietà, quindi le istanze nidificate delle utilità non hanno automaticamente una trasparenza alfa modificata.
Esempio
Per modificare tale opacità, sovrascrivi --bs-text-opacitytramite stili personalizzati o stili in linea.
<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>Oppure, scegli tra una delle .text-opacityutilità:
<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>Specificità
A volte le classi contestuali non possono essere applicate a causa della specificità di un altro selettore. In alcuni casi, una soluzione alternativa sufficiente consiste nel racchiudere il contenuto dell'elemento in uno <div>o più elementi semantici con la classe desiderata.
Sass
Oltre alla seguente funzionalità Sass, prendi in considerazione la lettura delle nostre proprietà personalizzate CSS incluse (ovvero variabili CSS) per i colori e altro ancora.
Variabili
La maggior parte delle colorutilità sono generate dai nostri colori del tema, riassegnati dalle nostre variabili generiche della tavolozza dei colori.
$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;
Sono disponibili anche colori in scala di grigi, ma solo un sottoinsieme viene utilizzato per generare eventuali utilità.
$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;
Carta geografica
I colori del tema vengono quindi inseriti in una mappa Sass in modo da poterli scorrere per generare le nostre utilità, modificatori di componenti e altro ancora.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
I colori in scala di grigi sono disponibili anche come mappa Sass. Questa mappa non viene utilizzata per generare alcuna utilità.
$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
);
I colori RGB sono generati da una mappa Sass separata:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
E le opacità del colore si basano su quella con la propria mappa che viene consumata dall'API delle utility:
$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");
API di utilità
Le utilità colore sono dichiarate nella nostra API utilità in scss/_utilities.scss. Scopri come utilizzare l'API delle utilità.
"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
)
),