Una barra de navegación es un encabezado de navegación que se coloca en la parte superior de la página que ayuda a que sea más fácil de usar para 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. La clase .navbar se usa para crear una barra de navegación. La barra de navegación puede extenderse o contraerse, según el tamaño del dispositivo, es decir, la barra de navegación se usa para crear el diseño receptivo usando la clase .navbar-expand-xl|lg|md|sm . Por lo tanto, proporciona flexibilidad a la página web.
Requisitos previos: para comprender el concepto de la barra de navegación, se requieren conocimientos básicos de HTML , CSS y Bootstrap .
Guía paso a paso para implementar Navbar en Bootstrap:
- Bootstrap CDN: para usar los fragmentos de código proporcionados por Bootstrap, debemos agregar los siguientes archivos CDN dentro del elemento de encabezado HTML.
<enlace rel=”hoja de estilo” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” integridad=”sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z” crossorigin=”anónimo”/>
<script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js” integridad=”sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj” crossorigin=”anónimo”></ script>
<script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js” integridad=”sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN” crossorigin= ”anónimo”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js” integridad=”sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV” crossorigin=”anónimo”></script>
- Agregue la etiqueta <nav> con .navbar y . clase navbar-expand-lg navbar-dark bg-dark en la etiqueta <body>.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"></nav>
- Para agregar el logotipo de la marca, necesitamos una clase .navbar-brand que contendrá la imagen junto con el atributo alt , si la imagen no se carga correctamente, se mostrará el texto.
<a class="navbar-brand" href="#">
- Necesitamos un botón de alternar agregando las clases .navbar-toggler y .collapse navbar-collapse que mostrarán u ocultarán el elemento del menú al hacer clic en el botón.
- Ahora, agregue los elementos de navegación dentro de la barra de navegación.
Implementación: necesitamos la siguiente sintaxis para comprender el funcionamiento de Navbar:
- Elemento de navegación HTML: El elemento de navegación HTML es un elemento contenedor similar al elemento div de HTML. Usamos el elemento de navegación HTML para agregar una barra de navegación a nuestro sitio web.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"></nav>
- Elementos de navegación dentro de la barra de navegación: Para agregar los elementos de navegación dentro de la barra de navegación usando la siguiente sintaxis:-
<a class="nav-link active" href="#">
Home
<span class="sr-only">(current)</span>
</a>
<a class="nav-link" href="#">About Us</a>
<a class="nav-link" href="#">Tutorials</a>
<a class="nav-link disabled" href="#"
tabindex="-1" aria-disabled="true">
Disabled
</a>
- Enlace de navegación: Para agregar el enlace en la página web usando la siguiente sintaxis:-
<a class="nav-link" href="#">About Us</a>
Ejemplo: Este ejemplo ilustra la barra de navegación Bootstrap. Hemos agregado un logo y alguna información para la página web. Si hace clic en el icono de la barra de navegación, se muestra toda la información relacionada con la página web en forma de lista.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN-->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous" />
<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/popper.js@1.16.1/dist/umd/popper.min.js"
integrity=
"sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity=
"sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous">
</script>
<!--CSS-->
<style>
.navbar-image {
width: 80px;
height: 80px;
padding: 10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"
class="navbar-image"
alt="GFG logo" />
</a>
<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">
<div class="navbar-nav ml-auto">
<a class="nav-link active" href="#">
Home <span class="sr-only">(current)</span>
</a>
<a class="nav-link" href="#">About Us</a>
<a class="nav-link" href="#">Tutorials</a>
<a class="nav-link" href="#">Student</a>
<a class="nav-link" href="#">Courses</a>
<a class="nav-link" href="#">Help</a>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1 class="display-3 text-success">GeeksforGeeks</h1>
<h1 class="display-5">DSA Course</h1>
<hr class="my-2" />
<p class="main text-justify">
The one-stop solution is GeeksforGeeks
DSA Self-Paced Course with Lifetime
Access is a complete package for you
to learn and master all the Data
Structure Concepts.
</p>
<a class="btn btn-primary btn-md"
href="#" role="button">Know more</a>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por gangwarjacob y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA