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?
risposta
È 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.
- 1. Come personalizzare e modificare le librerie CSS già pronte come Twitter Bootstrap e quali altre alternative esistono?
- 2. Rails: i pulsanti Bootstrap di Twitter quando visitati ricevono il colore del testo nero
- 3. Come personalizzare Bootstrap 3 Scheda di colore
- 4. Posso cambiare il colore del pulsante Bootstrap?
- 5. Come si può garantire che le finestre pop-up di bootstrap twitter siano visibili?
- 6. python e pyPdf - come estrarre il testo dalle pagine in modo che ci siano spazi tra le righe
- 7. colore corrispondenza di "icona-casa" twitter bootstrap
- 8. Effetto "incandescente" del campo di testo come le pagine di accesso di Twitter e Tumblr?
- 9. Problema di rendering dell'input di testo con Twitter Bootstrap
- 10. Sfondo completo del corpo con Twitter Bootstrap
- 11. Come sovrascrivere il tooltip di twitter bootstrap?
- 12. Come personalizzare sfondo, colore di sfondo e colore del testo per Toast in Android
- 13. Come posso cambiare il colore del bordo/contorno per gli elementi di input e textarea in Twitter Bootstrap?
- 14. Come personalizzare le varie dimensioni di input di twitter bootstrap senza usare! Importante?
- 15. Come posso cambiare il colore del testo con jQuery?
- 16. display Twitter bootstrap btn-gruppo linea con il testo
- 17. Come rimuovere il titolo H1 dalle pagine CMS e dalle pagine delle categorie in Magento 2
- 18. Come posso cambiare il colore del testo in IFrame
- 19. css h1 - solo larga quanto il testo
- 20. Come si cambia il colore dei CSS Bootstrap di Twitter?
- 21. Come si naviga verso un'altra pagina con il clic del tasto con Twitter Bootstrap?
- 22. Come posso evitare che le apparecchiature siano in conflitto con il codice segnale post_save di django?
- 23. Come personalizzare le larghezze delle colonne Bootstrap?
- 24. Utilizzando Watir-WebDriver: Ottenere il testo del tag h1
- 25. Più tag h1 su una singola pagina
- 26. Modifica del colore di sfondo e del colore del testo in una casella di testo
- 27. Come creare una finestra modale con il modello Twig e Twitter-Bootstrap
- 28. Perché animare le proprietà personalizzate del CALayer fa sì che altre proprietà siano nulle durante l'animazione?
- 29. Come personalizzare il colore dell'interruttore di avvio
- 30. Posso usare tagit con twitter bootstrap?
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. –