color de la barra de navegación en Twitter Bootstrap

113

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

Gattoo
fuente
1
Resuelto. Se realizaron cambios en bootstrap.css .navbar-inner {background-color: # 2c2c2c; cambió el color de fondo, comentó todo lo demás. Gracias.
Gattoo
12
No le recomiendo que modifique la hoja de estilo CSS principal de bootstrap simplemente porque cuando actualice la hoja de estilo se perderán todos sus cambios, así que incluya cualquier modificación que necesite en su propia hoja de estilo.
Andres Ilich
Gracias Andrés, ¿Cuáles son las otras formas de cambiar el comportamiento del Bootstrap? La barra de navegación es una molestia para la mayoría de los sitios, ya que la gente simplemente no puede creer que la web sea tan buena para la estética como para la funcionalidad.
Gattoo
4
De hecho, puede sobrescribir la mayoría de las reglas de bootstrap dentro de su propia hoja de estilo, no necesita tocar la hoja de estilo bootstrap.css en absoluto. De esta manera, cuando se actualice el bootstrap, puede actualizarlo de inmediato y todos sus cambios permanecerán, y también de esta manera puede sobrescribir los estilos de boostrap para que se ajusten a sus necesidades (ya sean fuentes o colores) de su sitio.
Andres Ilich
Respuesta mucho más simple: stackoverflow.com/questions/18529274/…
Chris Johnson

Respuestas:

134

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.

Andrés Ilich
fuente
2
background-image: none;¿seis veces?
Nowaker
2
@DamianNowak woh, acabo de darme cuenta de eso, gracias por el consejo: D último pedo cerebral.
Andres Ilich
Gracias. Me estaba volviendo loco que no pudiera establecer el color de fondo en lo que fuera y lograr que se aplicara a toda la barra de navegación.
Automático
30

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:

Alexander Poslavsky
fuente
Recursos maravillosos Alexander. Muchas gracias.
Gattoo
1
Gracias por el enlace de bootswatch :)
Akshat Jiwan Sharma
6

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>
JGilmartin
fuente
4

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;
}
paulo62
fuente
3

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.

gauravmunjal
fuente
2

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 *

Ryan
fuente
2

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

usuario2545728
fuente
1

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.

Roopkunwar
fuente
1

¿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
}
Krishan Gupta
fuente
1

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.

Ronak Jain
fuente
0

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.

Miguel
fuente