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>

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.

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 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
);

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