Cambiare il colore della navbar in Twitter Bootstrap
Come potrei modificare il CSS per cambiare il colore della navbar in Twitter Bootstrap?
687
3
Come potrei modificare il CSS per cambiare il colore della navbar in Twitter Bootstrap?
Navbars disponibili
Hai due navbars di base:
Uso predefinito del colore
Ecco i colori principali e il loro uso:
#F8F8F8
: sfondo della navbar#E7E7E7
: bordo della navbar#777
: colore predefinito#333
: colore hover (#5E5E5E5E
per.nav-brand
)#555
: colore attivo#D5D5D5
: sfondo attivoStile predefinito
Se vuoi mettere qualche stile personalizzato, ecco il CSS che devi cambiare:
Esempi di barre di navigazione colorate personalizzate
Ecco quattro esempi di una navbar colorata personalizzata:
[link JSFiddle][2]
E il codice SCSS:
E infine, un piccolo regalo
Ho appena realizzato uno script che vi permetterà di generare il vostro tema: TWBSColor - Genera la tua navbar Bootstrap
[Aggiornamento]: TWBSColor ora genera codice SCSS/SASS/Less/CSS; [Aggiornamento]: Da ora, è possibile utilizzare Less come linguaggio predefinito fornito da TWBSColor
[Aggiornamento]: TWBSColor ora supporta la colorazione dei menu a discesa. [Aggiornamento]: TWBSColor ora permette di scegliere la versione (aggiunto il supporto per Bootstrap 4)*[Aggiornamento]: TWBSColor ora permette di scegliere la versione
Aggiornato 2018 per Bootstrap 4
Cambiare il colore della navbar è diverso (e un po 'più facile) in Bootstrap 4. È possibile creare una classe navbar personalizzata, e poi fare riferimento ad essa per cambiare la navbar senza impatto sugli altri navs di Bootstrap....
hr>
Bootstrap 4.0
Il CSS necessario per cambiare la Navbar è molto meno in Bootstrap 4...
Bootstrap 4 Custom Navbar Demo
Cambiare il colore di sfondo del link attivo/hover funziona anche con lo stesso CSS, ma devi regolare il padding se vuoi che il colore del bg riempia l'intera altezza del link...
py-0
per rimuovere il padding verticale dall'intera navbar.....
Bootstrap 4 Cambia link e colore di sfondo Demo
Vedi anche: https://stackoverflow.com/questions/42586729/
[Il sito è stato creato da un gruppo di persone];
Bootstrap 3
Demo della barra di navigazione personalizzata su Bootply
{\an8}[{\an8}}Si prega di non utilizzare il sito web per la creazione di una barra di navigazione;
Se la Navbar ha dei dropdown, aggiungi quanto segue per cambiare i colori dei dropdown:
Demo con dropdown
[hr>];
Usare meno
Si potrebbe anche considerare di compilare la propria versione. Prova http://getbootstrap.com/customize/ (che ha una sezione a parte per le impostazioni delle navbars (Default navbar e Inverted Navbar)) o scarica la tua copia da https://github.com/twbs/bootstrap.
Troverai le impostazioni della navbar in
variables.less
.navbar.less
è usato per compilare la navbar (dipende davariables.less
emixins.less
).Copia la 'sezione navbar-default' e inserisci le tue impostazioni di colore. Cambiare le variabili in
variables.less
sarà il modo più semplice (cambiare la navbar di default o inversa non sarà un problema perché hai solo una navbar per pagina).Non cambierai tutte le impostazioni nella maggior parte dei casi:
Potresti anche provare http://twitterbootstrap3navbars.w3masters.nl/. Questo strumento genera il codice CSS per la tua navbar personalizzata. Facoltativamente, potresti anche aggiungere colori sfumati e bordi alla navbar.