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>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.
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
);
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,
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,
)
)
),