colore della barra di navigazione in Twitter Bootstrap

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?

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.

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:

• Usare bootstrap con less
• Lessc.org

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>

Puoi scaricare una versione personalizzata di bootstrap e impostare @navbarBackground sul colore che desideri.

http://twitter.github.com/bootstrap/customize.html

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;
}

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.

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 *

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

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.

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
}

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.

Puoi personalizzare la tua versione sul sito ufficiale di Bootstrap .

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.