Bootstrap proporciona varias opciones para mejorar la navegación del contenido. Los menús desplegables de Bootstrap son el menú alternable para mostrar una lista de datos, interactivos con el complemento de JavaScript. Podemos alternar la lista haciendo clic. Junto con esto, podemos usar píldoras de componentes de arranque con un menú desplegable con el menú de arranque como píldoras que permiten mostrar.
Usamos la clase .nav-pills para mostrar las opciones del menú Bootstrap como píldoras. Necesitamos agregar la clase .nav-pills al elemento <ul> para mostrar las opciones del menú de Bootstrap como píldoras. A continuación se muestra el procedimiento para implementar pastillas con el menú desplegable en bootstrap.
Guía paso a paso para implementar Pills con Dropdown en Bootstrap:
Paso 1: Incluya Bootstrap y jQuery CDN en la etiqueta <head> antes que todas las demás hojas de estilo para cargar nuestro CSS.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js” ></guión>
Paso 2: agregue la clase .nav-pills en la etiqueta <ul> después de la clase .nav
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Menu 1 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Ahora hemos implementado con éxito el menú desplegable de arranque con píldoras.
Código definitivo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Dropdown with Pills</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!--Include bootstrap , CSS and jQuery CDN--> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h3>Pills With Dropdown Menu</h3> <!--Include .nav-pills class after .nav class in <ul> tag--> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <!--Include dropdown list here--> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Menu 1 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Submenu 1-1</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </div> </body> </html>
Producción:
Pastillas con menú desplegable
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari