Dagiti kolor
Ipaawat ti kaipapanan babaen colorti sumagmamano a klase ti utilidad ti kolor. Iramanna ti suporta para kadagiti silpo ti estilo kadagiti estado ti hover, met.
Dagiti kolor
Kolor ti teksto babaen kadagiti utilidad ti kolor. No kayatmo a mangkolor kadagiti silpo, mabalinmo nga usaren dagiti .link-*katulongan a klase nga addaan :hoverken :focusestado.
.teksto-pangruna
.teksto-segundario
.teksto-balligi
.teksto-peggad
.teksto-a-pakdaar
.teksto-info
.teksto-silaw
.teksto-nasipnget
.teksto-bagi
.teksto-naulimek
.teksto-puraw
.teksto-nangisit-50
.teksto-puraw-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-*utilidad ken dagiti variable ti CSS para kadagiti utilidad ti teksto,
.text-black-50ken
.text-white-50naikkaten manipud iti v5.1.0. Maikkat dagitoy iti v6.0.0.
Panangipaay ti kaipapanan kadagiti makatulong a teknolohia
Ti panagusar ti kolor tapno mangnayon ti kaipapanan ket mangipaay laeng ti makita a pakakitaan, a saan a maidanon kadagiti agar-aramat kadagiti makatulong a teknolohia – kas dagiti screen reader. Siguraduen a ti impormasion a naipasimudaag babaen ti kolor ket nalawag manipud iti linaon a mismo (kas pagarigan ti makita a teksto), wenno mairaman babaen dagiti alternatibo a wagas, a kas ti kanayonan a teksto a nailemmeng a kadua ti .visually-hiddenklase.
Opacity nga
Nainayon iti v5.1.0
Manipud iti v5.1.0, dagiti utilidad ti kolor ti teksto ket napataud babaen ti Sass babaen ti panagusar kadagiti variable ti CSS. Daytoy ket mangipalubos kadagiti aktual nga oras a panagbalbaliw ti kolor nga awan ti panagtipon ken dagiti dinamiko a panagbalbaliw ti alpha a kinalawag.
No kasano ti panagandar dayta
Panunotem ti default .text-primaryutility-tayo.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Usarenmi ti bersion ti RGB ti --bs-primary(nga addaan iti pateg ti 13, 110, 253) a CSS a variablemi ken nangikapet ti maikadua a CSS a variable, --bs-text-opacity, para iti alpha a kinalawag (nga addaan iti default a pateg 1gapu iti lokal a CSS a variable). Kayatna a sawen nga aniaman nga oras nga usarem .text-primaryita, ti nakumpirma a colorpategmo ket rgba(13, 110, 253, 1). Ti lokal a CSS a variable iti uneg ti tunggal maysa .text-*a klase ket mangliklik kadagiti isyu ti panagtawid isu a dagiti naisanglad a pagarigan dagiti utilidad ket saan nga automatiko nga addaan iti nabaliwan nga alpha a kinalawag.
Pagwadan
Tapno mabaliwan dayta nga opacity, i-override --bs-text-opacitybabaen dagiti kostumbre nga estilo wenno dagiti estilo ti inline.
<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>Wenno, agpili manipud iti aniaman kadagiti .text-opacityutilidad:
<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>Espesipiko
No dadduma dagiti konteksto a klase ket saan a maipakat gapu ti kinaespesipiko ti sabali a mangpili. Iti sumagmamano a kaso, ti umdas a panagliklik ket ti panangibalkot ti linaon ti elementom iti maysa <div>wenno ad-adu pay a semantiko nga elemento nga addaan ti tarigagayan a klase.
Sass nga
Malaksid ti sumaganad a panagusar ti Sass, ibilang ti panagbasa maipapan kadagiti nairaman a kostumbre a tagikua ti CSSmi (aka dagiti variable ti CSS) para kadagiti kolor ken dadduma pay.
Dagiti Variable
Kaaduan kadagiti colorutilidad ket pinartuat babaen dagiti kolor ti temami, a naituding manen manipud kadagiti sapasap a variable ti paleta ti kolormi.
$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;
Dagiti kolor ti grayscale ket magun-od pay, ngem ti laeng subgrupo ti maus-usar a mangpataud ti ania man a utilidad.
$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;
Mapa nga
Kalpasanna dagiti kolor ti tema ket maikabil iti mapa ti Sass tapno mabalintayo ti ag-loop kadagitoy tapno mangpataud kadagiti utilidadtayo, dagiti mangbalbaliw ti paset, ken dadduma pay.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Magun-odan met dagiti kolor ti grayscale kas mapa ti Sass. Daytoy a mapa ket saan a maus-usar a mangpataud ti ania man a utilidad.
$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
);
Dagiti kolor ti RGB ket napataud manipud iti naisina a mapa ti Sass:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Ket dagiti opacities ti kolor ket mangbangon iti dayta nga addaan iti bukodda a mapa a nabusbos babaen ti utilities 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");
API dagiti utilidad
Dagiti utilidad ti kolor ket naideklara kadagiti utilidadmi nga API iti scss/_utilities.scss. Ammuem no kasano nga usaren ti utilities 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
)
),