En mi página de índice, quiero que el color del texto h1 sea blanco y viene con la sombra, pero no quiero cambiar el comportamiento predeterminado h1 en otras páginas. ¿Cómo puedo conseguir esto?Con Twitter Bootstrap, ¿cómo puedo personalizar el color de texto h1 de una página y dejar las otras páginas como predeterminadas?
Usted puede añadir su propia identificación o clase a la etiqueta del cuerpo de su página de índice para apuntar todos los elementos de esa página con un estilo personalizado de este modo:
<body id="index">
<h1>...</h1>
</body>
puede llegar a identificar los elementos que desea modificar con su clase o la identificación de este modo:
#index h1 {
color:red;
}
también se puede aplicar a las clases de texto '' por defecto disponibles a partir de arranque en sí
<h1 class='text-info'>Hey... I'm blue</h1>
de arranque 3 aquí son 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 Helper classes - Contextual colors.
Solución mucho mejor que la respuesta aceptada. Enlace lateral: http://getbootstrap.com/css/#helper-classes – trante
En realidad, sin embargo, esta es una muy buena respuesta, no funciona para el color personalizado sin cambiar el color contextual del texto. Tal vez puedas votar esta respuesta porque es bueno, pero la respuesta real a la pregunta OP es la aceptada. –
Además de la respuesta de @Connor Leech.
Si desea crear un nuevo tipo de tipografía personalizado, defina lo siguiente en su archivo css.
.text-foo {
.text-emphasis-variant(#FFFFFF);
}
El mixin text-emphasis-variant se define en el archivo del Bootstrap mixins.less.
Tras buscando esto por mí mismo (Utilizar las clases color del texto en la respuesta de Connor Leech)
Se advirtió que prestar especial atención a la clase "barra de navegación de texto".
Para obtener el texto verde en la barra de navegación, por ejemplo, puede tener 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 de la barra de navegación estándar.
La forma correcta de hacerlo es a anidar el texto en un segundo elemento, EG:
<p class="navbar-text"><span class="text-success">Some Text Here</span></p>
o en mi caso (texto como quería subrayado)
<p class="navbar-text"><strong class="text-success">Some Text Here</strong></p>
Al hacer de esta manera, obtienes texto alineado correctamente con la altura de la barra de navegación y también puedes cambiar el color.
podría utilizar el estilo de fuente igual:
<font color="white"><h1>Header Content</h1></font>
Etiqueta de fuente? Eso fue desaprobado hace una década. – mwieczorek
Hay clases de ayuda de arranque en 3 colores con contextuales favor usa estas clases de 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 comenzando con la personalización de Bootstrap utilizando sus herramientas de personalización.
http://getbootstrap.com/customize/
Desciende a @ partidas color y cambiarlo de "heredar" a algo que le gustaría que sus cabeceras a ser a través del sitio (si te gusta el valor por defecto sólo cambia a # 333).
Tenga en cuenta que esto mantendrá todos los títulos del mismo color, tal como lo solicitó.
Ahora, para lograr lo que desea, después de realizar este cambio, ahora puede sobrescribirlos específicamente en su propio CSS para aplicarles su propio color. La palabra clave "heredar" siempre he encontrado que es un dolor en los marcos.
hay una clase integrada para esta funcionalidad – gkalikapersaud
@GavindraKalikapersaud SÍ. Ver la respuesta de Connor Leech a continuación. – Heraldmonkey
Tenga en cuenta que esta solución funciona con colores personalizados sin cambiar los colores contextuales de texto. Esta respuesta es perfecta para la pregunta OP. Quizás estás buscando otra cosa. –