Launuka
Isar da ma'ana ta hanyar colorda ɗimbin azuzuwan amfanin launi. Ya haɗa da goyan baya don salon hanyoyin haɗin gwiwa tare da jahohin masu shaƙatawa, kuma.
Launuka
Sanya launin rubutu tare da kayan aikin launi. Idan kuna son canza hanyoyin haɗin yanar gizo, zaku iya amfani da .link-*azuzuwan taimako waɗanda suke :hoverda kuma :focusjihohi.
.rubutu-primary
.rubutu-sakandare
.rubutu-nasara
.rubutu-haɗari
.rubutu-gargadi
.rubutu-bayanan
.rubutu-hasken
.rubutu-duhu
.rubutu-jiki
.rubutu-rufe
.rubutu-fararen fata
.rubutu-baki-50
.rubutu-fari-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-*kayan aiki da masu canji na CSS don kayan aikin rubutu,
.text-black-50kuma
.text-white-50an soke su kamar na v5.1.0. Za a cire su a cikin v6.0.0.
Isar da ma'ana ga fasahar taimako
Yin amfani da launi don ƙara ma'ana kawai yana ba da alamar gani, wanda ba za a isar da shi ga masu amfani da fasahar taimako ba - kamar masu karanta allo. Tabbatar cewa bayanin da launi ke nunawa ko dai a bayyane yake daga abun cikin kanta (misali rubutun bayyane), ko kuma an haɗa shi ta hanyar madadin, kamar ƙarin rubutu da aka ɓoye tare da .visually-hiddenajin.
Bahaushe
An ƙara a cikin v5.1.0
Tun daga v5.1.0, ana samar da kayan aikin launi na rubutu tare da Sass ta amfani da masu canjin CSS. Wannan yana ba da damar sauye-sauyen launi na ainihi ba tare da haɗawa da canje-canje masu fa'ida ba.
Yadda yake aiki
Yi la'akari da tsohuwar .text-primaryamfanin mu.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Muna amfani da nau'in RGB na mu --bs-primary(tare da ƙimar 13, 110, 253) CSS m kuma a haɗe madaidaicin CSS na biyu, --bs-text-opacity, don ma'anar alpha (tare da ƙimar tsohuwa 1godiya ga canjin CSS na gida). Wannan yana nufin duk lokacin da kuka yi amfani da shi .text-primaryyanzu, ƙimar ku ta lissafta colorita ce rgba(13, 110, 253, 1). Maɓallin CSS na gida a cikin kowane .text-*aji yana guje wa al'amuran gado don haka wuraren da aka kafa na kayan aikin ba sa samun ingantaccen bayanin alpha ta atomatik.
Misali
Don canza wannan gaɓoɓin, soke --bs-text-opacityta hanyar salo na al'ada ko salon layi.
<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>Ko, zaɓi daga kowane ɗayan .text-opacityabubuwan amfani:
<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>Musamman
Wasu lokuta ba za a iya amfani da azuzuwan mahallin ba saboda keɓancewar wani zaɓi. A wasu lokuta, isasshiyar mafita ita ce kunsa abun cikin ku a cikin wani <div>ko fiye na ma'ana tare da ajin da ake so.
Sass
Baya ga ayyukan Sass masu zuwa, yi la'akari da karantawa game da kaddarorin al'adunmu na CSS (aka CSS masu canji) don launuka da ƙari.
Masu canji
Yawancin colorabubuwan amfani ana samar da su ta launukan jigon mu, waɗanda aka sake keɓance su daga masu canjin palette ɗin mu na yau da kullun.
$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;
Hakanan ana samun launuka masu launin toka, amma juzu'i ne kawai ake amfani da su don samar da kowane kayan aiki.
$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;
Taswira
Ana sanya launukan jigo a cikin taswirar Sass don mu iya yin madauki a kansu don samar da kayan aikin mu, masu gyara kayan aiki, da ƙari.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Hakanan ana samun launuka masu launin toka azaman taswirar Sass. Ba a amfani da wannan taswirar don samar da kowane kayan aiki.
$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
);
Ana samar da launukan RGB daga taswirar Sass daban:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Kuma ɓangarorin launi suna ginawa akan wannan tare da taswirar su waɗanda API ɗin abubuwan amfani ke cinyewa:
$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 ɗin Utilities
Ana bayyana abubuwan amfani masu launi a cikin API ɗin mu a cikin scss/_utilities.scss. Koyi yadda ake amfani da API ɗin abubuwan amfani.
"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
)
),