Culori

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.

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

Opacitate

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

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

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