Farben
Vermitteln Sie Bedeutung durch Farbe mit einer Handvoll Farbgebrauchsklassen. Beinhaltet auch Unterstützung für das Stylen von Links mit Hover-Zuständen.
.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">.text-warning</p>
<p class="text-info">.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>Kontextuelle Textklassen funktionieren auch gut bei Ankern mit den bereitgestellten Schwebe- und Fokuszuständen. Beachten Sie, dass die .text-whiteand .text-muted-Klasse kein zusätzliches Link-Styling außer dem Unterstrich hat.
<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>Ä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.
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>Wenn $enable-gradientsauf true gesetzt ist, können Sie .bg-gradient-Utility-Klassen verwenden. Standardmäßig $enable-gradientsist deaktiviert und das Beispiel unten ist absichtlich unterbrochen. Dies geschieht für eine einfachere Anpassung ab dem Moment, in dem Sie mit der Verwendung von Bootstrap beginnen. Erfahren Sie mehr über unsere Sass-Optionen , um diese Klassen und mehr zu aktivieren.
<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>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-onlyKlasse verborgen ist.