colore della barra di navigazione in Twitter Bootstrap


113

Come posso cambiare il colore di sfondo della barra di navigazione di Twitter Bootstrap 2.0.2? Come posso cambiare il colore di tutti gli elementi della barra di navigazione per riflettere il colore di sfondo?


1
Risolto. Modifiche apportate in bootstrap.css .navbar-inner {background-color: # 2c2c2c; cambiato colore di sfondo, commentato tutto il resto. Grazie.
Gattoo

12
sconsigliamo di modificare il foglio di stile css principale di bootstrap semplicemente perché quando aggiorni il foglio di stile tutte le tue modifiche andranno perse, quindi includi semplicemente le modifiche necessarie nel tuo foglio di stile.
Andres Ilich

Grazie Andres, quali sono gli altri modi per modificare il comportamento del Bootstrap? La barra di navigazione è un problema per la maggior parte dei siti in quanto le persone non sono in grado di credere che il Web sia buono per l'estetica quanto per la funzionalità.
Gattoo

4
Puoi effettivamente sovrascrivere la maggior parte delle regole di bootstrap all'interno del tuo foglio di stile, non è necessario toccare affatto il foglio di stile bootstrap.css. In questo modo quando il bootstrap viene aggiornato puoi semplicemente aggiornarlo subito e tutte le tue modifiche rimarranno, e anche in questo modo puoi sovrascrivere gli stili del boostrap per adattarli alle tue esigenze (che si tratti di caratteri o colori) del tuo sito.
Andres Ilich

Risposte:


134

Puoi sovrascrivere i colori di bootstrap, inclusa la .navbar-innerclasse, specificandola nel tuo foglio di stile invece di modificare il foglio di stile bootstrap.css, in questo modo:

.navbar-inner {
  background-color: #2c2c2c; /* fallback color, place your own */

  /* Gradients for modern browsers, replace as you see fit */
  background-image: -moz-linear-gradient(top, #333333, #222222);
  background-image: -ms-linear-gradient(top, #333333, #222222);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
  background-image: -webkit-linear-gradient(top, #333333, #222222);
  background-image: -o-linear-gradient(top, #333333, #222222);
  background-image: linear-gradient(top, #333333, #222222);
  background-repeat: repeat-x;

  /* IE8-9 gradient filter */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
}

Devi solo modificare tutti quegli stili con il tuo e verranno raccolti, come qualcosa di simile ad esempio, dove elimino tutti gli effetti sfumati e imposto un colore di sfondo nero solido:

.navbar-inner {
  background-color: #000; /* background color will be black for all browsers */
  background-image: none;
  background-repeat: no-repeat;
  filter: none;
}

Puoi sfruttare strumenti come Colorzilla Gradient Editor e creare i tuoi colori sfumati per tutti i browser e sostituire i colori originali con i tuoi.

E come ho accennato nei commenti, non consiglierei di modificare direttamente il foglio di stile bootstrap.css poiché tutte le modifiche andranno perse una volta che il foglio di stile viene aggiornato (la versione corrente è v2.0.2 ) quindi è preferibile che tu includa tutto le tue modifiche all'interno del tuo foglio di stile, in tandem con il foglio di stile bootstrap.css. Ma ricorda di sovrascrivere tutte le proprietà appropriate per avere coerenza tra i browser.


2
background-image: none;sei volte?
Nowaker

2
@DamianNowak woh, l'ho appena notato, grazie per il suggerimento: D ultima scoreggia cerebrale.
Andres Ilich

Grazie. Mi stava facendo impazzire il fatto di non poter impostare il colore di sfondo su qualsiasi cosa e farlo applicare all'intera barra di navigazione.
Automatico

30

Un'ottima risorsa per vedere come creare il tema del bootstrap è: bootswatch.com . Ha ottimi esempi e mostra anche il codice. In breve, usano lessc per ricompilare bootstrap.css nel tuo nuovo color-theme.css. La cosa bella del loro approccio è che si basa sul bootstrap, quindi quando il bootstrap viene aggiornato, devi semplicemente ricompilarlo.

Collegamenti sull'utilizzo di lessc e bootstrap:


Risorse meravigliose Alexander. Molte grazie.
Gattoo

1
Grazie per il link bootswatch :)
Akshat Jiwan Sharma

6

Se non hai tempo per imparare "meno" o farlo correttamente, ecco un trucco sporco ...

Aggiungi questo sopra dove esegui il rendering dell'HTML della barra di navigazione bootstrap - aggiorna i colori come richiesto.

<style type="text/css">   

.navbar-inner {
    background-color: red;
    background-image: linear-gradient(to bottom, blue, green);
    background-repeat: repeat-x;
    border: 1px solid yellow;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    min-height: 40px;
    padding-left: 20px;
    padding-right: 20px;
}

.dropdown-menu {
    background-clip: padding-box;
    background-color: red;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
    left: 0;
    list-style: none outside none;
    margin: 2px 0 0;
    min-width: 160px;
    padding: 5px 0;
    position: absolute;
    top: 100%;
    z-index: 1000;
}

.btn-group.open .btn.dropdown-toggle {
  background-color: red;
}

.btn-group.open .btn.dropdown-toggle {
  background-color:lime;
}

.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
  color:white;
  background-color:Teal;
}

.navbar .nav > li > a {
    color: white;
    float: none;
    padding: 10px 15px;
    text-decoration: none;
    text-shadow: 0 0px 0 #ffffff;
}

.navbar .brand {
  display: block;
  float: left;
  padding: 10px 20px 10px;
  margin-left: -20px;
  font-size: 20px;
  font-weight: 200;
  color: white;
  text-shadow: 0 0px 0 #ffffff;
}

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  color: white;
  text-decoration: none;
  background-color: transparent;
}

.navbar-text {
  margin-bottom: 0;
  line-height: 40px;
  color: white;
}

.dropdown-menu li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 20px;
  color: white;
  white-space: nowrap;
}

.navbar-link {
  color: white;
}

.navbar-link:hover {
  color: white;
}

</style>


4

Sto usando Bootstrap versione 3.2.0 e sembra che .navbar-inner non esista più.

Le soluzioni qui che suggeriscono di ignorare .navbar-inner non hanno funzionato per me: il colore è rimasto lo stesso.

Il colore è cambiato solo quando ho sovrascritto .navbar come mostrato di seguito:

.navbar {
    background-color: #A4C8EC;
    background-image: none;
}

3

Il modo migliore attualmente per fare lo stesso sarebbe installare LESS compilatore da riga di comando usando

$ npm install -g less jshint recess uglify-js

Una volta fatto ciò, vai alla cartella less nella directory e quindi modifica il file variables.less e puoi modificare molte variabili in base a ciò di cui hai bisogno incluso il colore della barra di navigazione

@navbarCollapseWidth:             979px;

@navbarHeight:                    40px;
@navbarBackgroundHighlight:       #ffffff;
@navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
@navbarBorder:                    darken(@navbarBackground, 12%);

@navbarText:                      #777;
@navbarLinkColor:                 #777;
@navbarLinkColorHover:            @grayDark;
@navbarLinkColorActive:           @gray;
@navbarLinkBackgroundHover:       transparent;
@navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);

Dopo averlo fatto, vai alla tua directory bootstrap ed esegui il comando make.


2

Se stai usando LESS, puoi usare Mixin per meno codice. Qui aggiungerò una sfumatura, un bordo e un raggio del bordo:

.navbar-inner {
  #gradient > .vertical(#ffffff, #ECECEC);
  border: #E2E2E2;
  .border-radius(6px);
}

* Se stai usando rails gem, twitter-bootstrap-rails, lo faccio direttamente nel file bootstrap_and_overrides.css.less *


2

questo è quello che faccio

.navbar-inverse .navbar-inner {
  background-color: #E27403; /* it's flat*/
 background-image: none;
}

.navbar-inverse .navbar-inner {
  background-image: -ms-linear-gradient(top, #E27403, #E49037);
  background-image: -webkit-linear-gradient(top, #E27403, #E49037);
  background-image: linear-gradient(to bottom, #E27403, #E49037);
}

funziona bene per tutti i navigatori, puoi vedere la demo qui http://caverne.fr in alto


1

Nella riga 4784 bootstrap.css vediamo:

.navbar-inverse .navbar-inner {
  background-color: #FFFFFFF;
  background-image: -moz-linear-gradient(top, #222222, #111111);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
  background-image: -webkit-linear-gradient(top, #222222, #111111);
  background-image: -o-linear-gradient(top, #222222, #111111);
  background-image: linear-gradient(to bottom, #222222, #111111);
  background-repeat: repeat-x;
  border-color: #252525;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
}

È necessario rimuovere tutte le dichiarazioni di proprietà "background-image" per ottenere l'effetto desiderato.


1

Il rasoio di Occam non direbbe di farlo solo fino a quando non avrai bisogno di qualcosa di più complesso? È un po 'un trucco, ma può soddisfare le esigenze di qualcuno che vuole una soluzione rapida.

.navbar-default .container-fluid{
    background-color:#62ADD7; // Change the color
    margin: -1px -1px 10px -1px; // Get rid of the border
}

1

Se stai usando la versione LESS o SASS di Bootstrap. Il modo più efficiente è cambiare il nome della variabile, nel file LESS o SASS.

$navbar-default-color:              #FFFFFF !default;
$navbar-default-bg:                 #36669d !default;
$navbar-default-border:             $navbar-default-bg !default;

Questo è di gran lunga il modo più semplice ed efficiente per cambiare Bootstraps Navbar. Non è necessario scrivere override e il codice rimane pulito.



0

In realtà sovrascrivo tutto ciò che voglio modificare in site.css, dovresti caricare site.css dopo il bootstrap in modo che sovrascriverà le classi. Quello che ho fatto ora è semplicemente creare le mie classi con il mio piccolo tema di bootstrap. Piccole cose come questa

.navbar-nav li a{
    color: #fff;
    font-size: 15px;
    margin-top: 9px;
}
.navbar-nav li a:hover{

    background-color: #18678E;
    height: 61px;
}

Ho anche cambiato allo stesso modo errori di convalida.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.