➜ Menú de navegación

Expresamos el códido:

    <!-- menu-->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#"></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 mx-auto">
            <li class="nav-item active">
              <a class="nav-link" href="index.html">Inicio <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="vestidos.html">Vestidos</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="nosotros.html">Nosotros</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="contacto.html">Contacto</a>
            </li>
          </ul>
        </div>
      </nav>
      <!-- menu /-->

Este código crea un menú de navegación utilizando Bootstrap 4.5. Aquí está el desglose de lo que hace cada sección:

1. Estructura del menú (<nav>):

   • Se utiliza la clase navbar junto con navbar-expand-lg para hacer que el menú sea expandible en pantallas grandes y colapsable en pantallas pequeñas. La clase navbar-light bg-light le da al menú un fondo claro y un estilo de texto oscuro.

2. Marca del menú (<a class="navbar-brand">):

   • La etiqueta <a> con la clase navbar-brand está destinada a mostrar el logo o nombre de la marca en el menú, aunque en este caso está vacía (href="#").

3. Botón de colapsado (<button>):

   • El botón con las clases navbar-toggler y navbar-toggler-icon es el botón de hamburguesa que aparece en pantallas pequeñas. Este botón permite colapsar y expandir el menú. El atributo data-toggle="collapse" y data-target="#navbarSupportedContent" están configurados para que el botón controle la visibilidad del menú cuando se hace clic.

4. Sección de elementos de navegación (<div class="collapse navbar-collapse">):

   • Esta sección envuelve el contenido del menú y usa la clase collapse navbar-collapse para que el menú sea colapsable en pantallas pequeñas.

5. Lista de elementos del menú (<ul class="navbar-nav mx-auto">):

   • Los elementos del menú están organizados en una lista <ul>, con cada ítem en un <li> y la clase nav-item. La clase mx-auto centra el menú horizontalmente.
   • Elementos individuales (<li class="nav-item">):
     • Cada <li> contiene un <a> con la clase nav-link, que define un enlace del menú. Los enlaces apuntan a diferentes páginas: Inicio, Vestidos, Nosotros, y Contacto.
     • El primer elemento (Inicio) también tiene la clase active, lo que indica que es la página actual, y un span con la clase sr-only que oculta el texto "(current)" para los usuarios que no necesitan tecnología asistida.

Este menú de navegación es completamente responsive y cambia su apariencia según el tamaño de la pantalla del dispositivo en el que se visualiza.