Boje
Prenesite značenje coloruz pregršt korisnih klasa boja. Uključuje i podršku za stilizovanje veza sa stanjima lebdenja.
Boje
Obojite tekst pomoću uslužnih programa za boje. Ako želite da bojite veze, možete koristiti .link-*pomoćne klase koje imaju :hoveri :focusstanja.
.tekst-primarni
.tekst-sekundarni
.text-success
.tekst-opasnost
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.tekst-bijeli
.text-black-50
.tekst-bijeli-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-*uslužnih programa i CSS varijabli za tekstualne uslužne programe,
.text-black-50i
.text-white-50zastarjeli su od v5.1.0. Oni će biti uklonjeni u v6.0.0.
Prenošenje značenja pomoćnim tehnologijama
Korištenje boje za dodavanje značenja pruža samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači ekrana. Osigurajte da su informacije označene bojom ili očigledne iz samog sadržaja (npr. vidljivi tekst), ili su uključene putem alternativnih sredstava, kao što je dodatni tekst skriven .visually-hiddenklasom.
Opacity
Dodato u v5.1.0
Od v5.1.0, uslužni programi za boju teksta se generišu sa Sass-om koristeći CSS varijable. Ovo omogućava promjene boja u stvarnom vremenu bez kompilacije i dinamičke promjene alfa transparentnosti.
Kako radi
Razmotrite naš zadani .text-primaryuslužni program.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Koristimo RGB verziju naše --bs-primary(sa vrijednošću 13, 110, 253) CSS varijable i prilažemo drugu CSS varijablu, --bs-text-opacity, za alfa transparentnost (sa zadanom vrijednošću 1zahvaljujući lokalnoj CSS varijabli). To znači da kad god .text-primarysada koristite, vaša izračunata colorvrijednost je rgba(13, 110, 253, 1). Lokalna CSS varijabla unutar svake .text-*klase izbjegava probleme nasljeđivanja tako da ugniježđene instance uslužnih programa nemaju automatski modificiranu alfa transparentnost.
Primjer
Da promijenite tu neprozirnost, nadjačajte --bs-text-opacitypreko prilagođenih stilova ili umetnutih stilova.
<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>Ili odaberite neki od .text-opacitypomoćnih programa:
<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>Specifičnost
Ponekad se kontekstualne klase ne mogu primijeniti zbog specifičnosti drugog selektora. U nekim slučajevima, dovoljno rješenje je umotati sadržaj vašeg elementa u <div>ili više semantičkih elemenata sa željenom klasom.
Sass
Uz sljedeću Sass funkcionalnost, razmislite o čitanju o našim uključenim CSS prilagođenim svojstvima (aka CSS varijable) za boje i još mnogo toga.
Varijable
Većina coloruslužnih programa generisana je bojama naše teme, predodijeljenim iz naših generičkih varijabli palete boja.
$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;
Boje u nijansama sive su također dostupne, ali se samo podskup koristi za generiranje bilo kakvih uslužnih programa.
$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
Boje teme se zatim stavljaju u Sass mapu tako da možemo da ih pređemo kako bismo generirali naše uslužne programe, modifikatore komponenti i još mnogo toga.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Boje u nijansama sive su takođe dostupne kao Sass mapa. Ova mapa se ne koristi za generiranje bilo kakvih uslužnih programa.
$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 boje se generiraju iz zasebne Sass mape:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
I neprozirnost boja se nadovezuje na to sa vlastitom mapom koju koristi API za pomoćne programe:
$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
Pomoćni programi za boje su deklarisani u našem API-ju za pomoćne programe u scss/_utilities.scss. Naučite kako koristiti uslužni 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
)
),