Amadedewo
Gɔmesese to eme to coloramadede ƒe viɖenu ƒe klass ʋɛ aɖewo dzi. Kpekpeɖeŋu na atsyã kadodowo kple hover nɔnɔmewo, hã le eme.
Amadedewo
Tsɔ amadede ƒe dɔwɔnuwo de ama nuŋɔŋlɔwo. Ne èdi be yeawɔ amadede kadodowo la, àteŋu azã .link-*kpeɖeŋutɔ ƒe klass siwo si :hoverkple :focusdukɔwo le.
.nuŋɔŋlɔ-gɔmedzedze
.nuŋɔŋlɔ-sekɛndri
.nuŋɔŋlɔ-dzidzedzekpɔkpɔ
.nuŋɔŋlɔ-afɔku
.nuŋɔŋlɔ-nuxlɔ̃ame
.nuŋɔŋlɔ-nyatakaka
.nuŋɔŋlɔ-kekeli
.nuŋɔŋlɔ-viviti
.text-ŋutilã
.nuŋɔŋlɔ si me nyawo me mekɔ o
.nuŋɔŋlɔ-ɣi
.nuŋɔŋlɔ-black-50
.nuŋɔŋlɔ-ɣi-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-*utilities kple CSS variables tsɔtsɔ kpe ɖe text utilities ŋu,
.text-black-50eye
.text-white-50woɖe asi le wo ŋu tso v5.1.0 dzi. Woaɖe wo ɖa le v6.0.0 me.
Gɔmesese nana mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu
Amadede zazã atsɔ akpe ɖe gɔmesese ŋu koe naa nukpɔkpɔ ƒe dzesi aɖe, si womagblɔ na kpekpeɖeŋunamɔ̃wo zazãlawo o – abe screen readers ene. Kpɔ egbɔ be nyatakaka siwo wotsɔ amadedea de dzesii la dze ƒã tso emenyawo ŋutɔ me (le kpɔɖeŋu me, nuŋɔŋlɔ si wokpɔna), alo wotsɔe de eme to mɔnu bubuwo dzi, abe nuŋɔŋlɔ bubu siwo woɣla kple .visually-hiddenklass la ene.
Nusiwo me mekɔ o
Wotsɔe kpe ɖe eŋu le v5.1.0 me
Tso v5.1.0 dzi la, wowɔa nuŋɔŋlɔ ƒe amadede ƒe dɔwɔnuwo kple Sass to CSS tɔtrɔwo zazã me. Esia ɖea mɔ na amadede ƒe tɔtrɔ le ɣeyiɣi ŋutɔŋutɔ me nuƒoƒoƒu kple alfa ƒe ʋuʋu ƒe tɔtrɔ si trɔna manɔmee.
Ale si wòwɔa dɔe
Bu míaƒe .text-primarydɔwɔnu si míezãna ɖaa ŋu kpɔ.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Míezãa míaƒe --bs-primary(si ƒe asixɔxɔ nye 13, 110, 253) CSS tɔtrɔ ƒe RGB tɔ eye míetsɔa CSS tɔtrɔ evelia kpena ɖe eŋu, --bs-text-opacity, na alfa ƒe ʋuʋu (kple asixɔxɔ gbãtɔ 1akpe ɖe teƒea ƒe CSS tɔtrɔ ŋu). Ema fia be ɣesiaɣi si nàzã .text-primaryfifia la, wò colorasixɔxɔ si wobu akɔntae nye rgba(13, 110, 253, 1). Nutoa me CSS tɔtrɔ si le .text-*klass ɖesiaɖe me ƒoa asa na domenyinu ƒe nyawo ale be nested instances of the utilities mekpɔa alpha transparency si woɖɔli le wo ɖokui si o.
Kpɔɖeŋu
Be nàtrɔ opacity ma la, ɖe asi le eŋu --bs-text-opacityto atsyã tɔxɛwo alo atsyã siwo le fli me dzi.
<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>Alo, tia .text-opacitynuzazãwo dometɔ ɖesiaɖe:
<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>Nusiwo wogblɔ tẽ
Ɣeaɖewoɣi la, womate ŋu awɔ nya siwo ƒo xlãe ƒe klasswo ŋudɔ o le tiatiawɔla bubu ƒe nɔnɔme tɔxɛ ta. Le go aɖewo me la, egbɔkpɔnu si sɔ enye be nàxatsa wò element ƒe emenyawo ɖe <div>gɔmesese ƒe akpa aɖe alo esi wu nenema me kple klass si nèdi.
Sass ƒe nyawo
Tsɔ kpe ɖe Sass ƒe dɔwɔwɔ si gbɔna ŋu la, bu nuxexlẽ tso míaƒe CSS ƒe nɔnɔme tɔxɛ siwo le eme (si woyɔna be CSS ƒe tɔtrɔwo) ŋu na amadedewo kple bubuwo ŋu.
Nusiwo trɔna
Míaƒe tanya ƒe amadedewoe wɔa dɔwɔnu akpa gãtɔ color, siwo wogbugbɔ de asi na mí tso míaƒe amadede ƒe amadede ƒe tɔtrɔwo me.
$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;
Amadede siwo le amadede dzẽ me hã li, gake ƒuƒoƒo sue aɖe koe wozãna tsɔ wɔa dɔwɔnu ɖesiaɖe.
$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;
Anyigbatata
Emegbe wotsɔa tanya ƒe amadedewo dea Sass ƒe anyigbatata me ale be míate ŋu awɔ loop ɖe wo dzi atsɔ awɔ míaƒe utilities, component modifiers, kple bubuwo.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Amadede siwo le amadede dzẽ me hã li abe Sass ƒe anyigbatata ene. Womezãa anyigbatata sia tsɔ wɔa dɔwɔnu aɖeke o.
$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
);
Wowɔa RGB amadedewo tso Sass ƒe anyigbatata si le vovo me:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Eye amadede ƒe opacities tua ɖe ema dzi kple woawo ŋutɔ ƒe anyigbatata si utilities API ɖuna:
$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");
Dɔwɔnuwo ƒe API
Woɖe gbeƒã amadede ƒe dɔwɔnuwo le míaƒe dɔwɔnuwo API me le scss/_utilities.scss. Srɔ̃ alesi nàzã utilities API lae.
"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
)
),