- Introducción e instalación
- Sistema de red
- Botones, Glyphicons, Tablas
- Formularios verticales, formularios horizontales, formularios en línea
- Barra de progreso y Jumbotron
Menú desplegable usando Bootstrap:
En bootstrap, los menús desplegables se crean usando class=”dropdown”. Lo que haremos será crear un botón y luego convertir el botón en un menú desplegable.
Como ya se indicó en los últimos tutoriales, los botones se pueden crear usando la etiqueta <button>. Pero en este botón, queremos crear un menú desplegable, por lo que agregaremos class=”btn dropdown-toggle” y data-toggle=”dropdown”.
Básicamente, se vería algo como esto.
<button class=”btn btn-default dropdown-toggle” type=”button” data-toggle=”dropdown”> Mi menú desplegable </button>
Ahora queremos convertir este botón en un menú desplegable. Entonces, crearemos una lista desordenada usando la etiqueta <ul> que tiene class=”dropdown-menu” y agregaremos elementos usando la etiqueta <li> .
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script> </head> <body> <div class="container" style="color:green"> <h1>GeeksforGeeks</h1> </div> <div class="container"> <h4>Dropdown in Bootstrap</h4> </div> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="dropdown"> <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown"> GeeksforGeeks <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">SQL</a></li> </ul> </div> </div> </div> </div> </body> </html>
Producción:
Puedes mejorar tu menú desplegable usando clases en la etiqueta <li>. Para agregar un encabezado en un menú desplegable, agregue class = «dropdown-header», para agregar un divisor entre elementos, use class = «divider» y para deshabilitar un elemento en la lista, use class = «disabled».
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script> </head> <body> <div class="container" style="color:green"> <h1>GeeksforGeeks</h1> </div> <div class="container"> <h4>Dropdown in Bootstrap</h4> </div> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="dropdown"> <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown"> GeeksforGeeks <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="drodown-header container"> <b>HTML</b> </li> <li><a href="#">CSS</a></li> <li><a href="#">JS</a></li> <li class="divider"></li> <li class="drodown-header container"> <b>Language</b> </li> <li><a href="#"></a></li> <li><a href="#">Python</a></li> <li><a href="#">SQL</a></li> </ul> </div> </div> </div> </div> </body> </html>
Producción:
Pestañas de navegación usando Bootstrap:
Para crear un menú de navegación con pestañas, necesitamos hacer una lista desordenada usando la etiqueta <ul> y luego agregar class=”nav nav-tabs”. Ahora podemos agregar nuestras pestañas usando la etiqueta <li>. Recuerde asignar una pestaña con class=”active” para verla como la pestaña activa predeterminada. Ahora, necesitamos escribir el contenido de cada pestaña usando class=”tab-pane” dentro de class=”tab-content”. Tenga en cuenta que debe asignar identificadores al panel de pestañas respectivo.
Agregar class=»fade» agrega un efecto de desvanecimiento cuando se cambian las pestañas.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script> </head> <body> <div class="container" style="color:green"> <h1>GeeksforGeeks</h1> </div> <div class="container"> <h4>Navigation Tabs in Bootstrap</h4> </div> <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"> Nav bar </a> </div> <ul class="nav navbar-nav"> <li class="active"> <a href="#">Home</a> </li> <li><a href="#">Practice</a></li> <li><a href="#">Interviews</a></li> <li><a href="#">Contribute</a></li> </ul> </div> </nav> </div> </body> </html>
Producción: 
Puede cambiar la apariencia de las pestañas cambiando class=”navbar-nav” a “nav-pills” o “nav-stacked” y si desea que sus pestañas cubran toda la pantalla, intente agregar class= ”nav-justified”
Similar a los menús desplegables, podemos deshabilitar cualquier pestaña usando class=”disabled”.
Producción:
Nota: tenga cuidado durante el uso de la barra de navegación, cambiará su tamaño según el tamaño de la pantalla.
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA