He seguido el código de BootStrap de la siguiente manera:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <!-- Nav Bar --> <nav class="navbar bg-dark navbar-expand-lg navbar-dark"> <a class="navbar-brand" href="index.html">One Basket</a> <button class="navbar-toggler ms-auto" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarToggleExternalContent2" aria- controls="navbarToggleExternalContent2" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarToggleExternalContent2"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="">Contact</a> </li> <li class="nav-item"> <a class="nav-link" href="">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="">Download</a> </li> </ul> </div> </nav>También agregué el CSS de la documentación de arranque y el javascript al archivo HTML. El JS está al final antes de la etiqueta del cuerpo cerrado, tal como dice en el sitio web de arranque.
El CSS es la primera etiqueta de enlace en el encabezado. Pero cuando trato de presionar el botón no pasa nada.
Tiene atributos incorrectos para que funcione de manera predeterminada, simplemente reemplace data-mdb-toggle="collapse" data-mdb-target="#navbarToggleExternalContent2" con data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent2" , consulte (en mi CodeSnippet I usando BS v5.1):
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <!-- Nav Bar --> <nav class="navbar bg-dark navbar-expand-lg navbar-dark"> <a class="navbar-brand" href="index.html">One Basket</a> <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent2" aria- controls="navbarToggleExternalContent2" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarToggleExternalContent2"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="">Contact</a> </li> <li class="nav-item"> <a class="nav-link" href="">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="">Download</a> </li> </ul> </div> </nav>