Mihlovo

Hundzuluxa nhlamuselo hi ku tirhisa colortitlilasi ti nga ri tingani ta vukorhokeri bya mihlovo. Ku katsa na nseketelo wa switayili swa swihlanganisi na swiyimo swa hover, na swona.

Eka tluka leri

Mihlovo

Endla mihlovo ya tsalwa hi switirhisiwa swa mihlovo. Loko u lava ku colorize swihlanganisi, u nga tirhisa .link-*titlilasi ta mupfuni leti nga na :hoverna ti :focusstates.

.tsalwa-xitsongwatsongwana

.tsalwa-xikondari

.ku humelela ka tsalwa

.khombo ra tsalwa

.xitsundzuxo xa tsalwa

.vuxokoxoko bya tsalwa

.tsalwa-ku vonakala

.tsalwa-munyama

.tsalwa-miri

.ku pfariwa hi tsalwa

.tsalwa-wo basa

.tsalwa-ntima-50

.tsalwa-xo basa-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>

Ku herisiwa: Hi ku engeteriwa ka .text-opacity-*switirhisiwa na swilo leswi cinca-cincaka swa CSS swa switirhisiwa swa matsalwa, .text-black-50naswona .text-white-50swi herisiwile ku sukela eka v5.1.0. Va ta susiwa eka v6.0.0.

Ku hundzisela nhlamuselo eka thekinoloji yo pfuneta

Ku tirhisa muvala ku engetela nhlamuselo swi nyika ntsena xikombiso xa xivono, lexi nga ta ka xi nga hundziseriwi eka vatirhisi va thekinoloji yo pfuneta – ku fana na swihlaya swa xikirini. Tiyisisa leswaku mahungu lama kombisiweke hi muvala ya le rivaleni eka nhundzu hi yoxe (xikombiso tsalwa leri vonakaka), kumbe ya katsiwile hi tindlela tin’wana, ku fana na tsalwa ro engetela leri fihliweke na .visually-hiddentlilasi.

Ku nga voni kahle

Ku engeteriwe eka v5.1.0

Ku sukela eka v5.1.0, switirhisiwa swa mihlovo ya matsalwa swi endliwa hi Sass hi ku tirhisa swilo leswi cinca-cincaka swa CSS. Leswi swi pfumelela ku cinca ka mihlovo ya nkarhi wa xiviri handle ka nhlengeleto na ku cinca ka ku vonakala ka alpha loku cinca-cincaka.

Ndlela leyi swi tirhaka ha yona

Anakanya hi .text-primaryxitirhisiwa xa hina xa ntolovelo.

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

Hi tirhisa RGB version ya hina --bs-primary(leyi nga na nkoka wa 13, 110, 253) CSS variable naswona hi namarhetile CSS variable ya vumbirhi, --bs-text-opacity, ya alpha transparency (leyi nga na default value 1hi khensa CSS variable ya laha kaya). Sweswo swi vula leswaku nkarhi wun’wana ni wun’wana lowu u wu tirhisaka .text-primarysweswi, ntikelo wa wena lowu hlayiweke colori rgba(13, 110, 253, 1). Xihlawulekisi xa CSS xa laha kaya endzeni ka .text-*tlilasi yin’wana na yin’wana xi papalata timhaka ta ndzhaka leswaku swikombiso leswi pfanganisiweke swa switirhisiwa a swi vi na ku vonakala ka alpha loku cinciweke hi ku tisungulela.

Xikombiso

Ku cinca opacity yoleyo, tlula --bs-text-opacityhi ku tirhisa switayele swa ntolovelo kumbe switayele swa le ndzeni ka layini.

Leri i tsalwa ra nkoka ra xiviri

Leri i tsalwa ra le henhla ra 50% opacity

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

Kumbe, hlawula eka yin’wana ni yin’wana ya .text-opacityswitirhisiwa:

Leri i tsalwa ra nkoka ra xiviri

Leri i tsalwa ra le henhla ra 75% opacity

Leri i tsalwa ra le henhla ra 50% opacity

Leri i tsalwa ra le henhla ra 25% opacity

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

Ku kongoma

Minkarhi yin’wana titlilasi ta xiyimo a ti nge tirhisiwi hikwalaho ka ku kongoma ka muhlawuri un’wana. Eka swiyimo swin’wana, ndlela leyi eneleke yo tshungula i ku phutsela nhundzu ya elemente ya wena eka elemente <div>kumbe ku tlula ya semantiki hi tlilasi leyi lavekaka.

Sass

Ku engetela eka ntirho wa Sass lowu landzelaka, anakanya hi ku hlaya hi swihlawulekisi swa hina swa ntolovelo swa CSS leswi katsiweke (aka swilo leswi cinca-cincaka swa CSS) swa mihlovo na swin’wana.

Swilo leswi cinca-cincaka

Switirhisiwa swo tala colorswi endliwa hi mihlovo ya hina ya nhlokomhaka, leyi averiweke nakambe ku suka eka swilo swa hina leswi cinca-cincaka swa phalete ya mihlovo ya xivumbeko xa le henhla.

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

Mihlovo ya greyscale na yona ya kumeka, kambe ku tirhisiwa ntsena ntlawa lowutsongo ku humesa switirhisiwa swihi na swihi.

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

Mepe

Mihlovo ya theme yi tlhela yi vekiwa eka mepe wa Sass leswaku hi ta kota ku loop ehenhla ka yona ku humesa switirhisiwa swa hina, swicinci swa swiphemu, na swin’wana.

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

Mihlovo ya greyscale yitlhela yi kumeka tani hi mepe wa Sass. Mepe lowu a wu tirhisiwi ku endla switirhisiwa swihi na swihi.

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

Mihlovo ya RGB yi endliwa ku suka eka mepe wa Sass lowu hambaneke:

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

Naswona ti-opacities ta mihlovo ti aka eka sweswo hi mepe wa tona lowu dyiwaka hi API ya switirhisiwa:

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

Switirhisiwa swa mihlovo swi tivisiwile eka switirhisiwa swa hina API hi scss/_utilities.scss. Dyondza ndlela yo tirhisa API ya switirhisiwa.

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