El color de la barra de navegación se puede cambiar en Bootstrap usando 2 métodos:
Método 1: Usar las clases de color incorporadas
Cambiar el color del texto
El color del texto de la barra de navegación se puede cambiar usando dos clases incorporadas:
- navbar-light: esta clase establecerá el color del texto en oscuro. Esto se usa cuando se usa un color de fondo claro.
- navbar-dark: esta clase establecerá el color del texto en claro. Esto se usa cuando se usa un color de fondo oscuro.
Cambiar el color de fondo:
Bootstrap 4 tiene algunas clases incorporadas para los colores de cualquier fondo. Estos se pueden usar para establecer el color del fondo de la barra de navegación. Las diversas clases de fondo disponibles son:
- .bg-primary: Esto establece el color en el color primario.
- .bg-secundario: Esto establece el color al color secundario.
- .bg-success: Esto establece el color del éxito.
- .bg-danger: Esto establece el color al color de peligro.
- .bg-warning: Esto establece el color en el color de advertencia.
- .bg-info: Esto establece el color en el color de información.
- .bg-light: Esto establece el color al color de la luz.
- .bg-dark: Esto establece el color en el color oscuro.
- .bg-white: Esto establece el color en el color blanco.
- .bg-transparent: Esto establece que la barra de navegación sea transparente.
Ejemplo:
html
<!DOCTYPE html> <html> <head> <title> How to change navigation bar color in Bootstrap ? </title> <!-- Include Bootstrap CSS --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <!-- Navbar text is dark and background is light --> <nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#"> Light color background </a> </nav> <nav class="navbar navbar-light bg-warning"> <a class="navbar-brand" href="#"> Warning color background </a> </nav> <!-- Navbar text is light and background is dark --> <nav class="navbar navbar-dark bg-dark"> <a class="navbar-brand" href="#"> Dark color background </a> </nav> <nav class="navbar navbar-dark bg-primary"> <a class="navbar-brand" href="#"> Primary color background </a> </nav> <nav class="navbar navbar-dark bg-secondary"> <a class="navbar-brand" href="#"> Secondary color background </a> </nav> <nav class="navbar navbar-dark bg-success"> <a class="navbar-brand" href="#"> Success color background </a> </nav> <div class="container"> <h1 style="color: green">GeeksforGeeks</h1> <b> How to change navigation bar color in Bootstrap ? </b> <p>The above navigation bars use some of the default color classes available in Bootstrap4.</p> </div> </body> </html>
Producción:
Método 2: crear una clase personalizada para la barra de navegación
Se puede crear una clase personalizada para especificar el color de fondo y el color del texto de la barra de navegación. Esta clase se diseña usando CSS de acuerdo con los valores requeridos. Los nombres de las clases se mantienen de manera que anulen las clases de la barra de navegación incorporada.
El color de fondo se establece especificando directamente la propiedad background-color con el color necesario.
html
/* Modify the background color */
.navbar-custom {
background-color: lightgreen;
}
El texto de la barra de navegación y el color del texto de la marca se pueden configurar mediante las clases .navbar-text y .navbar-brand . Estas son las clases de la barra de navegación incorporada que se anulan usando el mismo nombre de clase. El color del texto se especifica utilizando la propiedad color .
html
/* Modify brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: green;
}
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
How to change navigation bar color in Bootstrap ?
</title>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
/* Modify the background color */
.navbar-custom {
background-color: lightgreen;
}
/* Modify brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: green;
}
</style>
</head>
<body>
<!-- Navbar text is dark and background is light -->
<nav class="navbar navbar-custom">
<a class="navbar-brand" href="#">
Custom color background navbar
</a>
</nav>
<div class="container">
<h1 style="color: green">GeeksforGeeks</h1>
<b>How to change navigation bar
color in Bootstrap ?</b>
<p>The above navigation bar uses a
custom class for changing the colors.</p>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA