Cambiar el color de la barra de navegación en Twitter Bootstrap

¿Cómo voy a modificar el CSS para cambiar el color de la barra de navegación en Twitter Bootstrap?

tl; dr – TWBSColor – Genera tu propia barra de navegación Bootstrap

Notas de versión: – Herramienta en línea: Bootstrap 3.3.2+ / 4.0.0+ – Esta respuesta: Bootstrap 3.0.x

Barras de navegación disponibles

Tienes dos barras de navegación básicas:

    

Uso de color predeterminado

Estos son los colores principales y su uso:

  • #F8F8F8 : fondo de la barra de navegación
  • #E7E7E7 : borde de la barra de navegación
  • #777 : color predeterminado
  • #333 : color de #5E5E5E ( #5E5E5E para .nav-brand )
  • #555 : color activo
  • #D5D5D5 : fondo activo

Estilo por Defecto

Si desea poner un estilo personalizado, aquí está el CSS que necesita cambiar:

 /* navbar */ .navbar-default { background-color: #F8F8F8; border-color: #E7E7E7; } /* Title */ .navbar-default .navbar-brand { color: #777; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #5E5E5E; } /* Link */ .navbar-default .navbar-nav > li > a { color: #777; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #333; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #555; background-color: #E7E7E7; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #555; background-color: #D5D5D5; } /* Caret */ .navbar-default .navbar-nav > .dropdown > a .caret { border-top-color: #777; border-bottom-color: #777; } .navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret { border-top-color: #333; border-bottom-color: #333; } .navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret { border-top-color: #555; border-bottom-color: #555; } /* Mobile version */ .navbar-default .navbar-toggle { border-color: #DDD; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #DDD; } .navbar-default .navbar-toggle .icon-bar { background-color: #CCC; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #777; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #333; } } 

Ejemplos de barras de navegación de colores personalizados

Aquí hay cuatro ejemplos de una barra de navegación coloreada personalizada:

Enlace JSFiddle

Ingrese la descripción de la imagen aquí

Y el código SCSS:

 $bgDefault : #e74c3c; $bgHighlight : #c0392b; $colDefault : #ecf0f1; $colHighlight: #ffbbbc; .navbar-default { background-color: $bgDefault; border-color: $bgHighlight; .navbar-brand { color: $colDefault; &:hover, &:focus { color: $colHighlight; }} .navbar-text { color: $colDefault; } .navbar-nav { > li { > a { color: $colDefault; &:hover, &:focus { color: $colHighlight; }}} > .active { > a, > a:hover, > a:focus { color: $colHighlight; background-color: $bgHighlight; }} > .open { > a, > a:hover, > a:focus { color: $colHighlight; background-color: $bgHighlight; }}} .navbar-toggle { border-color: $bgHighlight; &:hover, &:focus { background-color: $bgHighlight; } .icon-bar { background-color: $colDefault; }} .navbar-collapse, .navbar-form { border-color: $colDefault; } .navbar-link { color: $colDefault; &:hover { color: $colHighlight; }}} @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu { > li > a { color: $colDefault; &:hover, &:focus { color: $colHighlight; }} > .active { > a, > a:hover, > a:focus, { color: $colHighlight; background-color: $bgHighlight; }}} } 

Y finalmente, un pequeño regalo

Acabo de crear un script que te permitirá generar tu tema: TWBSColor – Genera tu propia barra de navegación de Bootstrap

[Actualización]: TWBSColor ahora genera el código SCSS / SASS / Less / CSS.
[Actualización]: a partir de ahora, puede usar Less como el idioma predeterminado proporcionado por TWBSColor
[Actualización]: TWBSColor ahora admite colorización de menús desplegables
[Actualización]: TWBSColor ahora permite elegir su versión (se agregó compatibilidad con Bootstrap 4)

Actualizado 2018 para Bootstrap 4

Cambiar el color de la barra de navegación es diferente (y un poco más fácil) en Bootstrap 4. Puede crear una clase de barra de navegación personalizada y luego hacer referencia a ella para cambiar la barra de navegación sin afectar a otros dispositivos de navegación Bootstrap.

  

Bootstrap 4.0

Sé que la pregunta original era para 3.x, pero pensé que un nuevo ejemplo de Bootstrap 4 también sería útil. El CSS requerido es mucho menor en Bootstrap 4 …

 .navbar-custom { background-color: #ff5500; } /* change the brand and text color */ .navbar-custom .navbar-brand, .navbar-custom .navbar-text { color: rgba(255,255,255,.8); } /* change the link color */ .navbar-custom .navbar-nav .nav-link { color: rgba(255,255,255,.5); } /* change the color of active or hovered links */ .navbar-custom .nav-item.active .nav-link, .navbar-custom .nav-item:hover .nav-link { color: #ffffff; } 

Bootstrap 4 Custom Navbar Demo enter image description here


Bootstrap 3

  .navbar-custom { background-color:#229922; color:#ffffff; border-radius:0; } .navbar-custom .navbar-nav > li > a { color:#fff; } .navbar-custom .navbar-nav > .active > a { color: #ffffff; background-color:transparent; } .navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav > li > a:focus, .navbar-custom .navbar-nav > .active > a:hover, .navbar-custom .navbar-nav > .active > a:focus, .navbar-custom .navbar-nav > .open >a { text-decoration: none; background-color: #33aa33; } .navbar-custom .navbar-brand { color:#eeeeee; } .navbar-custom .navbar-toggle { background-color:#eeeeee; } .navbar-custom .icon-bar { background-color:#33aa33; } 

Demostración de la barra de navegación personalizada en Bootply


Si la barra de navegación tiene menús desplegables, agrega lo siguiente para cambiar los colores desplegables:

 /* for dropdowns only */ .navbar-custom .navbar-nav .dropdown-menu { background-color: #33aa33; } .navbar-custom .navbar-nav .dropdown-menu>li>a { color: #fff; } .navbar-custom .navbar-nav .dropdown-menu>li>a:hover,.navbar-custom .navbar-nav .dropdown-menu>li>a:focus { color: #33aa33; } 

Demostración con Dropdown


Usando menos

También podría considerar comstackr su propia versión. Pruebe http://getbootstrap.com/customize/ (que tiene una sección separada para la configuración de Navbars (barra de navegación predeterminada y barra de navegación invertida)) o descargue su propia copia de https://github.com/twbs/bootstrap .

Encontrará la configuración de la barra de navegación en variables.less . navbar.less se usa para comstackr la barra de navegación (depende de variables.less y mixins.less ).

Copie la ‘sección predeterminada de la barra de navegación’ y complete su propia configuración de color. Cambiar las variables en variables.less será la manera más fácil (cambiar la barra de navegación predeterminada o inversa no será un problema porque tiene una barra de navegación por página solamente).

No cambiará todas las configuraciones en la mayoría de los casos:

 // Navbar // ------------------------- // Basics of a navbar @navbar-height: 50px; @navbar-margin-bottom: @line-height-computed; @navbar-default-color: #777; @navbar-default-bg: #f8f8f8; @navbar-default-border: darken(@navbar-default-bg, 6.5%); @navbar-border-radius: @border-radius-base; @navbar-padding-horizontal: floor(@grid-gutter-width / 2); @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); // Navbar links @navbar-default-link-color: #777; @navbar-default-link-hover-color: #333; @navbar-default-link-hover-bg: transparent; @navbar-default-link-active-color: #555; @navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%); @navbar-default-link-disabled-color: #ccc; @navbar-default-link-disabled-bg: transparent; // Navbar brand label @navbar-default-brand-color: @navbar-default-link-color; @navbar-default-brand-hover-color: darken(@navbar-default-link-color, 10%); @navbar-default-brand-hover-bg: transparent; // Navbar toggle @navbar-default-toggle-hover-bg: #ddd; @navbar-default-toggle-icon-bar-bg: #ccc; @navbar-default-toggle-border-color: #ddd; 

También puedes probar http://twitterbootstrap3navbars.w3masters.nl/ . Esta herramienta genera código CSS para su barra de navegación personalizada. Opcionalmente, también puede agregar colores de degradado y bordes a la barra de navegación.

Me tomó un tiempo, pero descubrí que incluir lo siguiente era lo que hizo posible cambiar el color de la barra de navegación:

 .navbar{ background-image: none; } 

Simplemente agregue una identificación a la barra de navegación html, como:

  

Con esta identificación, puede diseñar el color de la barra de navegación, pero también los enlaces y los menús desplegables

Ejemplos aplicados a diferentes tipos de barras de navegación

Negro

Amarillo

Azul oscuro

Rojo cereza)

Verde oscuro

Aquí está el CSS

 /* * Black navbar style */ #navbar-black.navbar-default { /* #3C3C3C - #222222 */ font-size: 14px; background-color: rgba(34, 34, 34, 1); background: -webkit-linear-gradient(top, rgba(60, 60, 60, 1) 0%, rgba(34, 34, 34, 1) 100%); background: linear-gradient(to bottom, rgba(60, 60, 60, 1) 0%, rgba(34, 34, 34, 1) 100%); border: 0px; border-radius: 0; } #navbar-black.navbar-default .navbar-nav>li>a:hover, #navbar-black.navbar-default .navbar-nav>li>a:focus, #navbar-black.navbar-default .navbar-nav>li>ul>li>a:hover, #navbar-black.navbar-default .navbar-nav>li>ul>li>a:focus, #navbar-black.navbar-default .navbar-nav>.active>a, #navbar-black.navbar-default .navbar-nav>.active>a:hover, #navbar-black.navbar-default .navbar-nav>.active>a:focus { color: rgba(255, 255, 255, 1); background-color: rgba(0, 0, 0, 1); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%); } #sidebar-black, #column-black { background-color: #222222; } #navbar-black.navbar-default .navbar-toggle { border-color: #222222; } #navbar-black.navbar-default .navbar-toggle:hover, #navbar-black.navbar-default .navbar-toggle:focus { background-color: #3C3C3C; } #navbar-black.navbar-default .navbar-nav>li>a, #navbar-black.navbar-default .navbar-nav>li>ul>li>a, #navbar-black.navbar-default .navbar-brand { color: #999999; } #navbar-black.navbar-default .navbar-toggle .icon-bar, #navbar-black.navbar-default .navbar-toggle:hover .icon-bar, #navbar-black.navbar-default .navbar-toggle:focus .icon-bar { background-color: #ffffff; } /* * Red navbar style */ #navbar-red.navbar-default { /* #990033 - #cc0033 */ font-size: 14px; background-color: rgba(153, 0, 51, 1); background: -webkit-linear-gradient(top, rgba(204, 0, 51, 1) 0%, rgba(153, 0, 51, 1) 100%); background: linear-gradient(to bottom, rgba(204, 0, 51, 1) 0%, rgba(153, 0, 51, 1) 100%); border: 0px; border-radius: 0; } #navbar-red.navbar-default .navbar-nav>li>a:hover, #navbar-red.navbar-default .navbar-nav>li>a:focus, #navbar-red.navbar-default .navbar-nav>li>ul>li>a:hover, #navbar-red.navbar-default .navbar-nav>li>ul>li>a:focus, #navbar-red.navbar-default .navbar-nav>.active>a, #navbar-red.navbar-default .navbar-nav>.active>a:hover, #navbar-red.navbar-default .navbar-nav>.active>a:focus { color: rgba(51, 51, 51, 1); background-color: rgba(255, 255, 255, 1); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%); } #sidebar-red, #column-red { background-color: #990033; } #navbar-red.navbar-default .navbar-toggle { border-color: #990033; } #navbar-red.navbar-default .navbar-toggle:hover, #navbar-red.navbar-default .navbar-toggle:focus { background-color: #cc0033; } #navbar-red.navbar-default .navbar-nav>li>a, #navbar-red.navbar-default .navbar-nav>li>ul>li>a, #navbar-red.navbar-default .navbar-brand { color: #999999; } #navbar-red.navbar-default .navbar-toggle .icon-bar, #navbar-red.navbar-default .navbar-toggle:hover .icon-bar, #navbar-red.navbar-default .navbar-toggle:focus .icon-bar { background-color: #ffffff; } /* * Darkblue navbar style */ #navbar-darkblue.navbar-default { /* #003399 - #0033cc */ font-size: 14px; background-color: rgba(51, 51, 153, 1); background: -webkit-linear-gradient(top, rgba(51, 51, 204, 1) 0%, rgba(51, 51, 153, 1) 100%); background: linear-gradient(to bottom, rgba(51, 51, 204, 1) 0%, rgba(51, 51, 153, 1) 100%); border: 0px; border-radius: 0; } #navbar-darkblue.navbar-default .navbar-nav>li>a:hover, #navbar-darkblue.navbar-default .navbar-nav>li>a:focus, #navbar-darkblue.navbar-default .navbar-nav>li>ul>li>a:hover, #navbar-darkblue.navbar-default .navbar-nav>li>ul>li>a:focus, #navbar-darkblue.navbar-default .navbar-nav>.active>a, #navbar-darkblue.navbar-default .navbar-nav>.active>a:hover, #navbar-darkblue.navbar-default .navbar-nav>.active>a:focus { color: rgba(51, 51, 51, 1); background-color: rgba(255, 255, 255, 1); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%); } #sidebar-darkblue, #column-darkblue { background-color: #333399; } #navbar-darkblue.navbar-default .navbar-toggle { border-color: #333399; } #navbar-darkblue.navbar-default .navbar-toggle:hover, #navbar-darkblue.navbar-default .navbar-toggle:focus { background-color: #3333cc; } #navbar-darkblue.navbar-default .navbar-nav>li>a, #navbar-darkblue.navbar-default .navbar-nav>li>ul>li>a, #navbar-darkblue.navbar-default .navbar-brand { color: #999999; } #navbar-darkblue.navbar-default .navbar-toggle .icon-bar, #navbar-darkblue.navbar-default .navbar-toggle:hover .icon-bar, #navbar-darkblue.navbar-default .navbar-toggle:focus .icon-bar { background-color: #ffffff; } /* * Darkgreen navbar style */ #navbar-darkgreen.navbar-default { /* #006633 - #009933 */ font-size: 14px; background-color: rgba(0, 102, 51, 1); background: -webkit-linear-gradient(top, rgba(0, 153, 51, 1) 0%, rgba(0, 102, 51, 1) 100%); background: linear-gradient(to bottom, rgba(0, 153, 51, 1) 0%, rgba(0, 102, 51, 1) 100%); border: 0px; border-radius: 0; } #navbar-darkgreen.navbar-default .navbar-nav>li>a:hover, #navbar-darkgreen.navbar-default .navbar-nav>li>a:focus, #navbar-darkgreen.navbar-default .navbar-nav>li>ul>li>a:hover, #navbar-darkgreen.navbar-default .navbar-nav>li>ul>li>a:focus, #navbar-darkgreen.navbar-default .navbar-nav>.active>a, #navbar-darkgreen.navbar-default .navbar-nav>.active>a:hover, #navbar-darkgreen.navbar-default .navbar-nav>.active>a:focus { color: rgba(51, 51, 51, 1); background-color: rgba(255, 255, 255, 1); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%); } #sidebar-darkgreen, #column-darkgreen { background-color: #006633; } #navbar-darkgreen.navbar-default .navbar-toggle { border-color: #006633; } #navbar-darkgreen.navbar-default .navbar-toggle:hover, #navbar-darkgreen.navbar-default .navbar-toggle:focus { background-color: #009933; } #navbar-darkgreen.navbar-default .navbar-nav>li>a, #navbar-darkgreen.navbar-default .navbar-nav>li>ul>li>a, #navbar-darkgreen.navbar-default .navbar-brand { color: #999999; } #navbar-darkgreen.navbar-default .navbar-toggle .icon-bar, #navbar-darkgreen.navbar-default .navbar-toggle:hover .icon-bar, #navbar-darkgreen.navbar-default .navbar-toggle:focus .icon-bar { background-color: #ffffff; } /* * Yellow navbar style */ #navbar-yellow.navbar-default { /* #99ff00 - #ccff00 */ font-size: 14px; background-color: rgba(153, 255, 0, 1); background: -webkit-linear-gradient(top, rgba(204, 255, 0, 1) 0%, rgba(153, 255, 0, 1) 100%); background: linear-gradient(to bottom, rgba(204, 255, 0, 1) 0%, rgba(153, 255, 0, 1) 100%); border: 0px; border-radius: 0; } #navbar-yellow.navbar-default .navbar-nav>li>a:hover, #navbar-yellow.navbar-default .navbar-nav>li>a:focus, #navbar-yellow.navbar-default .navbar-nav>li>ul>li>a:hover, #navbar-yellow.navbar-default .navbar-nav>li>ul>li>a:focus, #navbar-yellow.navbar-default .navbar-nav>.active>a, #navbar-yellow.navbar-default .navbar-nav>.active>a:hover, #navbar-yellow.navbar-default .navbar-nav>.active>a:focus { color: rgba(51, 51, 51, 1); background-color: rgba(255, 255, 255, 1); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%); } #sidebar-yellow, #column-yellow { background-color: #99ff00; } #navbar-yellow.navbar-default .navbar-toggle { border-color: #99ff00; } #navbar-yellow.navbar-default .navbar-toggle:hover, #navbar-yellow.navbar-default .navbar-toggle:focus { background-color: #ccff00; } #navbar-yellow.navbar-default .navbar-nav>li>a, #navbar-yellow.navbar-default .navbar-nav>li>ul>li>a, #navbar-yellow.navbar-default .navbar-brand { color: #999999; } #navbar-yellow.navbar-default .navbar-toggle .icon-bar, #navbar-yellow.navbar-default .navbar-toggle:hover .icon-bar, #navbar-yellow.navbar-default .navbar-toggle:focus .icon-bar { background-color: #ffffff; } 

Prueba esto también Esto funcionó para mí.

 .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color: #00a950; color: #000000; } 

¿Tienes que cambiar el CSS directamente? Qué pasa…

  

Si solo se trata de cambiar el color de la barra de navegación, mi sugerencia sería usar: Bootstrap Magic . Puede cambiar los valores de diferentes propiedades de la barra de navegación y ver una vista previa. Descargue el resultado como una hoja de estilo CSS personalizada o como un archivo de variables LESS. Puede cambiar los valores con campos de entrada y selectores de color. Y

En esta barra de navegación CSS, establezca su propio color:

 /* Navbar */ .navbar-default { background-color: #F8F8F8; border-color: #E7E7E7; } /* Title */ .navbar-default .navbar-brand { color: #777; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #5E5E5E; } /* Link */ .navbar-default .navbar-nav > li > a { color: #777; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #333; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #555; background-color: #E7E7E7; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #555; background-color: #D5D5D5; } /* Caret */ .navbar-default .navbar-nav > .dropdown > a .caret { border-top-color: #777; border-bottom-color: #777; } .navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret { border-top-color: #333; border-bottom-color: #333; } .navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret { border-top-color: #555; border-bottom-color: #555; } 

la mención de nombre de clase inversa y deficiente en twittter bootstrap los causa color blanco y negro. mejor no debes anular eso y agregar una clase cerca de eso y escribirte un estilo particular para eso

 my_style{ background-color:green; } 

enter image description here

  navbar-inverse { background-color: #F8F8F8; border-color: #E7E7E7; } 

Más de 25 códigos de Menús Nav Navotstrap

Ejemplo, solo prueba así

     

navabr.css

 /* navbar */ .navbar-default { background-color: #F8F8F8; border-color: #E7E7E7; } /* title */ .navbar-default .navbar-brand { color: #777; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #5E5E5E; } /* link */ .navbar-default .navbar-nav > li > a { color: #777; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #333; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #555; background-color: #E7E7E7; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #555; background-color: #D5D5D5; } /* caret */ .navbar-default .navbar-nav > .dropdown > a .caret { border-top-color: #777; border-bottom-color: #777; } .navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret { border-top-color: #333; border-bottom-color: #333; } .navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret { border-top-color: #555; border-bottom-color: #555; } /* mobile version */ .navbar-default .navbar-toggle { border-color: #DDD; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #DDD; } .navbar-default .navbar-toggle .icon-bar { background-color: #CCC; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #777; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #333; } } 

Los principales usos de color predeterminados son los siguientes:

  • Fondo de la barra de navegación: # F8F8F8
  • Borde de la barra de navegación: # E7E7E7
  • Color predeterminado: # 777
  • Nav-brand Hover Color: # 5E5E5E
  • Color de desplazamiento: # 333
  • Antecedentes activos: # D5D5D5
  • Color activo: # 555

usted puede aprender más http://fellowtuts.com/twitter-bootstrap/to-change-navbar-color-in-twitter-bootstrap-3/

Se puede hacer directamente mediante el uso del atributo style = “” en cualquier etiqueta html que desee anular, por ejemplo.

  

esto anula el CSS predeterminado de bootstrap.

No es necesario definir un conjunto completo de estilo o CSS por separado.