Rangi

Eleza maana kwa colorkutumia madarasa machache ya matumizi ya rangi. Inajumuisha usaidizi wa viungo vya kutengeneza mitindo na hali ya kuelea, pia.

Katika ukurasa huu

Rangi

Rangi maandishi kwa kutumia huduma za rangi. Ikiwa unataka kupaka rangi viungo, unaweza kutumia .link-*madarasa ya wasaidizi ambayo yana :hoverna :focusmajimbo.

.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>

Kuacha kutumia huduma: Pamoja na nyongeza ya .text-opacity-*huduma na vigeu vya CSS kwa huduma za maandishi, .text-black-50na .text-white-50huacha 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-hiddendarasa.

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-primarymatumizi 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 1shukrani kwa utofauti wa ndani wa CSS). Hiyo inamaanisha wakati wowote unapotumia .text-primarysasa, colorthamani 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-opacitykupitia mitindo maalum au mitindo ya ndani.

Haya ni maandishi msingi chaguomsingi

Haya ni maandishi ya msingi ya 50% ya kutoweka

<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-opacityhuduma zozote:

Haya ni maandishi msingi chaguomsingi

Haya ni maandishi ya msingi ya 75% ya kutoweka

Haya ni maandishi ya msingi ya 50% ya kutoweka

Haya ni maandishi ya msingi ya 25% ya kutoweka

<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 colorhutolewa 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
      )
    ),