Verfügbare Textfarbklassen in Bootstrap

119

Ich entwickle eine Anmeldeseite, indem ich Text als Titel in die Navigationsleiste einfüge. Ich möchte diesen Texten verschiedene Farben geben. Zu diesem Zweck verwende ich eine separate CSS-Datei, möchte dies jedoch mithilfe der CSS-Datei von Bootstrap tun.

Kann jemand die verfügbaren Farbklassen in Bootstrap auflisten?

css twitter-bootstrap twitter-bootstrap-3 bootstrap-4 Fidel Castro
quelle
3
Bootstrap verwendet eine Farbe #333333für die Textfarbe.
Bindiya Patoliya
es allein nur das benutzen?
Fidel Castro
Sie können jedoch unterschiedliche Tags verwenden.
Bindiya Patoliya
Kannst du das bitte erklären oder den Link setzen, wenn möglich
Fidel Castro

Antworten:

195

Die Bootstrap - 3 - Dokumentation listet diese unter Hilfsklassen: Muted, Primary, Success, Info, Warning, Danger.

Die Bootstrap - 4 - Dokumentation listet diese unter Dienstprogramme -> Farbe und mehr Optionen: primary, secondary, success, danger, warning, info, light, dark, muted, white.

Um darauf zuzugreifen, benutzt man die class text-[class-name]

Wenn ich zum Beispiel blauen Text möchte, würde ich so etwas tun:

<p class="text-primary">This text is the blue primary color.</p>

Dies ist keine große Auswahl, aber es sind einige.

Ted Delezene
quelle
2
Ich würde zögern zu sagen, wenn Sie "blauen Text wollen". Diese Klasse sollte verwendet werden, wenn Sie die Primärfarbe anwenden möchten, die standardmäßig blau ist. Wenn sich dies $primaryändert, ändert sich auch Ihr formal blauer Text. Wenn Sie sicherstellen möchten, dass Sie immer blauen Text haben, sollten Sie den Text auf den gewünschten Blauton einstellen.
Jacob
7

Der Text in der Navigationsleiste wird normalerweise mit einer der beiden folgenden CSS-Klassen in der bootstrap.cssDatei gefärbt .

Erstens wird bei Verwendung einer Standardnavigationsleiste (der grauen) die .navbar-defaultKlasse verwendet und der Text wird dunkelgrau gefärbt .

.navbar-default .navbar-text {
  color: #777;
}

Die andere ist bei Verwendung einer inversen Navigationsleiste (die schwarze), der Text ist grau60 gefärbt .

.navbar-inverse .navbar-text {
  color: #999;
}

So können Sie die Farbe nach Belieben ändern. Ich würde Ihnen jedoch empfehlen, eine separate CSS-Datei zu verwenden, um sie zu ändern.

HINWEIS: Sie können auch den von im Abschnitt bereitgestellten Customizer verwenden .Twitter BootstrapNavbar

lvarayut
quelle
6

Sie können Textklassen verwenden:

.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-muted
.text-white

Verwenden Sie bei Bedarf Textklassen in jedem Tag.

<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-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>

Sie können Ihre eigenen Klassen hinzufügen oder die oben genannten Klassen nach Bedarf ändern.

Dipendra Ghatal
quelle
0

In Bootstrap 4 (in neueren Versionen hinzugefügt) gibt es nur wenige weitere Klassen, die in anderen Antworten nicht erwähnt werden.

.text-black-50und .text-white-50sind zu 50% transparent.

.text-body {
  color: #212529 !important;
}

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

/*DEMO*/
p{padding:.5rem}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<p class="text-body">.text-body</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
Erweitern Sie das Snippet

Jakub Muda
quelle