Spalvos
Perteikite prasmę naudodami color
keletą spalvų naudingumo klasių. Apima stiliaus nuorodų su užvedimo būsenomis palaikymą.
Spalvos
Nuspalvinkite tekstą naudodami spalvų programas. Jei norite nuspalvinti nuorodas, galite naudoti .link-*
pagalbines klases , kuriose yra :hover
ir :focus
būsenos.
.text-primary
.tekstas-antrinis
.tekstas-sėkmė
.tekstas-pavojus
.teksto įspėjimas
.text-info
.tekstas-šviesa
.tekstas-tamsus
.text-body
.tekstas nutildytas
.tekstas-baltas
.tekstas-juodas-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-*
teksto paslaugų paslaugų ir CSS kintamųjų,
.text-black-50
jie
.text-white-50
nebenaudojami nuo 5.1.0 versijos. Jie bus pašalinti naudojant 6.0.0 versiją.
Pagalbinių technologijų prasmės perteikimas
Spalvų naudojimas reikšmei pridėti suteikia tik vaizdinę nuorodą, kuri nebus perduota pagalbinių technologijų, pvz., ekrano skaitytuvų, naudotojams. Užtikrinkite, kad informacija, pažymėta spalva, būtų akivaizdi iš paties turinio (pvz., matomas tekstas), arba būtų įtraukta naudojant alternatyvias priemones, pvz., papildomą tekstą, paslėptą .visually-hidden
klasėje.
Neskaidrumas
Pridėta 5.1.0 versijoje
Nuo 5.1.0 versijos teksto spalvų paslaugos generuojamos naudojant Sass naudojant CSS kintamuosius. Tai leidžia keisti spalvas realiuoju laiku be kompiliavimo ir dinaminių alfa skaidrumo pakeitimų.
Kaip tai veikia
Apsvarstykite mūsų numatytąjį .text-primary
įrankį.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Naudojame savo CSS kintamojo --bs-primary
(su reikšme 13, 110, 253
) RGB versiją ir pridedame antrą CSS kintamąjį , --bs-text-opacity
kad būtų alfa skaidrumas (numatytoji reikšmė 1
dėl vietinio CSS kintamojo). Tai reiškia, kad bet kuriuo metu, kai naudojate .text-primary
dabar, jūsų apskaičiuota color
vertė yra rgba(13, 110, 253, 1)
. Vietinis CSS kintamasis kiekvienoje .text-*
klasėje išvengia paveldėjimo problemų, todėl įdėtieji paslaugų egzemplioriai automatiškai neturi modifikuoto alfa skaidrumo.
Pavyzdys
Norėdami pakeisti šį neskaidrumą, nepaisykite --bs-text-opacity
naudodami tinkintus arba įterptus stilius.
<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>
Arba pasirinkite bet kurią iš .text-opacity
paslaugų:
<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škumas
Kartais kontekstinės klasės negali būti taikomos dėl kito parinkiklio specifikos. Kai kuriais atvejais pakanka apeiti elemento turinį į <div>
ar daugiau semantinio elemento su norima klase.
Sass
Be toliau pateiktų „Sass“ funkcijų, apsvarstykite galimybę perskaityti apie mūsų įtrauktas pasirinktines CSS ypatybes (dar žinomas kaip CSS kintamieji), skirtas spalvoms ir kt.
Kintamieji
Daugumą color
paslaugų generuoja mūsų temos spalvos, perskirtos iš mūsų bendrųjų spalvų paletės kintamųjų.
$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;
Galimos ir pilkos spalvos spalvos, tačiau bet kokioms komunalinėms paslaugoms generuoti naudojamas tik poaibis.
$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;
Žemėlapis
Tada temos spalvos įtraukiamos į Sass žemėlapį, kad galėtume per jas pereiti ir generuoti savo komunalines paslaugas, komponentų modifikatorius ir kt.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Pilkos tonų spalvos taip pat galimos kaip Sass žemėlapis. Šis žemėlapis nenaudojamas jokioms komunalinėms paslaugoms generuoti.
$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 spalvos generuojamos iš atskiro Sass žemėlapio:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Ir spalvų neskaidrumas grindžiamas tuo, naudojant savo žemėlapį, kurį naudoja paslaugų 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
Spalvų paslaugos nurodytos mūsų paslaugų API scss/_utilities.scss
. Sužinokite, kaip naudoti paslaugų 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
)
),