Zabarwienie
Przekaż znaczenie dzięki colorkilku klasom użyteczności kolorów. Obejmuje również obsługę stylów linków ze stanami najechania.
Zabarwienie
Koloruj tekst za pomocą narzędzi do kolorowania. Jeśli chcesz pokolorować linki, możesz użyć .link-*klas pomocniczych, które mają :hoveri :focusstany.
.text-primary
.tekst-dodatkowy
.tekst-sukces
.text-niebezpieczeństwo
.ostrzeżenie tekstowe
.informacje-tekstowe
.tekst-światło
.tekst-ciemny
.tekst-treść
.wyciszony tekst
.tekst-biały
.tekst-czarny-50
.tekst-biały-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-*narzędzi i zmiennych CSS dla narzędzi tekstowych
.text-black-50i
.text-white-50są przestarzałe od wersji 5.1.0. Zostaną usunięte w wersji 6.0.0.
Nadawanie znaczenia technologiom wspomagającym
Użycie koloru w celu dodania znaczenia zapewnia jedynie wizualne wskazanie, które nie zostanie przekazane użytkownikom technologii wspomagających – takich jak czytniki ekranu. Upewnij się, że informacje oznaczone kolorem są oczywiste z samej treści (np. widoczny tekst) lub są zawarte w inny sposób, np. dodatkowy tekst ukryty z .visually-hiddenklasą.
Nieprzezroczystość
Dodano w wersji 5.1.0
Od wersji 5.1.0 narzędzia do kolorowania tekstu są generowane w Sass przy użyciu zmiennych CSS. Pozwala to na zmiany kolorów w czasie rzeczywistym bez kompilacji i dynamicznych zmian przezroczystości alfa.
Jak to działa
Rozważ nasze domyślne .text-primarynarzędzie.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Używamy wersji RGB naszej --bs-primary(o wartości 13, 110, 253) zmiennej CSS z dołączoną drugą zmienną CSS, --bs-text-opacity, dla przezroczystości alfa (z wartością domyślną 1dzięki lokalnej zmiennej CSS). Oznacza to, że za każdym razem, gdy używasz .text-primaryteraz, Twoja obliczona colorwartość to rgba(13, 110, 253, 1). Lokalna zmienna CSS wewnątrz każdej .text-*klasy pozwala uniknąć problemów z dziedziczeniem, więc zagnieżdżone instancje narzędzi nie mają automatycznie zmodyfikowanej przezroczystości alfa.
Przykład
Aby zmienić to krycie, zastąp je --bs-text-opacityza pomocą stylów niestandardowych lub stylów wbudowanych.
<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>Lub wybierz dowolne z .text-opacitynarzędzi:
<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>Specyficzność
Czasami klas kontekstowych nie można zastosować ze względu na specyfikę innego selektora. W niektórych przypadkach wystarczającym obejściem jest zawinięcie zawartości elementu w <div>element semantyczny lub więcej z żądaną klasą.
Sass
Oprócz poniższych funkcji Sass, rozważ przeczytanie o dołączonych niestandardowych właściwościach CSS (zwanych zmiennymi CSS) dla kolorów i nie tylko.
Zmienne
Większość colornarzędzi jest generowanych przez nasze kolory motywu, przypisywane ponownie z naszych ogólnych zmiennych palety kolorów.
$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;
Dostępne są również kolory w skali szarości, ale tylko podzbiór jest używany do generowania dowolnych narzędzi.
$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;
Mapa
Kolory motywu są następnie umieszczane na mapie Sass, dzięki czemu możemy je zapętlić, aby wygenerować nasze narzędzia, modyfikatory komponentów i nie tylko.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Kolory w skali szarości są również dostępne jako mapa Sass. Ta mapa nie służy do generowania żadnych mediów.
$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
);
Kolory RGB są generowane z osobnej mapy Sass:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Na tym opiera się krycie kolorów z własną mapą, która jest wykorzystywana przez interfejs API narzędzi:
$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");
Narzędzia API
Narzędzia kolorów są deklarowane w naszym interfejsie API narzędzi w scss/_utilities.scss. Dowiedz się, jak korzystać z interfejsu API narzędzi.
"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
)
),