En este artículo, aprenderemos sobre el complemento desplegable de Bootstrap. Estas son superposiciones contextuales alternables para adjuntar algunas listas de enlaces, opciones y más. El complemento Javascript de arranque lo hace receptivo e interactivo y estos menús desplegables se alternan haciendo clic en lugar de pasar el mouse sobre él. Es necesario incluir la biblioteca popper.js de terceros que hace posible la detección de ventanas gráficas y el posicionamiento dinámico. Los complementos de CSS y Javascript que son esenciales para los menús desplegables se describen a continuación.
Acercarse:
- Envuelva los elementos secundarios dentro de una clase .dropdown.
- Podemos usar un botón o una etiqueta de anclaje para alternar. Para alternar necesitamos usar la clase .dropdown-toggle y agregar el elemento data-bs-toggle=”dropdown” a la clase principal.
- Para hacer que los elementos del menú desplegable usen la clase .dropdown-menu. Use la clase .dropdown-item con cada nombre de elemento.
Paso 1: Incluya Bootstrap CSS en la sección HTML <head> para cargar la hoja de estilo.
<enlace href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css” rel=”stylesheet” integridad=”sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC” crossorigin=” anónimo”/>
Agregue el complemento y la dependencia de JavaScript de Bootstrap.
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js” integridad=”sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM” crossorigin= ”anónimo”></script>
Paso 2: podemos copiar directamente la plantilla de inicio de Bootstrap como se indica en la documentación oficial de Bootstrap.
Paso 3: En este paso, usaremos la clase desplegable de arranque , como se explica a continuación:
- Envuelva los elementos secundarios dentro de una clase .dropdown .
- Podemos usar un botón o una etiqueta de anclaje para alternar. Para alternar, necesitamos usar la clase .dropdown-toggle y agregar el elemento data-bs-toggle=”dropdown” a la clase principal.
- Para hacer el menú desplegable, los elementos del menú usan la clase .dropdown-menu . Use la clase .dropdown-item con cada nombre de elemento. Utilizaremos el enfoque anterior y haremos el menú desplegable con diferentes casos. Discutámoslo uno por uno.
Menú desplegable a través del botón: podemos hacer un menú desplegable desde un botón con cualquiera de las clases .btn con algunos cambios en el marcado como agregar data-bs-toggle=”dropdown” y aria-expanded=”false” como se indica a continuación. Para alternar, necesitamos usar .dropdown-toggle .
Ejemplo 1: este ejemplo ilustra el uso de una clase desplegable en Bootstrap donde se usa la clase data-bs-toggle cuyo valor se establece en el menú desplegable.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Bootstrap CSS --> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> </head> <body> <h2 class="text-success">GeeksforGeeks</h2> <div class="dropdown"> <h5>Course List</h5> <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul class="dropdown-menu"> <li> <a class="dropdown-item" href="#">Algo</a> </li> <li> <a class="dropdown-item" href="#">DS</a> </li> <li> <a class="dropdown-item" href="#">HTML</a> </li> <li> <a class="dropdown-item" href="#">CSS</a> </li> <li> <a class="dropdown-item" href="#">JS</a> </li> </ul> </div> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity= "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </body> </html>
Producción:
Menú desplegable a través de la etiqueta de anclaje<a></a>: podemos hacer un menú desplegable a partir de una etiqueta de anclaje <a></a> con cualquier clase .btn con algunos cambios en el marcado, como agregar data-bs-toggle=”dropdown ” y aria-expanded=”false” como se indica a continuación. Para alternar, necesitamos usar el . menú desplegable .
Ejemplo 2: este ejemplo ilustra el uso de la etiqueta de anclaje para hacer el menú desplegable en Bootstrap.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Bootstrap CSS --> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> </head> <body> <h2 class="text-success">GeeksforGeeks</h2> <div class="dropdown"> <h5>Dropdown using Anchor tag</h5> <a class="btn btn-success dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown Link </a> <ul class="dropdown-menu"> <li> <a class="dropdown-item" href="#">Algo</a> </li> <li> <a class="dropdown-item" href="#">DS</a> </li> <li> <a class="dropdown-item" href="#">HTML</a> </li> <li> <a class="dropdown-item" href="#">CSS</a> </li> <li> <a class="dropdown-item" href="#">JS</a> </li> </ul> </div> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity= "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> </body> </html>
Producción:
Variante de color en los menús desplegables: podemos hacer botones desplegables de una variedad de colores haciendo uso de las clases de Bootstrap disponibles para botones como .btn-primary para azul, .btn-danger para rojo, .btn-secundario para gris, etc.
Ejemplo 3: Hemos usado las clases de botón en Bootstrap para hacer el botón con una variante de color. Aquí, este ejemplo ilustra las clases primaria y exitosa de Bootstrap. Podemos usar las clases restantes de manera similar.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Bootstrap CSS --> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> </head> <body> <h2 class="text-success">GeeksforGeeks</h2> <div class="dropdown px-3 py-3"> <h5 class="text-secondary">Dropdown Color Variant</h5> <button class="btn btn-primary dropdown-toggle mx-2 my-2" type="button" data-bs-toggle="dropdown" aria-expanded="false"> GFG Primary </button> <ul class="dropdown-menu"> <li> <a class="dropdown-item" href="#">Algo</a> </li> <li> <a class="dropdown-item" href="#">DS</a> </li> <li> <a class="dropdown-item" href="#">HTML</a> </li> <li> <a class="dropdown-item" href="#">CSS</a> </li> <li> <a class="dropdown-item" href="#">JS</a> </li> </ul> <button class="btn btn-success dropdown-toggle mx-2 my-2" type="button" data-bs-toggle="dropdown" aria-expanded="false"> GFG Success </button> <ul class="dropdown-menu"> <li> <a class="dropdown-item" href="#">Algo</a> </li> <li> <a class="dropdown-item" href="#">DS</a> </li> <li> <a class="dropdown-item" href="#">HTML</a> </li> <li> <a class="dropdown-item" href="#">CSS</a> </li> <li> <a class="dropdown-item" href="#">JS</a> </li> </ul> </div> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity= "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> </body> </html>
Producción:
Desplegable dividido con botones: podemos hacer desplegables divididos en un botón agregando un botón adicional con una extensión . clase desplegable-alternar-dividir para colocar el espacio adecuado alrededor del símbolo de intercalación desplegable.
Ejemplo 4: este ejemplo ilustra el botón desplegable dividido en Bootstrap.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Bootstrap CSS --> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> </head> <body> <h2 class="text-success">GeeksforGeeks</h2> <h5 class="text-secondary">Split Dropdown</h5> <div class="btn-group"> <button type="button" class="btn btn-success">Split Dropdown </button> <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> </button> <ul class="dropdown-menu"> <li> <a class="dropdown-item" href="#">Algo</a> </li> <li> <a class="dropdown-item" href="#">DS</a> </li> <li> <a class="dropdown-item" href="#">HTML</a> </li> <li> <a class="dropdown-item" href="#">CSS</a> </li> <li> <a class="dropdown-item" href="#">JS</a> </li> </ul> </div> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity= "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> </body> </html>
Producción:
Formulario en el menú desplegable: en el siguiente ejemplo, hemos puesto un formulario dentro de un menú desplegable envolviendo el formulario dentro de un archivo . clase de menú desplegable . Para saber más sobre los formularios de arranque, consulte el artículo de formularios de arranque. Del mismo modo, podemos poner cualquier cosa dentro de la clase .dropdown-menu para que aparezca en el menú desplegable.
Ejemplo 5: Este ejemplo muestra el formulario dentro del menú desplegable en Bootstrap.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Bootstrap CSS --> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> </head> <body> <h2 class="text-success">GeeksforGeeks</h2> <h5 class="text-secondary">Form in the Dropdown menu</h5> <div class="dropdown"> <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> GFG Primary </button> <div class="dropdown-menu"> <form class="px-3 py-2"> <div class="mb-2"> <label class="form-label"> Username </label> <input type="email" class="form-control" placeholder="email@example.com" /> </div> <div class="mb-2"> <label class="form-label"> Password </label> <input type="password" class="form-control" placeholder="Password" /> </div> <button type="submit" class="btn btn-danger"> Sign in </button> </form> </div> </div> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity= "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> </body> </html>
Producción:
Desplegable en la barra de navegación con el tema oscuro: definitivamente podemos cambiar el tema del menú desplegable para que coincida con el fondo de la barra de navegación. Para hacerlo, agregamos una clase .dropdown-menu-dark a un archivo . menú desplegable . Excepto por esto, no se requieren otros cambios en los elementos desplegables.
Ejemplo 6: en este ejemplo, hemos creado el menú desplegable de tema oscuro en la barra de navegación en Bootstrap.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Bootstrap CSS --> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> <title>GeeksforGeeks</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">GeeksforGeeks</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" aria-controls="navbarNavDarkDropdown" aria-expanded="false"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu dropdown-menu-dark"> <li><a class="dropdown-item" href="#">Food</a> </li> <li> <a class="dropdown-item" href="#">Swimming</a> </li> <li> <a class="dropdown-item" href="#">Flight</a> </li> </ul> </li> </ul> </div> </div> </nav> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity= "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rijushree100guha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA