Navbar significa la barra de navegación y es una parte integral de una página web. Enumera muchos enlaces tanto dentro como fuera del sitio web y facilita la navegación entre las diferentes secciones. La tabla de contenido, los menús y los índices son algunos ejemplos comunes de barras de navegación.
Crear barras de navegación puede llevar mucho tiempo y ser confuso. Por lo tanto, las bibliotecas como Bootstrap son útiles con muchas clases y opciones integradas.
Ejemplo 1: Barra de navegación sin Bootstrap (Vanilla HTML CSS)
<!DOCTYPE html>
<html>
<head>
<title>Navbar Geeksforgeeks</title>
<style>
body {
margin: 0;
}
nav {
width: 100%;
}
ul {
margin: 0;
padding: 0;
}
li {
float: left;
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
font-size: 30px;
width: 12%;
list-style: none;
text-align: center;
}
a {
color: rgb(0, 102, 0);
text-decoration: none;
}
img {
width: 80%;
}
#image {
width: 24%;
}
#blankSpace {
width: 16%;
height: 34px;
}
</style>
</head>
<body>
<nav>
<ul>
<li id="image">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png"
alt="" /></li>
<li><a href="">Tutorials</a></li>
<li><a href="">Students</a></li>
<li><a href="">Courses</a></li>
<li id="blankSpace"><a href=""></a></li>
<li><a href="">Hire with us!</a></li>
<li><a href="">Login</a></li>
</ul>
</nav>
</body>
</html>
Explicaciones:
HTML:
- <nav>: el elemento principal que envuelve todos los botones e íconos dentro de nuestra barra de navegación.
- <ul>: (lista desordenada) Es una buena práctica almacenar todos los enlaces en la barra de navegación como una lista.
- <img>: Se utiliza para icono.
- <a>: Se utiliza como botones de la barra de navegación.
CSS:
- float: este atributo altera la alineación de los elementos de vertical a horizontal.
- estilo de lista: cuando se establece en ninguno, elimina las viñetas de las listas.
- text-decoration: Es responsable del subrayado de los enlaces.
- ancho: Se refiere al espacio horizontal que ocupa un elemento.
- altura: Espacio vertical que ocupa un elemento.
Producción:
Ejemplo 2: barra de navegación usando Bootstrap
<!DOCTYPE html>
<html>
<head>
<title>bootstrapNavbar Geeksforgeeks</title>
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous" />
<style>
div {
text-align: center;
}
img {
width: 80%;
}
.btn {
font-size: 25px;
color: rgb(0, 102, 0);
}
</style>
</head>
<body>
<div class="row">
<div class="col-3">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png"
alt="" />
</div>
<div class="col-4 row">
<div class="col-4">
<a href="#" class="btn">Tutorials</a>
</div>
<div class="col-4">
<a href="#" class="btn">Students</a>
</div>
<div class="col-4">
<a href="#" class="btn">Courses</a>
</div>
</div>
<div class="col-2 row"></div>
<div class="col-3 row">
<div class="col-8">
<a href="#" class="btn">Hire with us!</a>
</div>
<div class="col-4">
<a href="#" class="btn">Login</a>
</div>
</div>
</div>
</body>
</html>
Explicaciones: Como nuestro objetivo es una barra de navegación estática sin JavaScript, será factible usar grid en lugar de nav .
- Vincule el documento html con Bootstrap CDN (Red de entrega de contenido) oficial.
- Defina un div con fila de clase de arranque (esta clase nos ayuda a dividir una fila en columnas pequeñas).
- A continuación, defina cuatro divs con clase col-3, 4, 2 y 3 respectivamente (los números enteros corresponden al ancho de una columna) (ancho total-12).
- Cree divs anidados según sea necesario.
- Proporcione a todos los botones una clase de arranque btn que nos proporcione los efectos necesarios de relleno, margen y desplazamiento.
CSS:
- Esta vez, nuestro código CSS es mucho más pequeño e incluye algunos estilos menores, como el tamaño y el color de la fuente.
- El relleno y el margen son atendidos por clases de arranque.
- Todo el diseño de la barra de navegación está hecho con filas y columnas de arranque, lo que redujo aún más nuestro CSS.
Producción:
Diferencias entre los dos enfoques:
- CSS en la versión de arranque es muy inferior.
- El código vanilla es muy flexible en comparación con bootstrap.
- Escribir código de vainilla es muy tedioso, mientras que una vez que se entiende el código de arranque se vuelve muy fácil.