Amabara
Tanga ibisobanuro unyuze color
hamwe 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 :hover
na :focus
leta.
.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>
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-hidden
n'ishuri.
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 color
mubikorwa 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
);
Ibikorwa API
Ibikoresho by'amabara byatangajwe mubikorwa byacu API muri scss/_utilities.scss
. Wige gukoresha ibikoresho API.
"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,
)
)
),