Nella mia pagina di indice, voglio che il colore del testo h1 sia bianco e venga fornito con l'ombra, ma non voglio modificare il comportamento predefinito di h1 su altre pagine. Come posso raggiungere questo obiettivo?Con Twitter Bootstrap, come posso personalizzare il colore del testo h1 di una pagina e lasciare che le altre pagine siano predefinite?
È possibile aggiungere il proprio ID o classe al tag body della pagina di indice per indirizzare tutti gli elementi in quella pagina con uno stile personalizzato in questo modo:
<body id="index">
<h1>...</h1>
</body>
Quindi è possibile indirizzare gli elementi che si desidera modificare con la tua classe o l'ID in questo modo:
#index h1 {
color:red;
}
È inoltre possibile applicare il 'testo' classi predefinite disponibili da bootstrap sé
<h1 class='text-info'>Hey... I'm blue</h1>
in bootstrap 3 qui sono le classi per cambiare il colore del testo:
<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
documentazione sotto Helper classes - Contextual colors.
Soluzione decisamente migliore che ha accettato la risposta. Link laterale: http://getbootstrap.com/css/#helper-classes – trante
In realtà, tuttavia questa è un'ottima risposta, non funziona per il colore personalizzato senza modificare il colore contestuale del testo. Forse puoi revocare questa risposta perché è buona, ma la vera risposta alla domanda OP è accettata. –
Oltre alla risposta di @Connor Leech.
Se si desidera creare un nuovo tipo di tipografia personalizzato, definire quanto segue nel file css.
.text-foo {
.text-emphasis-variant(#FFFFFF);
}
Il mixin text-emphasis-variant è definita nel file di bootstrap mixins.less.
Dopo la lettura di questa me stesso (Utilizzo delle classi di testo di colore in risposta di Connor Leech)
essere avvertiti di prestare particolare attenzione alla classe "navbar-text".
Per ottenere il testo verde sulla barra di navigazione, ad esempio, si potrebbe essere tentati di fare questo:
<p class="navbar-text text-success">Some Text Here</p>
Questo non funziona !! "navbar-text" sovrascrive il colore e lo sostituisce con il colore del testo della barra di navigazione standard.
Il modo corretto per farlo è quello di nido il testo in un secondo elemento, EG:
<p class="navbar-text"><span class="text-success">Some Text Here</span></p>
o nel mio caso (testo come avrei voluto sottolineato)
<p class="navbar-text"><strong class="text-success">Some Text Here</strong></p>
Quando si esegue in questo modo, ottieni il testo allineato correttamente con l'altezza della barra di navigazione e puoi modificare anche il colore.
è possibile utilizzare lo stile del carattere come:
<font color="white"><h1>Header Content</h1></font>
Tag carattere? Questo è stato deprecato dieci anni fa. – mwieczorek
Ci sono classi di supporto in bootstrap 3 con colori contestuali si prega di utilizzare queste classi negli attributi 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>
Riferimento:http://getbootstrap.com/css/#type
Il modo migliore per risolvere questo problema sarebbe iniziando con la personalizzazione Bootstrap utilizzando i loro strumenti di personalizzazione.
http://getbootstrap.com/customize/
Andare in basso a @ intestazioni-colore e cambiarlo da "ereditare" a qualcosa che si vorrebbe le intestazioni di essere in tutto il sito (se vi piace il default basta cambiare a # 333).
Si noti che questo manterrà tutte le intestazioni dello stesso colore, come richiesto.
Ora, per ottenere ciò che si desidera, dopo aver apportato questa modifica, è possibile sovrascriverli in modo specifico nel proprio CSS per applicare il proprio colore. La parola chiave "inherit" che ho sempre trovato è un dolore nei framework.
c'è una classe integrata per questa funzionalità – gkalikapersaud
@GavindraKalikapersaud SÌ. Vedi la risposta di Connor Leech qui sotto. – Heraldmonkey
Attenzione, questa soluzione funziona con i colori personalizzati senza modificare i colori contestuali del testo. Questa risposta è perfetta per la domanda OP. Forse stai cercando altra cosa. –