Treci la conținutul principal Treceți la navigarea documentelor
Check
in English

Culori

Transmiteți sens prin intermediul colorunor clase de utilitate de culoare. Include și suport pentru link-uri de stil cu stări de hover.

Culori

Colorați textul cu utilitare de culoare. Dacă doriți să colorați legăturile, puteți utiliza .link-*clasele de ajutor care au :hoverși :focusstate.

.text-primar

.text-secundar

.text-succes

.text-pericol

.text-avertisment

.text-info

.text-lumină

.text-întuneric

.text-corp

.text dezactivat

.text-alb

.text-negru-50

.text-alb-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>
Depreciere: cu adăugarea de .text-opacity-*utilități și variabile CSS pentru utilitare de text .text-black-50și .text-white-50sunt depreciate începând cu v5.1.0. Vor fi eliminate în v6.0.0.
Transmiterea sensului tehnologiilor de asistență

Folosirea culorii pentru a adăuga sens oferă doar o indicație vizuală, care nu va fi transmisă utilizatorilor de tehnologii de asistență, cum ar fi cititoarele de ecran. Asigurați-vă că informațiile notate de culoare sunt fie evidente din conținutul în sine (de exemplu, textul vizibil), fie sunt incluse prin mijloace alternative, cum ar fi textul suplimentar ascuns cu .visually-hiddenclasa.

Opacitate

Adăugat în v5.1.0

Începând cu v5.1.0, utilitarele pentru culoarea textului sunt generate cu Sass folosind variabile CSS. Acest lucru permite schimbări de culoare în timp real fără compilare și modificări dinamice ale transparenței alfa.

Cum functioneaza

.text-primaryLuați în considerare utilitarul nostru implicit .

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

Folosim o versiune RGB a variabilei noastre CSS --bs-primary(cu valoarea 13, 110, 253) și atașăm o a doua variabilă CSS, --bs-text-opacity, pentru transparența alfa (cu o valoare implicită 1datorită unei variabile CSS locale). Aceasta înseamnă că, oricând folosiți .text-primaryacum, valoarea dvs. calculată coloreste rgba(13, 110, 253, 1). Variabila CSS locală din interiorul fiecărei .text-*clase evită problemele de moștenire, astfel încât instanțe imbricate ale utilităților nu au automat o transparență alfa modificată.

Exemplu

Pentru a schimba opacitatea respectivă, înlocuiți --bs-text-opacityprin stiluri personalizate sau stiluri inline.

Acesta este textul principal implicit
Acesta este textul principal cu o opacitate de 50%.
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>

Sau alegeți din oricare dintre .text-opacityutilități:

Acesta este textul principal implicit
Acesta este textul principal cu o opacitate de 75%.
Acesta este textul principal cu o opacitate de 50%.
Acesta este textul principal cu o opacitate de 25%.
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>

Specificitate

Uneori, clasele contextuale nu pot fi aplicate din cauza specificului altui selector. În unele cazuri, o soluție suficientă este să împachetați conținutul elementului într-un <div>sau mai multe elemente semantice cu clasa dorită.

Sass

Pe lângă următoarea funcționalitate Sass, luați în considerare să citiți despre proprietățile noastre personalizate CSS incluse (alias variabilele CSS) pentru culori și multe altele.

Variabile

Cele mai multe colorutilități sunt generate de culorile temei noastre, reatribuite din variabilele noastre generice ale paletei de culori.

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

Culorile în tonuri de gri sunt, de asemenea, disponibile, dar numai un subset este folosit pentru a genera orice utilități.

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

Hartă

Culorile temei sunt apoi puse într-o hartă Sass, astfel încât să putem trece peste ele pentru a ne genera utilitățile, modificatorii de componente și multe altele.

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

Culorile în tonuri de gri sunt disponibile și ca hartă Sass. Această hartă nu este folosită pentru a genera utilitare.

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

Culorile RGB sunt generate dintr-o hartă Sass separată:

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

Și opacitățile de culoare se bazează pe asta cu propria lor hartă care este consumată de API-ul utilitare:

$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

Utilitățile de culoare sunt declarate în API-ul nostru de utilitare în scss/_utilities.scss. Aflați cum să utilizați API-ul utilitare.

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