Colors

Colors

Pera mavara nemavara ekushandisa. Kana iwe uchida kupendesa zvinongedzo, unogona kushandisa .link-*makirasi ekubatsira ane :hoveruye :focusanoti.

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

Opacity

Kubva pav5.1.0, mavara emavara ekushandisa anogadzirwa neSass vachishandisa CSS zvinosiyana. Izvi zvinobvumira kuti-chaiyo-nguva ruvara shanduko pasina kuunganidzwa uye ine simba alpha transparency shanduko.

Zvinoshanda sei

Funga nezvekushandisa kwedu kwekutanga .text-primary.

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

Isu tinoshandisa RGB vhezheni yedu --bs-primary(ine kukosha kwe 13, 110, 253) CSS chinja uye yakanamatira yechipiri CSS chinja, --bs-text-opacity, yealpha transparency (ine default value 1thanks kune yemunharaunda CSS variable). Izvi zvinoreva kuti chero nguva yaunoshandisa .text-primaryikozvino, yako computed colorkukosha ndeye rgba(13, 110, 253, 1). Iyo yemuno CSS inochinja mukati mekirasi yega .text-*yega inodzivirira nyaya dzenhaka kuitira kuti maturu ezvishandiso asangove neakagadziridzwa alpha pachena.

Muenzaniso

Kuti uchinje iyo opacity, pfuura --bs-text-opacitykuburikidza nemaitiro echinyakare kana inline masitaera.

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

Kana, sarudza kubva kune chero .text-opacitychezvishandiso:

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

Zvakananga

Dzimwe nguva makirasi emamiriro ezvinhu haagone kushandiswa nekuda kwekutsanangurwa kweimwe sarudzo. Mune zvimwe zviitiko, yakakwana workaround ndeye kuputira zvirimo zvechinhu chako mune <div>kana kupfuura semantic chinhu nekirasi yaunoda.

Sass

Pamusoro peiyo inotevera Sass mashandiro, funga kuverenga nezve yedu inosanganisirwa CSS tsika zvivakwa (aka CSS zvinosiyana) zvemavara nezvimwe.

Variables

Zvishandiso zvakawanda colorzvinogadzirwa nemavara edingindira redu, anopihwazve kubva kune yedu generic color palette akasiyana.

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

Grayscale mavara anowanikwawo, asi chete subset inoshandiswa kugadzira chero zvinoshandiswa.

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

Map

Theme mavara anozoiswa mumepu yeSass kuti isu tigone kutenderera pamusoro pawo kuti tigadzire zvekushandisa, zvikamu zvinogadzirisa, nezvimwe.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Grayscale mavara anowanikwawo semepu yeSass. Mepu iyi haishandiswe kugadzira chero chekushandisa.

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

RGB mavara anogadzirwa kubva kune yakaparadzana Sass mepu:

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

Uye mavara opacities anovaka pane izvo nemepu yavo inopedzwa nezvishandiso API:

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

Purogiramu inonzi Utilities

Zvishandiso zvemavara zvinoziviswa muzvishandiso zvedu API mu scss/_utilities.scss. Dzidza mashandisiro ezvishandiso API.

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