Tengo un problema al intentar crear un menú receptivo o un botón desplegable con Bootstrap 5 Todo parece estar bien. Aparece el icono de navegación y el icono desplegable. Pero no funciona. Cuando hice clic en el icono de nav o el botón dropdown , no aparece ningún dropdown menu .
Quiero mencionar especialmente que también incluí el archivo jquery . Pero no funcionó. ¿Alguien puede decirme qué está pasando aquí?
Una última cosa, enfrenté varios problemas con algunas otras clases de bootstrap como mr-auto , ml-auto , etc. ¿Hay algún error o las nuevas clases vienen con el bootstrap 5 para este tipo de trabajo?
Aquí está mi código:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Bootstrap</title> <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" /> </head> <body> <nav class="navbar navbar-dark bg-dark navbar-expand-md"> <a href="#" class="navbar-brand">DemoTech</a> <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar" > <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse" id="navbar" navbar> <ul class="navbar-nav"> <li class="nav-item"><a href="#" class="nav-link">Home</a></li> <li class="nav-item"><a href="#" class="nav-link">About</a></li> <li class="nav-item"><a href="#" class="nav-link">Contact</a></li> </ul> </div> </nav> <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> </body> </html>aquí la identificación 'data-bs-target'
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#kickMyAss">y div id debe ser idéntico
<div id="kickMyAss" class="collapse navbar-collapse">Usa "data-toggle" este atributo usado en Bootstrap 3 necesita usar este atributo "data-bs-toggle"
Asegúrese de haber agregado el enlace jsDeliver CDN desde la página de inicio de arranque para Javascript y CSS en la etiqueta principal.
**<!-- CSS only -->** <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous"> **<!-- JavaScript Bundle with Popper -->** <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> Ha utilizado este atributo data-toggle utilizado en versiones antiguas de Bootstrap, mientras que en Bootstrap 5 necesita usar este atributo data-bs-toggle y otra cosa más importante es que tiene make ( aria-expanded="true" ).
Tuve problemas con los menús desplegables en el sitio actual que estoy editando. ¡Esta noche finalmente tengo un menú de navegación con menús desplegables que permite que el menú desplegable se cierre después de hacer clic en los enlaces! Lo diseñé para que se viera whoo hoo a través de una plantilla diferente. Sin embargo, cuando agrego el menú al sitio que estoy editando, el menú de alternancia móvil no se abre. ¿Cómo puedo arreglar eso? ¡Gracias! :--)
<!-- ======= Header ======= --> <header id="header" class="fixed-top d-flex align-items-center"> <div class="container"> <div class="header-container d-flex align-items-center justify-content-between"> <div class="logo"> <!--<h1 class="text-light"><a href="index.html">LOGO TEXT</a></h1>--> <!-- Uncomment below if you prefer to use an image logo --> <a class="scrollto" href="#intro"><img src="img/UCF-Logo.svg" height="50" alt="UCF" title="UCF" class="img-fluid top-logo wow bounceOut"></a> <!-- <a href="index.html"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>--> </div> <nav id="navbar" class="navbar"> <ul> <!--<li><a class="nav-link scrollto active" href="#hero">Home</a></li> <li><a class="nav-link scrollto" href="#about">About</a></li> <li><a class="nav-link scrollto" href="#services">Services</a></li> <li><a class="nav-link scrollto " href="#portfolio">Portfolio</a></li> <li><a class="nav-link scrollto" href="#team">Team</a></li>--> <li class="dropdown"><a href="#"><span>About <i class="fas fa-arrow-down"></i></span></a> <ul> <li><a class="scrollto" href="#about">About</a></li> <li><a class="scrollto" href="#more-about">Detailed Info</a></li> <li><a class="scrollto" href="#about">DropDown 03</a></li> <li><a class="scrollto" href="#about">DropDown 04</a></li> <li><a class="scrollto" href="#about">DropDown 05</a></li> </ul> </li> <li class="dropdown"><a href="#"><span>DropDown <i class="fas fa-arrow-down"></i></span></a> <ul> <li><a class="scrollto" href="#about">DropDown 06</a></li> <li><a class="scrollto" href="#about">DropDown 07</a></li> <li><a class="scrollto" href="#about">DropDown 08</a></li> <li><a class="scrollto" href="#about">DropDown 09</a></li> <li><a class="scrollto" href="#about">DropDown 10</a></li> </ul> </li> <li class="dropdown"><a href="#"><span>DropDown <i class="fas fa-arrow-down"></i></span></a> <ul> <li><a class="scrollto" href="#contact">Contact Info</a></li> <li><a class="scrollto" href="#about">DropDown 12</a></li> <li><a class="scrollto" href="#about">DropDown 13</a></li> <li><a class="scrollto" href="#about">DropDown 14</a></li> <li><a class="scrollto" href="#about">DropDown 15</a></li> </ul> </li> <!--<li><a href="#">Drop Down 2</a></li> <li><a href="#">Drop Down 3</a></li> <li><a href="#">Drop Down 4</a></li> </ul> </li>--> <!--<li><a class="nav-link scrollto" href="#contact">Contact</a></li>--> <li><a class="register scrollto" href="#about">REGISTER! <i class="fas fa-smile-beam fa-x2"></i></a></li> </ul> <i class="fas fa-bars mobile-nav-toggle"></i> </nav><!-- .navbar --> </div><!-- End Header Container --> </div> </header><!-- End Header --><!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar w/ text</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarText"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> </ul> <span class="navbar-text"> Navbar text with an inline element </span> </div> </nav> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>Los atributos data-* utilizados en Bootstrap 4 han sido reemplazados por data-bs-* en Bootstrap 5
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar"> <span class="navbar-toggler-icon"></span> </button> Como se explica en los documentos , los atributos de datos para todos los complementos de JavaScript ahora tienen un espacio de nombres para ayudar a distinguir la funcionalidad de Bootstrap de terceros y de su propio código. Esto significa que cualquier componente de javascript (Colapso, Barra de navegación, Carrusel, Desplegable, Pestañas, Modal, etc.) solo funcionará usando los atributos data-bs-... .
Bootstrap 5 es una actualización importante con cambios importantes. También vea aquí que ml-auto / mr-auto han cambiado a ms-auto / me-auto .