wake-up-neo.com

Verfügbare Textfarbklassen in Bootstrap

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, aber ich möchte dies mit der CSS-Datei von bootstrap tun.

Kann jemand die verfügbaren Farbklassen in Bootstrap auflisten?

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4
115
fidel castro

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

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

Um darauf zuzugreifen, benutzt man den classtext-[class-name]

Wenn ich also beispielsweise blauen Text möchte, würde ich Folgendes tun:

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

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

190
Ted Delezene

Der Text in der Navigationsleiste wird normalerweise mithilfe einer der beiden folgenden CSS-Klassen in der Datei bootstrap.css Eingefärbt.

Erstens wird im Fall der Verwendung einer Standardnavigationsleiste (die graue) die Klasse .navbar-default Verwendet und der Text wird als dunkelgra eingefärbt.

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

Bei der anderen Option wird bei Verwendung einer inversen Navigationsleiste (der schwarzen) der Text als gray6 eingefärbt.

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

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

HINWEIS: Sie können auch das Anpassungsprogramm verwenden, das von Twitter Bootstrap Im Abschnitt Navbar bereitgestellt wird.

6
lvarayut

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 beliebigen Tags.

<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 obigen Klassen nach Bedarf ändern.

4
Dipendra Ghatal