css - style - Clases de colores de texto disponibles en Bootstrap
estilos de texto css ejemplos (3)
Estoy desarrollando una página de registro, colocando texto como título en la barra de navegación. Quiero darle a esos textos diferentes colores. Para este propósito estoy usando un archivo CSS separado, pero quiero hacer esto usando el archivo CSS de bootstrap.
¿Alguien puede enumerar las clases de color disponibles en bootstrap?
El texto en la barra de navegación normalmente está coloreado mediante el uso de una de las dos clases de css siguientes en el archivo bootstrap.css .
En primer lugar, en caso de utilizar una barra de navegación predeterminada (la gris), se .navbar-default clase .navbar-default y el texto se coloreará en gris oscuro .
.navbar-default .navbar-text {
color: #777;
}
El otro es en el caso de usar una barra de navegación inversa (la negra), el texto está coloreado como gray60 .
.navbar-inverse .navbar-text {
color: #999;
}
Entonces, puedes cambiar su color como lo desees. Sin embargo, le recomendaría que use un archivo css por separado para cambiarlo.
NOTA: también puede usar el customizer proporcionado por Twitter Bootstrap , en la sección Navbar .
La documentación de bootstrap 3 enumera esto en clases de ayuda: Muted , Primary , Success , Info , Warning , Danger .
La documentación de bootstrap 4 enumera esto en Utilidades -> color, y tiene más opciones: primary , secondary , success , danger , warning , info , light , dark , muted , white .
Para acceder a ellos uno usa el text-[class-name] la class text-[class-name]
Entonces, si quiero texto azul, por ejemplo, haría algo como esto:
<p class="text-primary">This text is the blue primary color.</p>
Esta no es una gran cantidad de opciones, pero es algo.
Puedes usar clases de texto:
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-muted
.text-white
use clases de texto en cualquier etiqueta donde sea necesario.
<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>
Puede agregar sus propias clases o modificar las clases anteriores como su requisito.