colors - personalizar - navbar color bootstrap

color de la barra de navegación en Twitter Bootstrap

Question

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

Answer 1

¿Acaso la navaja de Occam no diría que solo hagas esto hasta que necesites algo más complejo? Es un poco complicado, pero puede satisfacer las necesidades de alguien que quiere 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
}

Answer 2

De hecho, solo sobrescribo todo lo que quiero cambiar en el sitio .css, debes cargar el site.css después del arranque para que sobrescriba las clases. Lo que he hecho ahora es crear mis propias clases con mi propio pequeño 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.

Answer 3

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 propiedades ''background-image'' para obtener el efecto deseado.

Answer 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 permaneció igual.

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

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

Answer 5

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

$ npm install -g less jshint recess uglify-js

Una vez que haya hecho esto, vaya a la carpeta menos en el directorio y luego edite el archivo variables.less y podrá 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.

Answer 6

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

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

Answer 7

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

Answer 8

Si está utilizando la versión LESS o SASS de Bootstrap. La forma más eficiente 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 la forma más fácil y más eficiente de cambiar la barra de navegación de Bootstraps. No necesita escribir anulaciones, y el código permanece limpio.

Answer 9

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

Agregue esto arriba donde renderiza la barra de navegación bootstrap 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>

Answer 10

Si usa LESS, puede usar Mixins para 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á usando la gema rails, twitter-bootstrap-rails, lo hago directamente en el archivo bootstrap_and_overrides.css.less *

Answer 11

Un excelente recurso para ver cómo el arranque de tema es: bootswatch.com . Tiene buenos ejemplos y muestra código también. En resumen, usan lessc para recompilar el bootstrap.css a su nuevo color-theme.css. Lo bueno de su enfoque es que se basa en el arranque, 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

Answer 12

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, puedes ver la demostración aquí http://caverne.fr en la parte superior

Answer 13

Puede sobrescribir los colores de arranque, incluida la clase .navbar-inner , .navbar-inner a su propia hoja de estilo en lugar de modificar la hoja de estilo bootstrap.css, de la siguiente manera:

.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 tienes que modificar todos esos estilos con los tuyos y se eliminarán, por ejemplo, como este, donde elimino todos los efectos de degradado y simplemente establezco un fondo de color 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 el 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 recomendaría que modifiques la hoja de estilos bootstrap.css directamente ya que todos los cambios se perderán una vez que la hoja de estilos se actualice (la versión actual es ^v2.0.2 ) por lo que es preferible que incluyas todos sus cambios dentro de su propia hoja de estilo, en conjunto con la hoja de estilos bootstrap.css. Pero recuerde sobrescribir todas las propiedades apropiadas para tener coherencia entre los navegadores.