Bootstrap 5 : crear un MENU- documentacion

Fecha Publicación:       14 de Junio de 2024
Fecha Modificación:       14 de Junio de 2024

Barra de navegación de Bootstrap

→ Bootstrap lo podemos descargar desde  https://getbootstrap.esdocu.com/

Clases para el menu en Bootstrap:  

.navbar →  Bootstrap nos facilita la creación de la barra principal de navegación de nuestra web con la clase navbar.

Etiqueta <nav>

Etiqueta <nav> → Para añadir esta barra a nuestro sitio web utilizaremos la etiqueta "<nav>",  que es la etiqueta de HTML 5 que identifica un elemento de navegación.

En caso de no usar esta etiqueta también podemos crear la barra de navegación usando un "<div>", pero en este caso tendremos que añadir el atributo role="navigation"

Etiqueta navbar-expand{-sm|-md|-lg|-xl}

La etiqueta .navbar-expand {-sm |-md |-lg | -xl}  → Indica el tamaño a partir del cual la barra se mostrará de forma expandida es decir de forma normal y no contraida (menu para mobil que solo muestra las rayas tipo hamburgueza).

Menu contraida 

Ejemplo:

En este ejemplo el menu se mantendra expandido desde el tamaño 768px del dispositivo para adelante y si es menos de este tamaño se contraera.

<nav class="navbar .navbar-expand-md">
</nav>

Tamaño predeterminado  de -md en Bootstrap.

@media (min-width: 768px) {
    .navbar-expand-md { }
}

 

 

// para decirle a boostrap que es un menu debemo agregarle la clase  navbar
// navbar-expand = Para que el menu sea 
<nav class="navbar navbar-expand">
</nav>

Referencia : 

https://ajgallego.gitbook.io/bootstrap-4/componentes-responsive/barra-de-navegacion

 

Articulo : 598 - Veces Leidas
Compartir Articulo:
×

¡Apóyame suscribiéndote a mi canal!

Tutoriales sobre Diseño Web