Kɔla ahorow
Da ntease adi denam colornsa kakraa bi a wɔde kɔla mfaso adesua ahorow so. Nea ɛka ho ne mmoa a wɔde ma styling links ne hover states, nso.
Kɔla ahorow
Fa kɔla utilities yɛ nsɛm no kɔla. Sɛ wopɛ sɛ wo colorize links a, wobɛtumi de .link-*helper classes a ɛwɔ :hoverne :focusstates no adi dwuma.
.nsɛm-a-mfitiase
.nsɛm-nsɛm a ɛto so abien
.nkyerɛwee-nkonimdi
.text-asiane
.nsɛm-a-kɔkɔbɔ
.nsɛm-nsɛm
.nkyerɛwee-hann
.nsɛm-a-ɛyɛ sum
.nsɛm-nipadua
.nsɛm a wɔde ayɛ mum
.nkyerɛwee-fitaa
.nsɛm-a ɛyɛ tuntum-50
.nsɛm-a-fitaa-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 ne CSS variables a wɔde aka ho ama text utilities,
.text-black-50na
.text-white-50wɔagyae deprecation firi v5.1.0. Wɔbɛyi wɔn afiri hɔ wɔ v6.0.0 mu.
Ntease a wɔde bɛma mfiridwuma ahorow a ɛboa
Kɔla a wɔde di dwuma de ntease ka ho no ma wonya sɛnkyerɛnne a wotumi hu nkutoo, a wɔremfa nkɔma wɔn a wɔde mfiridwuma a ɛboa di dwuma – te sɛ screen akenkanfo. Hwɛ sɛ nsɛm a wɔde kɔla no kyerɛ no da adi pefee fi emu nsɛm no ankasa mu (sɛ nhwɛso no, nsɛm a wotumi hu no), anaasɛ wɔde bɛka ho denam akwan foforo so, te sɛ nsɛm foforo a wɔde asie ne .visually-hiddenadesuakuw no mu.
Opacity a ɛwɔ hɔ
Wɔde aka ho wɔ v5.1.0 mu
Ɛde besi v5.1.0 no, wɔde Sass de CSS nsakrae ahorow na ɛyɛ nkyerɛwee kɔla mfaso horow. Wei ma kwan ma wɔsesa kɔla wɔ bere ankasa mu a wɔmfa compilation ne dynamic alpha transparency nsakrae nka ho.
Sɛnea ɛyɛ adwuma
Susuw yɛn default .text-primaryutility no ho hwɛ.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Yɛde yɛn --bs-primary(a ɛwɔ boɔ a ɛyɛ 13, 110, 253) CSS nsakraeɛ no RGB nkyerɛaseɛ di dwuma na yɛde CSS nsakraeɛ a ɛtɔ so mmienu, --bs-text-opacity, ka ho ma alpha transparency (a ɛwɔ default botaeɛ 1aseda ma mpɔtam hɔ CSS nsakraeɛ). Ɛno kyerɛ sɛ bere biara a wode bedi dwuma .text-primarymprempren no, wo colorbo a wɔabɔ ho akontaa no yɛ rgba(13, 110, 253, 1). Mpɔtam hɔ CSS nsakraeɛ a ɛwɔ .text-*adesua biara mu no kwati agyapadeɛ ho nsɛm enti nested instances a ɛwɔ utilities no ntumi nnya alpha transparency a wɔasesa no ankasa.
Nhwɛsoɔ
Sɛ wopɛ sɛ wosakra saa opacity no a, --bs-text-opacityfa custom styles anaa inline styles so twa so.
<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>Anaasɛ, paw nneɛma a .text-opacitywɔde di dwuma no mu biara:
<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>Nsɛm pɔtee a ɛfa ho
Ɛtɔ da bi a, wontumi mfa nsɛm a ɛfa ho adesua ahorow nni dwuma esiane sɛ ɔpawfo foforo no yɛ pɔtee nti. Wɔ tebea horow bi mu no, adwumayɛ a ɛdɔɔso ne sɛ wode <div>adesuakuw a wopɛ no bɛkyekyere wo element no mu nsɛm no wɔ nkyerɛase element bi anaa nea ɛboro saa mu.
Sass
Wɔ Sass dwumadie a ɛdidi soɔ yi akyi no, susu ho sɛ wobɛkenkan yɛn CSS amanneɛbɔ agyapadeɛ a ɛka ho (a wɔfrɛ no CSS nsakraeɛ) ama kɔla ne nea ɛkeka ho.
Nneɛma a Ɛsakra
utilities dodow no ara coloryɛ yɛn asɛmti kɔla ahorow, a wɔasan de ama afi yɛn generic kɔla palette nsakrae ahorow no mu.
$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;
Grayscale kɔla nso wɔ hɔ, nanso subset nkutoo na wɔde yɛ utilities biara.
$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;
Asase mfonini
Afei wɔde asɛmti kɔla ahorow gu Sass map mu sɛnea ɛbɛyɛ a yebetumi ayɛ loop wɔ so de ayɛ yɛn utilities, component modifiers, ne nea ɛkeka ho.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Grayscale kɔla ahorow nso wɔ hɔ sɛ Sass asase mfonini. Wɔmfa saa asase mfonini yi nyɛ nneɛma a wɔde di dwuma biara.
$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
);
Wɔyɛ RGB kɔla ahorow no fi Sass map a ɛyɛ soronko mu:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Na kɔla opacities si so ne wɔn ankasa map a utilities API no di:
$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");
Nneɛma a wɔde di dwuma API
Wɔabɔ kɔla utilities ho dawuru wɔ yɛn utilities API mu wɔ scss/_utilities.scss. Sua sɛnea wode utilities API no bedi dwuma.
"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
)
),