Krāsas
Norādiet nozīmi, izmantojot colordažas krāsu lietderības klases. Ietver atbalstu arī saišu veidošanai ar kursora novietošanas stāvokļiem.
Krāsas
Krāsojiet tekstu, izmantojot krāsu utilītus. Ja vēlaties krāsot saites, varat izmantot .link-*palīgklases , kurām ir :hoverun :focusstāvokļi.
.text-primary
.teksts-sekundārais
.teksts-veiksmi
.teksts-bīstamība
.text-warning
.text-info
.text-light
.text-tumšs
.text-body
.text-muted
.text-white
.text-black-50
.text-white-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-*utilītu un CSS mainīgo pievienošanu teksta utilītprogrammām,
.text-black-50un
.text-white-50tie ir novecojuši no v5.1.0. Tie tiks noņemti v6.0.0.
Nozīmes nodošana palīgtehnoloģijām
Krāsu izmantošana nozīmes pievienošanai nodrošina tikai vizuālu norādi, kas netiks nodota palīgtehnoloģiju lietotājiem, piemēram, ekrāna lasītājiem. Nodrošiniet, lai informācija, kas apzīmēta ar krāsu, būtu vai nu acīmredzama no paša satura (piemēram, redzamā teksta), vai arī tā ir iekļauta, izmantojot alternatīvus līdzekļus, piemēram, ar .visually-hiddenklasi paslēptu papildu tekstu.
Necaurredzamība
Pievienots v5.1.0
No v5.1.0 teksta krāsu utilītas tiek ģenerētas ar Sass, izmantojot CSS mainīgos. Tas ļauj mainīt krāsu reāllaikā bez kompilācijas un dinamiskām alfa caurspīdīguma izmaiņām.
Kā tas strādā
Apsveriet mūsu noklusējuma .text-primaryutilītu.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Mēs izmantojam sava CSS mainīgā --bs-primary(ar vērtību 13, 110, 253) RGB versiju un pievienojam otru CSS mainīgo , --bs-text-opacityalfa caurspīdīgumam (ar noklusējuma vērtību 1, pateicoties vietējam CSS mainīgajam). Tas nozīmē, ka jebkurā laikā, kad izmantojat .text-primarytagad, jūsu aprēķinātā colorvērtība ir rgba(13, 110, 253, 1). Vietējais CSS mainīgais katrā .text-*klasē novērš mantojuma problēmas, tāpēc ligzdotajiem utilītu gadījumiem automātiski nav modificētas alfa caurspīdīguma.
Piemērs
Lai mainītu šo necaurredzamību, ignorējiet, --bs-text-opacityizmantojot pielāgotos stilus vai iekļautos stilus.
<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>Vai arī izvēlieties kādu no .text-opacityutilītprogrammām:
<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>Specifiskums
Dažreiz kontekstuālās klases nevar lietot cita atlasītāja specifikas dēļ. Dažos gadījumos pietiekams risinājums ir ietīt elementa saturu vienā <div>vai vairākā semantiskā elementā ar vajadzīgo klasi.
Sass
Papildus tālāk norādītajai Sass funkcionalitātei apsveriet iespēju izlasīt informāciju par mūsu iekļautajiem CSS pielāgotajiem rekvizītiem (aka CSS mainīgajiem) krāsām un citiem.
Mainīgie lielumi
Lielāko daļu colorutilītu ģenerē mūsu motīvu krāsas, kas ir atkārtoti piešķirtas no mūsu vispārīgajiem krāsu paletes mainīgajiem.
$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;
Ir pieejamas arī pelēktoņu krāsas, taču utilītu ģenerēšanai tiek izmantota tikai apakškopa.
$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;
Karte
Pēc tam motīvu krāsas tiek ievietotas Sass kartē, lai mēs varētu tām pāriet, lai ģenerētu utilītas, komponentu modifikatorus un daudz ko citu.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Pelēktoņu krāsas ir pieejamas arī kā Sass karte. Šī karte netiek izmantota utilītu ģenerēšanai.
$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
);
RGB krāsas tiek ģenerētas no atsevišķas Sass kartes:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Krāsu necaurredzamība balstās uz to, izmantojot savu karti, ko patērē utilītu API:
$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
Krāsu utilītas ir deklarētas mūsu utilītu API scss/_utilities.scss. Uzziniet, kā izmantot utilītu API.
"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
)
),