Bootstrap5-Farben
Bootstrap 5 bietet einige aussagekräftige Farbklassen:.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body(Standardfarbe, Schwarz) und.text-light:
Beispiele
<div class="container">
<h2>Textfarben mit bestimmten Bedeutungen</h2>
<p class="text-muted">Gedämpfter Text.</p>
<p class="text-primary">Wichtiger Text.</p>
<p class="text-success">Erfolgstext.</p>
<p class="text-info">Infotext.</p>
<p class="text-warning">Warnungstext.</p>
<p class="text-danger">Gefahrtext.</p>
<p class="text-secondary">Sekundärer Text.</p>
<p class="text-dark">Dunkelgrauer Text.</p>
<p class="text-body">Standardfarbe, Schwarz.</p>
<p class="text-light">Hellgrauer Text (auf weißem Hintergrund schwer zu erkennen).</p>
<p class="text-white">Weißer Text (auf weißem Hintergrund schwer zu erkennen).</p>
</div>
Ausprobieren »
Sie können die Transparenz der Textfarbe auf 50% setzen, indem Sie die.text-black-50oder.text-white-50Klasse verwenden:
Beispiele
<p class="text-black-50">Schwarzer Text mit 50% Deckkraft, weißer Hintergrund.</p>
<p class="text-white-50 bg-dark">Weißer Text mit 50% Deckkraft, schwarzer Hintergrund.</p>
Ausprobieren »
In Links verwenden
Beispiele
<div class="container">
<h2>Textfarben</h2>
<p>Bewegen Sie die Maus über den Link.</p>
<a href="#" class="text-muted">Gedämpfter Link.</a>
<a href="#" class="text-primary">Primärer Link.</a>
<a href="#" class="text-success">Erfolgs-Link.</a>
<a href="#" class="text-info">Info-Link.</a>
<a href="#" class="text-warning">Warnungs-Link.</a>
<a href="#" class="text-danger">Gefahr-Link.</a>
<a href="#" class="text-secondary">Sekundärer Link.</a>
<a href="#" class="text-dark">Dunkelgrauer Link.</a>
<a href="#" class="text-light">Hellgrauer Link.</a>
</div>
Ausprobieren »
Hintergrundfarben
Die Klassen, die Hintergrundfarben bereitstellen, sind:.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkund.bg-light。
Beachten Sie, dass Hintergrundfarben nicht die Textfarbe festlegen. In einigen Beispielen müssen Sie sie zusammen mit der.text-*Klasse verwenden.
Beispiele
<div class="container">
<h2>Hintergrundfarbe</h2>
<p class="bg-primary text-white">Wichtige Hintergrundfarbe.</p>
<p class="bg-success text-white">Erfolgs-Hintergrundfarbe.</p>
<p class="bg-info text-white">Info-Hintergrundfarbe.</p>
<p class="bg-warning text-white">Warnungs-Hintergrundfarbe.</p>
<p class="bg-danger text-white">Gefahren-Hintergrundfarbe.</p>
<p class="bg-secondary text-white">Sekundäre Hintergrundfarbe.</p>
<p class="bg-dark text-white">Schwarze Hintergrundfarbe.</p>
<p class="bg-light text-dark">Hellgraue Hintergrundfarbe.</p>
</div>
Ausprobieren »