Barvy
Přeneste význam pomocí color
ně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í :hover
a :focus
stavy.
.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>
.text-opacity-*
obslužných programů a proměnných CSS pro textové nástroje
.text-black-50
a
.text-white-50
jsou zastaralé od verze 5.1.0. Budou odstraněny ve verzi 6.0.0.
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-hidden
třídě.
Neprůhlednost
Přidáno ve verzi 5.1.0
Od verze 5.1.0 jsou nástroje pro barvu textu generovány pomocí Sass pomocí proměnných CSS. To umožňuje změny barev v reálném čase bez kompilace a dynamických změn průhlednosti alfa.
Jak to funguje
Zvažte náš výchozí .text-primary
nástroj.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Používáme RGB verzi naší --bs-primary
(s hodnotou 13, 110, 253
) CSS proměnné a připojenou druhou CSS proměnnou, --bs-text-opacity
, pro průhlednost alfa (s výchozí hodnotou 1
díky lokální CSS proměnné). To znamená, že kdykoli použijete .text-primary
nyní, vaše vypočítaná color
hodnota je rgba(13, 110, 253, 1)
. Lokální proměnná CSS uvnitř každé .text-*
třídy zabraňuje problémům s dědičností, takže vnořené instance nástrojů nemají automaticky upravenou průhlednost alfa.
Příklad
Chcete-li změnit neprůhlednost, přepište --bs-text-opacity
pomocí vlastních stylů nebo vložených stylů.
<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>
Nebo si vyberte některou z .text-opacity
utilit:
<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
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 color
ná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
);
Barvy RGB jsou generovány ze samostatné mapy Sass:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
A krytí barev na tom staví svou vlastní mapou, kterou spotřebovává API utilit:
$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");
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,
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
)
),