bootstrap-4 - schemes - header con bootstrap 4

Color de la barra de navegación de Bootstrap 4

Question

En Bootstrap 4, ¿cómo hago para cambiar el color de fondo de una barra de navegación? El código de twbscolor no funciona. Quiero que el color de fondo sea diferente y que el color de la fuente sea blanco.

<nav class="navbar navbar-toggleable-md navbar-light bg-danger">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Jordan Baron</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</div>
</nav>

Answer 1

Entiendo. Esto es muy simple. Usando la clase bg puedes lograr esto fácilmente. Deja que te enseñe:

 <nav class="navbar navbar-expand-lg navbar-dark navbar-full bg-primary"></nav>

Esto te da la barra de navegación azul predeterminada

Si desea cambiar su color favorito, simplemente use la etiqueta de estilo dentro de la navegación:

<nav class="navbar navbar-expand-lg navbar-dark navbar-full" style="background-color: #FF0000">

Answer 2

Si lee la documentación de Bootstrap 4, Esquemas de color , responderá sus preguntas.

Answer 3

puede escribir! importante delante del valor de propiedad de color de fondo como este, cambiará el color de los enlaces.

.nav-link {
color: white !important;
}

Answer 4

Actualización 2019

Recuerde que cualquier anulación de CSS que defina debe ser la misma especificidad de CSS o mayor para anular correctamente el CSS de Bootstrap.

Bootstrap 4.1+

La barra de navegación es transparente por defecto. Si solo desea cambiar el color de fondo, puede hacerlo simplemente aplicando el color a <navbar class="bg-custom"> , pero recuerde que eso no cambiará los otros colores, como los enlaces, el desplazamiento y el menú desplegable colores del menú

Aquí hay CSS que cambiará los colores relevantes de la barra de navegación en Bootstrap 4 ...

/* change the background color */
.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:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #ffffff;
}

Demostración: http://www.codeply.com/go/U9I2byZ3tS

Anular la barra de navegación clara u oscura

Si está utilizando las clases de navbar-light navegación Bootstrap 4 Navbar navbar-light o navbar-dark , entonces use esto en las anulaciones. Por ejemplo, cambiando los colores del enlace de la barra de navegación ...

.navbar-light .nav-item.active .nav-link,
.navbar-light .nav-item:focus .nav-link,
.navbar-light .nav-item:hover .nav-link {
color: #ffffff;
}

Al realizar cualquier personalización de Bootstrap, debe comprender la especificidad de CSS . Las anulaciones en su CSS personalizado necesitan usar selectores que sean tan específicos como bootstrap.css. Lee mas

Barra de navegación transparente

Tenga en cuenta que la barra de navegación de Bootstrap 4 es transparente de forma predeterminada. Use navbar-dark para colores de fondo oscuros / audaces, y use navbar-light si la barra de navegación es de un color más claro. Esto afectará el color del texto y el color del icono de alternador como se explica aquí .

Relacionado: https://.com/a/18530995/171456

Answer 5

Actualización 2019 - Bootstrap v4.1 +

Aquí hay una forma mucho más simple de cambiar el color de fondo de la barra de navegación.

Simplemente use .navbar-dark lugar de .navbar-light y agregue su clase de color de fondo personalizada como .bg-company-red

.navbar-dark hará que todos tus enlaces sean blancos.

HTML

<nav class="navbar navbar-dark bg-company-red">

Estilo CSS ...

.bg-company-red {
background-color: darkred !important;
}

Consulte http://getbootstrap.com/docs/4.1/components/navbar/#color-schemes para obtener documentación oficial.