Dostępne klasy kolorów tekstu w Bootstrap

119

Opracowuję stronę rejestracji, umieszczając tekst jako tytuł na pasku nawigacyjnym. Chcę nadać tym tekstom różne kolory. W tym celu używam osobnego pliku CSS, ale chcę to zrobić za pomocą pliku CSS programu bootstrap.

Czy ktoś może wymienić dostępne klasy kolorów w bootstrapie?

— Fidel Castro
źródło

3

Bootstrap używa jednego koloru #333333dla koloru tekstu.

— Bindiya Patoliya

sam używać tylko tego?

— fidel castro

Ale możesz użyć innego dla innego tagu.

— Bindiya Patoliya

Czy mógłbyś to wyjaśnić lub umieścić link, jeśli to możliwe

— fidel castro

195

W bootstrap 3 Dokumentacja listy to pod klasach pomocniczych: Muted, Primary, Success, Info, Warning, Danger.

W bootstrap 4 Dokumentacja listy to pod narzędzi -> kolor, i ma więcej opcji: primary, secondary, success, danger, warning, info, light, dark, muted, white.

Aby uzyskać do nich dostęp, należy skorzystać z class text-[class-name]

Tak więc, jeśli chcę na przykład niebieski tekst, zrobiłbym coś takiego:

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

To nie jest ogromna liczba wyborów, ale jest kilka.

— Ted Delezene
źródło

2

Wahałbym się, czy „chcesz niebieski tekst”. Tej klasy należy używać, gdy chcesz zastosować kolor podstawowy, którym domyślnie jest niebieski. Ale jeśli się $primaryzmieni, zmieni się również twój formalnie niebieski tekst. Jeśli chcesz mieć pewność, że zawsze masz niebieski tekst, ustaw tekst na dowolny odcień niebieskiego, jaki chcesz.

— jacroe

7

Tekst na pasku nawigacji jest zwykle pokolorowany przy użyciu jednej z dwóch następujących klas css w bootstrap.csspliku.

Po pierwsze, w przypadku korzystania z domyślnego paska nawigacyjnego (szarego), .navbar-defaultzostanie użyta klasa, a tekst będzie koloru ciemnoszarego .

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

Drugi to w przypadku korzystania z odwrotnego paska nawigacyjnego (czarnego), tekst ma kolor szary60 .

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

Możesz więc dowolnie zmieniać jego kolor. Jednak zalecałbym użycie osobnego pliku css, aby to zmienić.

UWAGA: możesz również skorzystać z dostosowania udostępnionego przez Twitter Bootstrap, w Navbarsekcji.

— lvarayut
źródło

6

Możesz użyć klas tekstu:

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

w razie potrzeby użyj klas tekstu w dowolnym tagu.

<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>

Możesz dodać własne klasy lub zmodyfikować powyższe klasy jako swoje wymaganie.

— Dipendra Ghatal
źródło

0

W Bootstrap 4 jest kilka innych klas (dodanych w ostatnich wersjach) nie zostały wymienione w innych odpowiedziach.

.text-black-50i .text-white-50są przezroczyste w 50%.

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

Rozwiń fragment

— Jakub Muda
źródło