Classi di colore del testo disponibili in Bootstrap

119

Sto sviluppando una pagina di registrazione, inserendo del testo come titolo nella barra di navigazione. Voglio dare a quei testi colori diversi. A questo scopo sto usando un file CSS separato, ma voglio farlo usando il file CSS di bootstrap.

Qualcuno può elencare le classi di colore disponibili in bootstrap?

— Fidel Castro
fonte

3

Bootstrap utilizza un colore #333333per il colore del testo.

— Bindiya Patoliya

da solo usa solo questo?

— fidel castro

Ma puoi usare diversi per tag diversi.

— Bindiya Patoliya

puoi spiegare questo o inserire il link se possibile

— fidel castro

195

I bootstrap 3 documentazione liste questo sotto classi di supporto: Muted, Primary, Success, Info, Warning, Danger.

I bootstrap 4 documentazione elenchi questo sotto utilities -> di colore, e ha più opzioni: primary, secondary, success, danger, warning, info, light, dark, muted, white.

Per accedervi si utilizza il class text-[class-name]

Quindi, se voglio il testo blu, ad esempio, farei qualcosa del genere:

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

Non è un numero enorme di scelte, ma alcune.

— Ted Delezene
fonte

2

Esiterei a dire se "vuoi il testo blu". Quella classe dovrebbe essere usata quando vuoi applicare il colore primario, che per impostazione predefinita è il blu. Ma se $primarycambia, cambierà anche il tuo testo formalmente blu. Se vuoi assicurarti di avere sempre il testo blu, dovresti impostare il testo su qualsiasi tonalità di blu tu voglia che sia.

— jacroe,

7

Il testo sulla barra di navigazione è normalmente colorato utilizzando una delle due seguenti classi CSS nel bootstrap.cssfile.

Innanzitutto, in caso di utilizzo di una barra di navigazione predefinita (quella grigia), .navbar-defaultverrà utilizzata la classe e il testo verrà colorato in grigio scuro .

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

L'altro è in caso di utilizzo di una barra di navigazione inversa (quella nera), il testo è colorato in grigio60 .

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

Quindi, puoi cambiare il suo colore come desideri. Tuttavia, ti consiglio di utilizzare un file CSS separato per modificarlo.

NOTA: puoi anche utilizzare il customizer fornito da Twitter Bootstrap, nella Navbarsezione.

— lvarayut
fonte

6

Puoi usare classi di testo:

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

utilizzare classi di testo in qualsiasi tag dove necessario.

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

Puoi aggiungere le tue classi o modificare le classi sopra come requisito.

— Dipendra Ghatal
fonte

0

Ci sono poche altre classi in Bootstrap 4 (aggiunte nelle versioni recenti) non menzionate in altre risposte.

.text-black-50e .text-white-50sono trasparenti al 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>

Espandi lo snippet

— Jakub Muda
fonte