Navbar es una sección de una aplicación web que permite a los usuarios navegar a diferentes secciones del sitio web. Como sugiere el nombre, una barra de navegación es básicamente una barra de navegación. Bootstrap 4 presenta una clase de barra de navegación incorporada que nos permite crear barras de navegación. Además, podemos crear barras de navegación personalizadas definiendo los distintos estilos CSS según nuestros requisitos. En este artículo, demostraremos los métodos para alinear dos barras de navegación utilizando clases integradas de CSS y estilos CSS personalizados.
Ejemplo 1: en el primer enfoque, hemos utilizado la clase de barra de navegación incorporada de Bootstrap 4. Se colocan dos barras de navegación una tras otra. La primera barra de navegación tiene un fondo oscuro y los enlaces de navegación están alineados a la izquierda, mientras que los botones «Registrarse» y «Cerrar sesión» están alineados a la derecha. La primera barra de navegación también consta de un menú desplegable que tiene enlaces a varias secciones del sitio web. La segunda barra de navegación tiene los enlaces de navegación alineados a la derecha y el texto sin formato con un hipervínculo alineado a la izquierda. Ambas barras de navegación responden al tamaño de la pantalla. El botón de alternancia de la barra de navegación aparece cuando se reduce el tamaño de la pantalla y desaparece cuando aumenta el tamaño de la pantalla. Cuando se hace clic en el botón de alternar, se muestra la barra de navegación.
Implementación de código:
HTML
<!DOCTYPE html> <html> <head> <!--import bootstrap cdn--> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity= "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!--import jquery cdn--> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity= "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity= "sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"> </script> </head> <body> <!--First navbar--> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" 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> <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> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#"> Action </a> <a class="dropdown-item" href="#"> Another action </a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#"> Something else here </a> </div> </li> </ul> <button class="btn btn-success my-2 my-sm-0 mx-2" type="submit"> Register </button> <button class="btn btn-danger my-2 my-sm-0" type="submit"> Logout </button> </div> </nav> <!--Second navbar--> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> We have changed our Privacy Policy. To know more <a href="#" class="mx-1">click here</a>. <ul class="navbar-nav ml-auto"> <li class="nav-item nav-link" href="#">About Us </li> <li class="nav-item nav-link" href="#">Contact Us </li> <li class="nav-item nav-link" href="#">Explore </li> </ul> </div> </nav> </body> </html>
Producción:
Ejemplo 2: en este enfoque, las barras de navegación se crean utilizando estilos CSS personalizados. La división de clase topnav representa la primera barra de navegación y la división de clase bottomnav representa la segunda barra de navegación. La primera barra de navegación tiene los enlaces de navegación alineados a la izquierda y el enlace de inicio de sesión a la derecha. La segunda barra de navegación tiene los enlaces de navegación a la izquierda y los botones «registrarse» y «cerrar sesión» a la derecha. A diferencia del ejemplo anterior, las barras de navegación de este ejemplo no responden. Las barras de navegación no se adaptan al tamaño de la pantalla.
Implementación de código:
HTML
<!DOCTYPE html>
<html>
<head>
<!--import bootstrap cdn-->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<style type="text/css">
.topnav {
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
background-color: #DCEEFF;
overflow: hidden;
height: 40px;
padding: 8px;
}
.bottomnav {
margin-right: 10px;
margin-left: 10px;
background-color: #E5E5E5;
overflow: hidden;
height: 40px;
padding: 5px;
}
a {
color: black;
padding-right: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#">Home</a>
<a href="#">Feature</a>
<a href="#">Deals</a>
<a href="#">Blog</a>
<a href="#" class="float-right">Login</a>
</div>
<div class="bottomnav">
<a class="active" href="#">More</a>
<a href="#">Contact</a>
<a href="#">About Us</a>
<a href="#">Link</a>
<a class="btn btn-danger btn-sm
float-right mx-2 mb-3">Logout</a>
<a class="btn btn-success btn-sm
float-right">Register</a>
</div>
</body>
</html>
Producción:
Navegador compatible:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
HTML es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
CSS es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por Shreyasi_Chakraborty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA