Slaan oor na hoofinhoud Slaan oor na dokumentnavigasie
Check
in English

Kleure

Dra betekenis deur colormet 'n handvol kleurnutsklasse. Sluit ook ondersteuning vir stileringskakels met sweeftoestande in.

Kleure

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

.teks-primêr

.teks-sekondêr

.teks-sukses

.teks-gevaar

.teks-waarskuwing

.teks-inligting

.teks-lig

.teks-donker

.teks-liggaam

.teks gedemp

.teks-wit

.teks-swart-50

.teks-wit-50

html
<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>
Afkeuring: Met die byvoeging van .text-opacity-*nutsprogramme en CSS-veranderlikes vir tekshulpmiddels, .text-black-50en .text-white-50word vanaf v5.1.0 afgekeur. Hulle sal verwyder word in v6.0.0.
Dra betekenis aan ondersteunende tegnologieë oor

Die gebruik van kleur om betekenis toe te voeg, verskaf slegs 'n visuele aanduiding, wat nie aan gebruikers van ondersteunende tegnologieë – soos skermlesers – oorgedra sal word nie. Maak seker dat inligting wat deur die kleur aangedui word óf duidelik uit die inhoud self (bv. die sigbare teks), óf op alternatiewe wyse ingesluit word, soos bykomende teks wat by die .visually-hiddenklas versteek is.

Ondeursigtigheid

Bygevoeg in v5.1.0

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.

Dit is standaard primêre teks
Dit is primêre teks van 50% ondeursigtigheid
html
<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:

Dit is standaard primêre teks
Dit is 75% ondeursigtigheid primêre teks
Dit is primêre teks van 50% ondeursigtigheid
Dit is primêre teks van 25% ondeursigtigheid
html
<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
      )
    ),