Farben

Vermitteln Sie die Bedeutung colormit einer Handvoll Farbgebrauchsklassen. Beinhaltet auch Unterstützung für das Stylen von Links mit Hover-Zuständen.

Auf dieser Seite

Farben

Färben Sie Text mit Farbdienstprogrammen ein. Wenn Sie Links einfärben möchten, können Sie die .link-*Hilfsklassen verwenden, die über :hoverund :focus-Zustände verfügen.

.text-primär

.text-sekundär

.text-Erfolg

.text-Gefahr

.text-Warnung

.text-info

.text-light

.text-dunkel

.text-body

.text-stummgeschaltet

.text-weiß

.text-schwarz-50

.text-weiß-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>

Veraltet: Mit dem Hinzufügen von .text-opacity-*Dienstprogrammen und CSS-Variablen für Text-Dienstprogramme .text-black-50und .text-white-50ab v5.1.0 veraltet. Sie werden in v6.0.0 entfernt.

Bedeutung von Hilfstechnologien vermitteln

Die Verwendung von Farbe, um Bedeutung hinzuzufügen, bietet nur einen visuellen Hinweis, der Benutzern von Hilfstechnologien – wie z. B. Bildschirmlesegeräten – nicht vermittelt wird. Stellen Sie sicher, dass die durch die Farbe gekennzeichneten Informationen entweder aus dem Inhalt selbst ersichtlich sind (z. B. der sichtbare Text) oder durch alternative Mittel enthalten sind, z. B. durch zusätzlichen Text, der mit der .visually-hiddenKlasse verborgen ist.

Opazität

Hinzugefügt in v5.1.0

Ab v5.1.0 werden Dienstprogramme für die Textfarbe mit Sass unter Verwendung von CSS-Variablen generiert. Dies ermöglicht Echtzeit-Farbänderungen ohne Kompilierung und dynamische Alpha-Transparenzänderungen.

Wie es funktioniert

Betrachten Sie unser Standarddienstprogramm .text-primary.

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

Wir verwenden eine RGB-Version unserer --bs-primary(mit dem Wert von 13, 110, 253) CSS-Variablen und hängen eine zweite CSS-Variable, --bs-text-opacity, für die Alpha-Transparenz an (mit einem Standardwert 1dank einer lokalen CSS-Variablen). Das bedeutet , dass .text-primaryIhr berechneter colorWert immer dann ist , wenn Sie now verwenden rgba(13, 110, 253, 1). Die lokale CSS-Variable in jeder .text-*Klasse vermeidet Vererbungsprobleme, sodass verschachtelte Instanzen der Dienstprogramme nicht automatisch eine modifizierte Alpha-Transparenz haben.

Beispiel

Um diese Deckkraft zu ändern, überschreiben --bs-text-opacitySie sie mit benutzerdefinierten Stilen oder Inline-Stilen.

Dies ist der standardmäßige Primärtext

Dies ist Primärtext mit 50 % Deckkraft

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

Oder wählen Sie eines der .text-opacityDienstprogramme aus:

Dies ist der standardmäßige Primärtext

Dies ist Primärtext mit 75 % Deckkraft

Dies ist Primärtext mit 50 % Deckkraft

Dies ist Primärtext mit 25 % Deckkraft

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

Spezifität

Manchmal können kontextbezogene Klassen aufgrund der Besonderheit eines anderen Selektors nicht angewendet werden. In einigen Fällen besteht eine ausreichende Problemumgehung darin, den Inhalt Ihres Elements in ein <div>oder mehr semantisches Element mit der gewünschten Klasse einzuschließen.

Sass

Zusätzlich zu den folgenden Sass-Funktionen sollten Sie sich über unsere enthaltenen benutzerdefinierten CSS-Eigenschaften (auch bekannt als CSS-Variablen) für Farben und mehr informieren.

Variablen

Die meisten colorDienstprogramme werden von unseren Themenfarben generiert, die von unseren generischen Farbpalettenvariablen neu zugewiesen werden.

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

Graustufenfarben sind ebenfalls verfügbar, aber nur eine Teilmenge wird zum Generieren von Hilfsprogrammen verwendet.

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

Karte

Themenfarben werden dann in eine Sass-Karte eingefügt, damit wir sie durchlaufen können, um unsere Dienstprogramme, Komponentenmodifikatoren und mehr zu generieren.

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

Graustufenfarben sind auch als Sass-Map verfügbar. Diese Zuordnung wird nicht zum Generieren von Versorgungsunternehmen verwendet.

$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-Farben werden aus einer separaten Sass-Karte generiert:

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

Darauf bauen Farbopazitäten mit ihrer eigenen Karte auf, die von der Utilities-API verwendet wird:

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

Dienstprogramme-API

Farbdienstprogramme werden in unserer Hilfsprogramm-API in deklariert scss/_utilities.scss. Erfahren Sie, wie Sie die Utilities-API verwenden.

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