tl; dr - TWBSColor - Genera tu propia barra de navegación Bootstrap
Notas de la 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:
<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>
Uso de color predeterminado
Aquí están 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 desplazamiento ( #5E5E5Epara .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 de color personalizada:
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 le permitirá generar su tema:
TWBSColor - Genere su propia barra de navegación Bootstrap
[Actualización]: TWBSColor ahora genera 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 la coloración de menús desplegables
[Actualización]: TWBSColor ahora permite elegir su versión (se agregó soporte de Bootstrap 4)
!importantal final de cada una de las declaraciones CSS emitidas parece haber resuelto el problema. Ejemplo: secolor: #ffffff;conviertecolor: #ffffff !important;.Actualización 2020
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 otras navegaciones de Bootstrap.
Bootstrap 4.3+
El CSS requerido para cambiar la barra de navegación es mucho menor en Bootstrap 4 ...
Demostración personalizada de la barra de navegación de Bootstrap 4
Cambiar el color de fondo del enlace activo / flotante también funciona con el mismo CSS, pero debe ajustar el relleno si desea que el color bg llene toda la altura del enlace ...
py-0para eliminar el relleno vertical de toda la barra de navegación ...<nav class="navbar navbar-expand-sm navbar-custom py-0">..</nav>Bootstrap 4 Cambiar enlace y demostración de color de fondo
Ver también: Bootstrap 4 Cambiar el color del alternador de hamburguesas
Bootstrap 3
Demostración personalizada de la barra de navegación en Bootply
Si la barra de navegación tiene menús desplegables, agregue lo siguiente para cambiar los colores del menú desplegable:
Demo con menú desplegable
fuente
Me tomó un tiempo, pero descubrí que incluir lo siguiente fue lo que hizo posible cambiar el color de la barra de navegación:
fuente
background-imageagregado, lo que evitaría que TWBSColor funcione. ¿Podría conocer la versión de Bootstrap y su entorno, por favor? (tema adicional, bibliotecas CSS ...)Usar menos
También podría considerar compilar su propia versión. Pruebe http://getbootstrap.com/customize/ (que tiene una sección aparte para la configuración de las barras de navegación (barra de navegación predeterminada y barra de navegación invertida)) o descargue su propia copia desde https://github.com/twbs/bootstrap .
Encontrará la configuración de la barra de navegación en
variables.less.navbar.lessse usa para compilar la barra de navegación (depende devariables.lessymixins.less).Copie la 'sección predeterminada de la barra de navegación' y complete su propia configuración de color. Cambiar las variables
variables.lessserá la forma más fácil (cambiar la barra de navegación predeterminada o inversa no será un problema porque solo tiene una barra de navegación por página).No cambiará todas las configuraciones en la mayoría de los casos:
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 degradados y bordes a la barra de navegación.
fuente
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 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
fuente
¿Tienes que cambiar el CSS directamente? Qué pasa...
fuente
Prueba esto también. Esto funcionó para mí.
fuente
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 para 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 Less variables. Puede cambiar los valores con campos de entrada y selectores de color.
fuente
En esta barra de navegación CSS, establezca el color propio:
fuente
Ejemplo
Solo inténtalo así:
Expediente
navabr.cssLos usos de color principales predeterminados son los siguientes:
Puede obtener más información en Para cambiar el color de la barra de navegación en Twitter Bootstrap 3 .
fuente
La mención de nombre de clase inversa y predeterminada en Twitter Bootstrap hace que sean de color blanco y negro.
Mejor, no debe anular eso y agregar una clase cerca de eso y escribir su estilo particular para eso:
fuente
Utilizar:
Más de 25 códigos de menús de Nav de Bootstrap
fuente