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>
.text-opacity-*
huduma na vigeu vya CSS kwa huduma za maandishi,
.text-black-50
na
.text-white-50
huacha kutumika kama v5.1.0. Zitaondolewa katika v6.0.0.
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.
Uwazi
Imeongezwa katika v5.1.0
Kufikia v5.1.0, huduma za rangi ya maandishi huzalishwa kwa Sass kwa kutumia vigeu vya CSS. Hii inaruhusu mabadiliko ya rangi ya wakati halisi bila mkusanyiko na mabadiliko ya uwazi ya alpha.
Inavyofanya kazi
Zingatia .text-primary
matumizi yetu chaguomsingi.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Tunatumia toleo la RGB letu --bs-primary
(pamoja na thamani ya 13, 110, 253
) Kigeuzi cha CSS na kuambatisha kigezo cha pili cha CSS, --bs-text-opacity
, kwa uwazi wa alpha (pamoja na thamani chaguo-msingi 1
shukrani kwa utofauti wa ndani wa CSS). Hiyo inamaanisha wakati wowote unapotumia .text-primary
sasa, color
thamani yako iliyokokotwa ni rgba(13, 110, 253, 1)
. Tofauti ya ndani ya CSS ndani ya kila .text-*
darasa huepuka maswala ya urithi ili hali zilizoorodheshwa za huduma zisiwe na uwazi wa alpha uliorekebishwa.
Mfano
Ili kubadilisha uwazi huo, batilisha --bs-text-opacity
kupitia mitindo maalum au mitindo ya ndani.
<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>
Au, chagua kutoka kwa .text-opacity
huduma zozote:
<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>
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 (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
);
Rangi za RGB hutolewa kutoka kwa ramani tofauti ya Sass:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Na opacities za rangi hujengwa juu ya hiyo na ramani yao wenyewe ambayo hutumiwa na API ya huduma:
$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 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,
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
)
),