Kleure

Kleure

Kleur teks in met kleurhulpmiddels. As jy skakels wil inkleur, kan jy die .link-*helperklasse gebruik wat :hoveren :focusstate het.

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

Ondeursigtigheid

Vanaf v5.1.0 word tekskleurhulpmiddels met Sass gegenereer deur CSS-veranderlikes te gebruik. Dit maak voorsiening vir intydse kleurveranderinge sonder samestelling en dinamiese alfa-deursigtigheidsveranderinge.

Hoe dit werk

Oorweeg ons verstekhulpmiddel .text-primary.

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

Ons gebruik 'n RGB-weergawe van ons --bs-primary(met die waarde van 13, 110, 253) CSS-veranderlike en het 'n tweede CSS-veranderlike, --bs-text-opacity, aangeheg vir die alfa-deursigtigheid (met 'n verstekwaarde 1danksy 'n plaaslike CSS-veranderlike). Dit beteken dat enige tyd wat jy .text-primarynou gebruik, jou berekende colorwaarde rgba(13, 110, 253, 1). Die plaaslike CSS-veranderlike binne elke .text-*klas vermy oorerwingskwessies, so geneste gevalle van die nutsprogramme het nie outomaties 'n gewysigde alfa-deursigtigheid nie.

Voorbeeld

Om daardie ondeursigtigheid te verander, vervang --bs-text-opacityvia gepasmaakte style of inlynstyle.

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

Of kies uit enige van die .text-opacitynutsprogramme:

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

Spesifisiteit

Soms kan kontekstuele klasse nie toegepas word nie as gevolg van die spesifisiteit van 'n ander keurder. In sommige gevalle is 'n voldoende oplossing om jou element se inhoud in 'n <div>of meer semantiese element met die verlangde klas toe te draai.

Sass

Benewens die volgende Sass-funksionaliteit, oorweeg dit om te lees oor ons ingesluit CSS-pasgemaakte eienskappe (ook bekend as CSS-veranderlikes) vir kleure en meer.

Veranderlikes

Die meeste colornutsprogramme word gegenereer deur ons temakleure, hertoegewys vanaf ons generiese kleurpaletveranderlikes.

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

Grysskaalkleure is ook beskikbaar, maar slegs 'n subset word gebruik om enige nutsprogramme te genereer.

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

Kaart

Temakleure word dan in 'n Sass-kaart geplaas sodat ons daaroor kan loop om ons nutsprogramme, komponent-wysigers en meer te genereer.

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

Grysskaalkleure is ook beskikbaar as 'n Sass-kaart. Hierdie kaart word nie gebruik om enige hulpprogramme te genereer nie.

$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-kleure word gegenereer vanaf 'n aparte Sass-kaart:

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

En kleurondeursigtighede bou daarop voort met hul eie kaart wat deur die utilities API verbruik word:

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

Utilities API

Kleur nutsprogramme word verklaar in ons nutsprogramme API in scss/_utilities.scss. Leer hoe om die utilities API te gebruik.

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