Rangi
Eleza maana kwa color
kutumia madarasa machache ya matumizi ya rangi. Inajumuisha usaidizi wa viungo vya kutengeneza mitindo na hali ya kuelea, pia.
Rangi
Rangi maandishi kwa kutumia huduma za rangi. Ikiwa unataka kupaka rangi viungo, unaweza kutumia .link-*
madarasa ya wasaidizi ambayo yana :hover
na :focus
majimbo.
.maandishi-msingi
.maandishi-sekondari
.mafanikio-ya-maandishi
.hatari-maandishi
.onyo la maandishi
.maelezo-ya maandishi
.mwanga wa maandishi
.maandishi-giza
.mwili wa maandishi
.maandishi-yamezimwa
.maandishi-nyeupe
.maandishi-nyeusi-50
.maandishi-nyeupe-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>
Kuwasilisha maana kwa teknolojia za usaidizi
Kutumia rangi ili kuongeza maana hutoa tu kielelezo cha kuona, ambacho hakitawasilishwa kwa watumiaji wa teknolojia saidizi - kama vile visoma skrini. Hakikisha kwamba maelezo yanayoashiriwa na rangi ni dhahiri kutoka kwa maudhui yenyewe (km maandishi yanayoonekana), au yanajumuishwa kupitia njia mbadala, kama vile maandishi ya ziada yaliyofichwa na .visually-hidden
darasa.
Umaalumu
Wakati mwingine madarasa ya muktadha hayawezi kutumika kwa sababu ya umaalum wa kiteuzi kingine. Katika hali zingine, suluhisho la kutosha ni kufunga yaliyomo kwenye kipengee chako katika kipengele cha <div>
kisemantiki au zaidi na darasa unalotaka.
Sass
Kando na utendakazi ufuatao wa Sass, zingatia kusoma kuhusu sifa zetu maalum za CSS zilizojumuishwa zilizojumuishwa (vigeu vya CSS) kwa rangi na zaidi.
Vigezo
Huduma nyingi color
hutolewa na rangi zetu za mandhari, zilizokabidhiwa upya kutoka kwa vigeu vyetu vya rangi ya jumla.
$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;
Rangi za rangi ya kijivu zinapatikana pia, lakini ni sehemu ndogo tu inayotumiwa kutoa huduma zozote.
$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;
Ramani
Kisha rangi za mandhari huwekwa kwenye ramani ya Sass ili tuweze kuzipitia ili kuzalisha huduma zetu, virekebishaji vipengele na zaidi.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Rangi za kijivu zinapatikana pia kama ramani ya Sass. Ramani hii haitumiwi kutengeneza huduma zozote.
$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 Huduma
Huduma za rangi zinatangazwa katika API ya huduma zetu katika scss/_utilities.scss
. Jifunze jinsi ya kutumia API ya huduma.
"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,
)
)
),