Ngjyrat
Përcillni kuptimin colorme një pjesë të vogël të klasave të përdorimit të ngjyrave. Përfshin gjithashtu mbështetje për lidhjet e stilimit me gjendjet hover.
Ngjyrat
Ngjyrosni tekstin me ndihmën e ngjyrave. Nëse dëshironi të ngjyrosni lidhjet, mund të përdorni .link-*klasat ndihmëse që kanë :hoverdhe :focusgjendjet.
.tekst-primare
.tekst-sekondare
.tekst-sukses
.tekst-rrezik
.tekst-paralajmërim
.tekst-info
.tekst-dritë
.tekst-errësirë
.tekst-trup
.tekst i heshtur
.tekst-bardhë
.tekst-i zi-50
.tekst-bardhë-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-*programeve ndihmëse dhe variablave CSS për programet e tekstit,
.text-black-50dhe
.text-white-50janë zhvlerësuar që nga v5.1.0. Ato do të hiqen në v6.0.0.
Përcjellja e kuptimit tek teknologjitë ndihmëse
Përdorimi i ngjyrës për të shtuar kuptimin ofron vetëm një tregues vizual, i cili nuk do t'u transmetohet përdoruesve të teknologjive ndihmëse - siç janë lexuesit e ekranit. Sigurohuni që informacioni i shënuar nga ngjyra të jetë ose i dukshëm nga vetë përmbajtja (p.sh. teksti i dukshëm), ose të përfshihet përmes mjeteve alternative, si teksti shtesë i fshehur me .visually-hiddenklasën.
Opaciteti
Shtuar në v5.1.0
Që nga v5.1.0, shërbimet e ngjyrave të tekstit krijohen me Sass duke përdorur variabla CSS. Kjo lejon ndryshime të ngjyrave në kohë reale pa kompilim dhe ndryshime dinamike të transparencës alfa.
Si punon
Merrni parasysh programin tonë të paracaktuar .text-primary.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Ne përdorim një version RGB të ndryshores sonë --bs-primary(me vlerën e 13, 110, 253) CSS dhe bashkangjitëm një ndryshore të dytë CSS, --bs-text-opacity, për transparencën alfa (me një vlerë të paracaktuar 1falë një ndryshoreje lokale CSS). Kjo do të thotë në çdo kohë që përdorni .text-primarytani, colorvlera juaj e llogaritur është rgba(13, 110, 253, 1). Variabla lokale CSS brenda çdo .text-*klase shmang çështjet e trashëgimisë, kështu që instancat e ndërlidhura të shërbimeve nuk kanë automatikisht një transparencë alfa të modifikuar.
Shembull
Për të ndryshuar atë paqartësi, anashkaloni --bs-text-opacitynëpërmjet stileve të personalizuara ose stileve të brendshme.
<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>Ose, zgjidhni nga ndonjë prej .text-opacityshërbimeve:
<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>Specifikimi
Ndonjëherë klasat kontekstuale nuk mund të aplikohen për shkak të specifikës së një përzgjedhësi tjetër. Në disa raste, një zgjidhje e mjaftueshme është të mbështillni përmbajtjen e elementit tuaj në një <div>ose më shumë element semantik me klasën e dëshiruar.
Sass
Përveç funksionalitetit të mëposhtëm Sass, merrni parasysh të lexoni për veçoritë tona të personalizuara të CSS (të njohura si variablat CSS) për ngjyrat dhe më shumë.
Variablat
Shumica e colorshërbimeve gjenerohen nga ngjyrat e temës sonë, të ricaktuara nga variablat tona të përgjithshme të paletës së ngjyrave.
$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;
Ngjyrat në shkallë gri janë gjithashtu të disponueshme, por vetëm një nëngrup përdoret për të gjeneruar ndonjë shërbim.
$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;
Harta
Ngjyrat e temave vendosen më pas në një hartë Sass, në mënyrë që ne të mund t'i kalojmë ato për të gjeneruar shërbimet tona, modifikuesit e komponentëve dhe më shumë.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Ngjyrat në shkallë gri janë gjithashtu të disponueshme si një hartë Sass. Kjo hartë nuk përdoret për të krijuar ndonjë shërbim.
$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
);
Ngjyrat RGB krijohen nga një hartë e veçantë Sass:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Dhe paqartësitë e ngjyrave ndërtohen mbi atë me hartën e tyre që konsumohet nga API-ja e shërbimeve:
$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
Shërbimet e ngjyrave janë deklaruar në API të shërbimeve tona në scss/_utilities.scss. Mësoni se si të përdorni API të shërbimeve.
"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
)
),