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?

css twitter-bootstrap twitter-bootstrap-3 bootstrap-4 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

Odpowiedzi:

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