color de la barra de navegación en Twitter Bootstrap

¿Cómo puedo cambiar el color de fondo de la barra de navegación de Twitter Bootstrap 2.0.2? ¿Cómo puedo cambiar el color de todos los elementos de la barra de navegación para reflejar el color de fondo?

Puede sobrescribir los colores de arranque, incluida la .navbar-innerclase, apuntándola en su propia hoja de estilo en lugar de modificar la hoja de estilo bootstrap.css, así:

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

Solo tiene que modificar todos esos estilos con los suyos y se recogerán, como algo como esto, por ejemplo, donde elimino todos los efectos de degradado y simplemente establezco un color de fondo negro sólido:

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

Puede aprovechar herramientas como Colorzilla Gradient Editor y crear sus propios colores degradados para todos los navegadores y reemplazar los colores originales por los suyos.

Y como mencioné en los comentarios, no le recomendaría que modifique la hoja de estilo bootstrap.css directamente ya que todos sus cambios se perderán una vez que la hoja de estilo se actualice (la versión actual es ^v2.0.2 ) por lo que es preferible que incluya todos sus cambios dentro de su propia hoja de estilo, en conjunto con la hoja de estilo bootstrap.css. Pero recuerde sobrescribir todas las propiedades apropiadas para tener coherencia entre los navegadores.

Un excelente recurso para ver cómo arrancar el tema es: bootswatch.com . Tiene buenos ejemplos y muestra código también. En resumen, usan lessc para recompilar bootstrap.css en su nuevo color-theme.css. Lo bueno de su enfoque es que se basa en bootstrap, por lo que cuando se actualiza bootstrap, simplemente se vuelve a compilar.

Enlaces sobre el uso de lessc y bootstrap:

• Usando bootstrap con menos
• Lessc.org

Si no tienes tiempo para aprender "menos" o hacerlo correctamente, aquí tienes un truco sucio ...

Agregue esto arriba donde renderiza la barra de navegación de arranque HTML: actualice los colores según sea necesario.

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

Puede descargar una versión personalizada de bootstrap y configurar @navbarBackground en el color que desee.

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

Estoy usando Bootstrap versión 3.2.0 y parece que .navbar-inner ya no existe.

Las soluciones aquí que sugieren anular .navbar-inner no funcionaron para mí, el color siguió siendo el mismo.

El color solo cambió cuando anulé .navbar como se muestra a continuación:

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

La mejor manera actualmente de hacer lo mismo sería instalar el compilador de línea de comando MENOS usando

$ npm install -g less jshint recess uglify-js

Una vez que haya hecho esto, vaya a la carpeta less en el directorio y luego edite las variables del archivo .less y puede cambiar muchas variables según lo que necesite, incluido el color de la barra de navegación

@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%);

Una vez que haya hecho esto, vaya a su directorio bootstrap y ejecute el comando make.

Si está usando MENOS, puede usar Mixins por menos código. Aquí agregaré un degradado, un borde y un radio de borde:

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

* Si está utilizando la gema rails, twitter-bootstrap-rails, hago esto directamente en el archivo bootstrap_and_overrides.css.less *

eso es lo que hago

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

funciona bien para todos los navegadores, puede ver la demostración aquí http://caverne.fr en la parte superior

En bootstrap.css línea 4784 vemos:

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

Debe eliminar todas las declaraciones de propiedad 'background-image' para obtener el efecto deseado.

¿No diría la navaja de occam que haga esto hasta que necesite algo más complejo? Es un truco, pero puede satisfacer las necesidades de alguien que quiera una solución rápida.

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

Si está utilizando la versión LESS o SASS de Bootstrap. La forma más eficaz es cambiar el nombre de la variable, en el archivo LESS o SASS.

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

Esta es, con mucho, la forma más fácil y eficiente de cambiar la barra de navegación Bootstraps. No es necesario escribir anulaciones y el código permanece limpio.

Puede personalizar su propia versión en el sitio web oficial de Bootstrap .

De hecho, solo sobreescribo todo lo que quiero cambiar en site.css, debe cargar el site.css después de bootstrap para que sobrescriba las clases. Lo que he hecho ahora es crear mis propias clases con mi propio tema de arranque. Pequeñas cosas como esta

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

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

También cambié los gustos de los errores de validación de la misma manera.