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>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.
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'ada 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
);
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,
values: map-merge(
$theme-colors,
(
"white": $white,
"body": $body-color,
"muted": $text-muted,
"black-50": rgba($black, .5),
"white-50": rgba($white, .5),
"reset": inherit,
)
)
),