Amabara
Tanga ibisobanuro unyuze colorhamwe nintoki zamabara yingirakamaro. Harimo inkunga ya styling ihuza hamwe na leta ya hover, nayo.
Amabara
Hindura amabara hamwe nibikorwa byamabara. Niba ushaka gusiga amabara, urashobora gukoresha .link-*ibyiciro byabafasha bifite :hoverna :focusleta.
.text-primaire
.text-yisumbuye
.text-intsinzi
.text-akaga
.text-imburira
.text-amakuru
.umucyo
.text-umwijima
.text-umubiri
.text
.text-yera
.text-umukara-50
.text-yera-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-*ibikorwa byingirakamaro hamwe na CSS ihinduka kubikorwa byingirakamaro,
.text-black-50kandi
.text-white-50birateshwa agaciro kuva v5.1.0. Bazakurwaho muri v6.0.0.
Gutanga ibisobanuro kubuhanga bufasha
Gukoresha ibara kugirango wongere ibisobanuro bitanga gusa icyerekezo cyerekana, kitazashyikirizwa abakoresha tekinoroji ifasha - nk'abasoma ecran. Menya neza ko amakuru yerekanwe n'ibara agaragara uhereye kubirimo ubwabyo (urugero: inyandiko igaragara), cyangwa bigashyirwa muburyo butandukanye, nk'inyandiko y'inyongera ihishe hamwe .visually-hiddenn'ishuri.
Amahirwe
Wongeyeho muri v5.1.0
Kuva kuri v5.1.0, inyandiko yamabara yingirakamaro ikorwa hamwe na Sass ukoresheje CSS ihinduka. Ibi bituma habaho igihe-nyacyo cyamabara adafite icyegeranyo hamwe na alfa ya dinamike ihinduka.
Uburyo ikora
Reba akamaro kacu .text-primarygasanzwe.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Dukoresha verisiyo ya RGB yacu --bs-primary(hamwe nagaciro kayo 13, 110, 253) CSS ihindagurika kandi twomekaho CSS ya kabiri ihindagurika --bs-text-opacity,, kubwa alfa ya transparency (hamwe nagaciro gasanzwe 1dukesha CSS ihinduka). Ibyo bivuze igihe icyo ari cyo cyose ukoresha .text-primaryubungubu, coloragaciro kawe ni rgba(13, 110, 253, 1). Impinduka za CSS zaho muri buri .text-*cyiciro zirinda ibibazo byumurage kuburyo ingero zifatika zingirakamaro zidahita zigira alfa yahinduwe.
Urugero
Guhindura ubwo busobanuro, kurenga --bs-text-opacityukoresheje uburyo bwihariye cyangwa 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>Cyangwa, hitamo muri kimwe mubikorwa .text-opacitybyingenzi:
<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>Umwihariko
Rimwe na rimwe, ibyiciro byihariye ntibishobora gukoreshwa kubera umwihariko wundi watoranije. Rimwe na rimwe, akazi gahagije ni ugupfunyika ibintu byawe mubintu <div>cyangwa byinshi bisobanura hamwe nicyiciro wifuza.
Sass
Usibye imikorere ya Sass ikurikira, tekereza gusoma kubyerekeye imitungo yihariye ya CSS (bita CSS variable) kumabara nibindi.
Ibihinduka
Byinshi colormubikorwa byakozwe namabara yinsanganyamatsiko, yoherejwe kuva muri rusange ibara ryibara rya palette.
$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;
Ibara rya graycale naryo riraboneka, ariko subet yonyine ikoreshwa mugutanga ibikorwa byose.
$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;
Ikarita
Amabara yinsanganyamatsiko noneho ashyirwa mukarita ya Sass kugirango dushobore kuzenguruka hejuru kugirango tubyare ibikorwa byacu, abahindura ibice, nibindi byinshi.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Ibara rya graycale naryo riraboneka nkikarita ya Sass. Ikarita ntabwo ikoreshwa mugukora ibikorwa byose.
$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
);
Amabara ya RGB akomoka ku ikarita ya Sass itandukanye:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Kandi amabara meza yubaka kuriyo hamwe nikarita yabo ikoreshwa na 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");
Ibikorwa API
Ibikoresho by'amabara byatangajwe mubikorwa byacu API muri scss/_utilities.scss. Wige gukoresha ibikoresho 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
)
),