Barvy
Přeneste význam pomocí colorněkolika tříd barevných nástrojů. Zahrnuje také podporu pro stylování odkazů se stavy přechodu.
Barvy
Vybarvěte text pomocí barevných nástrojů. Pokud chcete vybarvit odkazy, můžete použít .link-*pomocné třídy , které mají :hovera :focusstavy.
.text-primární
.text-sekundární
.text-úspěch
.text-nebezpečí
.text-varování
.textové informace
.text-light
.text-tmavý
.text-body
.text-ztlumený
.text-bílý
.text-black-50
.text-bílá-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>Předávání významu asistenčním technologiím
Použití barvy k přidání významu poskytuje pouze vizuální indikaci, která nebude zprostředkována uživatelům asistenčních technologií – jako jsou čtečky obrazovky. Ujistěte se, že informace označené barvou jsou buď zřejmé ze samotného obsahu (např. viditelný text), nebo jsou zahrnuty alternativními prostředky, jako je další text skrytý ve .visually-hiddentřídě.
Specifičnost
Někdy nelze kontextové třídy použít kvůli specifičnosti jiného selektoru. V některých případech je dostatečným řešením zabalit obsah prvku do <div>sémantického prvku nebo sémantického prvku s požadovanou třídou.
Sass
Kromě následujících funkcí Sass zvažte přečtení o našich vlastních vlastnostech CSS (známých také jako proměnné CSS) pro barvy a další.
Proměnné
Většina colornástrojů je generována našimi barvami motivu, přeřazenými z našich obecných proměnných palety barev.
$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;
Dostupné jsou také odstíny šedi, ale ke generování nástrojů se používá pouze podmnožina.
$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
Barvy motivu jsou poté vloženy do mapy Sass, abychom je mohli přepínat a vytvářet naše nástroje, modifikátory komponent a další.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Barvy ve stupních šedi jsou k dispozici také jako mapa Sass. Tato mapa neslouží ke generování žádných 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
);
Utility API
Nástroje pro barvy jsou deklarovány v našem rozhraní API pro nástroje v scss/_utilities.scss. Naučte se používat rozhraní API utilit.
"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,
)
)
),