Farben
Vermitteln Sie Bedeutung durch Farbe mit einer Handvoll Farbgebrauchsklassen. Beinhaltet auch Unterstützung für das Stylen von Links mit Hover-Zuständen.
Farbe
.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
Kontextuelle Textklassen funktionieren auch gut bei Ankern mit den bereitgestellten Schwebe- und Fokuszuständen. Beachten Sie, dass die .text-white
and .text-muted
-Klasse kein zusätzliches Link-Styling außer dem Unterstrich hat.
Hintergrundfarbe
Ähnlich wie bei den kontextbezogenen Textfarbklassen können Sie den Hintergrund eines Elements ganz einfach auf eine beliebige kontextbezogene Klasse festlegen. Ankerkomponenten werden beim Hover dunkler, genau wie die Textklassen. Hintergrunddienstprogramme werden nicht festgelegtcolor
, daher werden Sie in einigen Fällen .text-*
Dienstprogramme verwenden wollen.
Hintergrundverlauf
Wenn $enable-gradients
festgelegt ist true
(Standard ist false
), können Sie .bg-gradient-
Hilfsklassen verwenden. Erfahren Sie mehr über unsere Sass-Optionen , um diese Klassen und mehr zu aktivieren.
.bg-gradient-primary
.bg-gradient-secondary
.bg-gradient-success
.bg-gradient-danger
.bg-gradient-warning
.bg-gradient-info
.bg-gradient-light
.bg-gradient-dark
Umgang mit Besonderheiten
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>
mit der Klasse einzuschließen.
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 .sr-only
Klasse verborgen ist.