Farben
Vermitteln Sie die Bedeutung color
mit einer Handvoll Farbgebrauchsklassen. Beinhaltet auch Unterstützung für das Stylen von Links mit Hover-Zuständen.
Farben
Färben Sie Text mit Farbdienstprogrammen ein. Wenn Sie Links einfärben möchten, können Sie die .link-*
Hilfsklassen verwenden, die über :hover
und :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>
.text-opacity-*
Dienstprogrammen und CSS-Variablen für Text-Dienstprogramme
.text-black-50
und
.text-white-50
ab 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-hidden
Klasse 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 1
dank einer lokalen CSS-Variablen). Das bedeutet , dass .text-primary
Ihr berechneter color
Wert 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-opacity
Sie sie mit benutzerdefinierten Stilen oder Inline-Stilen.
<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-opacity
Dienstprogramme aus:
<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 color
Dienstprogramme 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
)
),