twitter-bootstrap - bootstrap colors
Con Twitter Bootstrap, ¿cómo puedo personalizar el color del texto h1 de una página y dejar las otras páginas por defecto? (8)
Además de la respuesta de @Connor Leech.
Si desea crear un nuevo tipo de tipografía personalizada, defina lo siguiente en su archivo css.
.text-foo {
.text-emphasis-variant(#FFFFFF);
}
La text-emphasis-variant la mixins.less se define en el archivo mixins.less de Bootstrap.
En mi página de índice, quiero que el color del texto h1 sea blanco y tenga una sombra, pero no quiero cambiar el comportamiento predeterminado del h1 en otras páginas. ¿Cómo puedo conseguir esto?
Después de leer esto yo mismo (usando las clases de color de texto en la respuesta de Connor Leech)
Se le advierte que preste especial atención a la clase de "texto de barra de navegación".
Para obtener texto verde en la barra de navegación, por ejemplo, puede que tengas la tentación de hacer esto:
<p class="navbar-text text-success">Some Text Here</p>
¡¡Esto no funcionará!! "navbar-text" anula el color y lo reemplaza con el color de texto estándar de la barra de navegación.
La forma correcta de hacerlo es anidar el texto en un segundo elemento, por ejemplo:
<p class="navbar-text"><span class="text-success">Some Text Here</span></p>
o en mi caso (como quisiera enfatizar texto)
<p class="navbar-text"><strong class="text-success">Some Text Here</strong></p>
Cuando lo haces de esta manera, obtienes el texto correctamente alineado con la altura de la barra de navegación y puedes cambiar el color también.
Hay clases de ayuda en bootstrap 3 con colores contextuales, use estas clases en los atributos html.
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
Referencia: http://getbootstrap.com/css/#type
La mejor manera de resolver este problema sería comenzar por personalizar Bootstrap usando sus herramientas de personalización.
http://getbootstrap.com/customize/
Vaya a @ headings-color y cámbielo de "heredar" a algo que le gustaría que sus encabezados estuvieran en todo el sitio (si desea el valor predeterminado, simplemente cámbielo a # 333).
Tenga en cuenta que esto mantendrá todos sus encabezados del mismo color, según lo solicite.
Ahora, para lograr lo que desea, después de realizar este cambio, puede sobrescribirlos específicamente en su propio CSS para aplicarles su propio color. La palabra clave "heredar" que siempre he encontrado es una molestia en los marcos.
También puede aplicar las clases de ''texto'' predeterminadas disponibles desde el propio bootstrap
<h1 class=''text-info''>Hey... I''m blue</h1>
en bootstrap 3 aquí están las clases para cambiar el color del texto:
<p class="text-muted">...</p> //grey
<p class="text-primary">...</p> //light blue
<p class="text-success">...</p> //green
<p class="text-info">...</p> //blue
<p class="text-warning">...</p> //orangish,yellow
<p class="text-danger">...</p> //red
Documentación bajo clases auxiliares - Colores contextuales .
usted podría utilizar el estilo de fuente como:
<font color="white"><h1>Header Content</h1></font>
Puedes agregar tu propia identificación o clase a la etiqueta del cuerpo de tu página de índice para apuntar a todos los elementos de esa página con un estilo personalizado como el siguiente:
<body id="index">
<h1>...</h1>
</body>
Luego, puede orientar los elementos que desea modificar con su clase o id de la siguiente manera:
#index h1 {
color:red;
}