Mebala
Fetiša moelelo ka color
ka seatla se se tletšego sa diklase tša mohola wa mmala. E akaretša thekgo ya dikgokagano tša setaele le dilete tša go hover, le tšona.
Mebala
Mebala ya sengwalwa ka didirišwa tša mebala. Ge o nyaka go mebala dikgokagano, o ka šomiša .link-*
diklase tša mothuši tšeo di nago :hover
le le :focus
di bolela.
.sengwalwa-ya mathomo
.sengwalwa-sekondari
.katlego ya sengwalwa
.sengwalwa-kotsi
.temošo ya sengwalwa
.tshedimošo ya sengwalwa
.seetša-sengwalwa
.sengwalwa-lefsifsi
.mmele-sengwalwa
.sengwalwa se se kgaotšwego
.sengwalwa-se sešweu
.sengwalwa-se se ntsho-50
.sengwalwa-se sešweu-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>
Go fetišetša tlhalošo go theknolotši ya go thuša
Go šomiša mmala go oketša tlhalošo go fa fela taetšo ya go bonwa, yeo e ka se fetišwego go badiriši ba theknolotši ya go thuša – go swana le babadi ba skrine. Netefatša gore tshedimošo yeo e bontšhitšwego ka mmala e ka ba e bonagala gabotse go tšwa diteng ka botšona (mohlala, sengwalwa se se bonagalago), goba e akaretšwa ka mekgwa ye mengwe, go swana le sengwalwa sa tlaleletšo seo se utilwego le .visually-hidden
sehlopha.
Go lebanya
Ka nako ye nngwe diklase tša diteng di ka se dirišwe ka lebaka la go kgethegile ga mokgethi yo mongwe. Maemong a mangwe, tharollo ye e lekanego ke go phuthela diteng tša elemente ya gago ka elemente ya <div>
semantiki goba go feta ka sehlopha seo o se nyakago.
Sass
Go tlaleletša go mošomo wo o latelago wa Sass, nagana ka go bala ka ga dithoto tša rena tša tlwaelo tša CSS tšeo di akareditšwego (aka diphetogo tša CSS) bakeng sa mebala le tše dingwe.
Diphetogo
Bontši bja color
didirišwa di tšweletšwa ke mebala ya rena ya sehlogo, yeo e abetšwego gape go tšwa go diphetogo tša rena tša phalete ya mebala ya kakaretšo.
$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;
Mebala ya sekala sa bohlokwa le yona e a hwetšagala, eupša go šomišwa fela sehlopha se senyenyane go tšweletša didirišwa dife goba dife.
$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;
Mmapa
Mebala ya sehlogo e gona e bewa ka gare ga mmapa wa Sass gore re kgone go loop godimo ga yona go tšweletša didirišwa tša rena, diphetoši tša dikarolo, le tše dingwe.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Mebala ya greyscale le yona e hwetšagala bjalo ka mmapa wa Sass. Mmapa wo ga o šomišwe go tšweletša didirišwa le ge e le dife.
$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 ya Didirišwa
Didirišwa tša mebala di tsebagaditšwe ka go API ya rena ya didirišwa ka scss/_utilities.scss
. Ithute kamoo o ka dirišago API ya didirišwa.
"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,
)
)
),