Bienvenido a la Comunidad de Treehouse

¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.

¿Buscas aprender algo nuevo?

Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de

Inicia tu prueba gratuita

CSS Conceptos básicos de Bootstrap Usar Componentes Bootstrap Construyendo una barra de navegación

El menú de hamburguesa se expande pero no se contrae

El menú de hamburguesa se expande pero no se contrae.

<!DOCTYPE html>
<html lang=es>

<head>

  <!-- Etiquetas meta requeridas -->
  <meta charset=utf-8>
  <meta name=viewport contenido=width=device-width, initial-scale=1>

  <!-- Bootstrap CSS -->
  <link href=https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css rel=stylesheet
    integrity=sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1 crossorigin=anonymous>

  <title>Conferencia Full Stack</title>


</head>

<body>
  <!-- Barra de Navegación -->
  <nav class=navbar navbar-expand-lg navbar-light bg-light>
    <div class=container-fluid>
      <a class=navbar-brand href=#>Barra de Navegación</a>
      <botón class=navbar-toggler type=button data-bs-toggle=collapse data-bs-target=#navbarNavAltMarkup
        aria-controls=navbarNavAltMarkup aria-expanded=falso aria-label=Alternar navegación>
        <span class=navbar-toggler-icon></span>
      </botón>
      <div class=collapse navbar-collapse id=navbarNavAltMarkup>
        <div class=navbar-nav>
          <a class=nav-link aria-current=page href=#>Inicio</a>
          <a class=nav-link href=#>Características</a>
          <a class=nav-link href=#>Precios</a>
          <a class=nav-link href=# tabindex=-1 aria-disabled=verdadero>Deshabilitado</a>
        </div>
      </div>
    </div>
  </nav>

  <!-- Fin de la Barra de Navegación -->

  <div class=container pt-4>
    <!-- acerca de -->
    <div class=fila>
      <div class=col-lg>
        <h3 class=mb-4>Acerca de Full Stack Conf</h3>
        <img class=mb-4 img-fluid rounded src=img/pdx.jpg alt=Espero que esto le ahorre mucho tiempo a algunas personas si se quedan atrapadas...>
        <p>¡La hermosa ciudad de Portland, Oregón será la ciudad anfitriona de Full Stack Conf!</p>
        <p>Explora el futuro de JavaScript con un equipo de profesionales de la industria. Descubre nuevas técnicas para avanzar
          tu carrera como desarrollador web.</p>
      </div>
      <div class=col-lg>
        <h3 class=mb-4>Oradores expertos</h3>
        <p>¡Nuestro alineación de oradores expertos acaba de ser anunciada, así que no esperes demasiado antes de conseguir tus entradas!</p>
        <p>¿Quieres conocer la comunidad internacional de JavaScript y compartir habilidades con algunos de los mejores expertos,
          hackers y creadores del mundo? Sé el primero en saber qué esperar del futuro de JavaScript.</p>
        <p>Full Stack Conf se compromete a ser inclusiva y acogedora para todos. Esperamos otro
          intenso día de aprendizaje y colaboración.</p>
      </div>
      <div class=col-lg>
        <h3 class=mb-4>Lo Que Aprenderás</h3>
        <ul>
          <li><strong>MongoDB</strong>: base de datos NoSQL</li>
          <li><strong>Express</strong>: Marco de trabajo para Node</li>
          <li><strong>React</strong>: biblioteca de JavaScript</li>
          <li><strong>Node.js</strong>: entorno de JavaScript</li>
          <li><strong>ES2015</strong>: última versión de JavaScript</li>
          <li><strong>Babel</strong>: compilador de JavaScript</li>
        </ul>
      </div>
    </div> <!-- fin de acerca de -->

    <!-- Ponentes -->
    <h1 class=display-4 text-center my-5 text-muted>Ponentes</h1>
    [Las biografías de los oradores van aquí]
    <!-- fin de Ponente -->

    <!-- Horario -->
    <h1 class=display-4 text-center my-5 text-muted>Horario</h1>
    [El horario va aquí]
    <!-- fin de Horario -->



  </div> <!-- fin del contenedor -->



  <!-- JavaScript Opcional; ¡elige uno de los dos! -->

  <!-- Opción 1: Bootstrap Bundle con Popper -->
  <script src=https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js
    integrity=sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW
    crossorigin=anonymous></script>

  <!-- Opción 2: Popper y Bootstrap JS Separados -->

  <script src=https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js
    integrity=sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU
    crossorigin=anonymous></script>
  <script src=https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js
    integrity=sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj
    crossorigin=anonymous></script>

</body>

</html>

1 Respuesta

Utilizas bootstrap.bundle.min.js y bootstrap.min.js. Deberías seleccionar uno como dice el comentario: "¡elige uno de los dos!", y comenta la otra opción ;-)

Jonathan Hermansen, muchas gracias.