Se utiliza una barra de navegación en cada sitio web para que sea más fácil de usar, de modo que la navegación a través del sitio web sea fácil y el usuario pueda buscar directamente el tema de su interés. Hay dos formas siguientes de mostrar una barra de navegación negra.
Uso de las clases .navbar-dark y .bg-dark : la clase .navbar-dark de bootstrap hace que el texto de la barra de navegación sea blanco y la clase .bg-dark hace que el color de fondo de laclase de la barra de navegación sea negro .
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Geeksforgeeks</a> <div class="collapse navbar-collapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Course</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Job Portal</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"/> <button class="btn btn-light my-2 my-sm-0" type="submit"> Search </button> </form> </div> </nav> </body> </html>
Producción:
Producción
Establecer el color de fondo usando la propiedad de estilo : podemos establecer el color de fondo de la barra de navegación usando la propiedad de estilo de la etiqueta <nav> .
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: black" > <a class="navbar-brand" href="#">Geeksforgeeks</a> <div class="collapse navbar-collapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Course</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Job Portal</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"/> <button class="btn btn-light my-2 my-sm-0" type="submit"> Search </button> </form> </div> </nav> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA