Bienvenid@s, hoy vamos a ver como construir un menú de opciones desplegable con Bootstrap 3, la verdad es que el componente dropdown ofrece una serie de posibilidades muy interesantes, como crear una lista de links o mostrar un texto informativo o cualquier otra cosa que se te ocurra, a continuación vas a poder ver un par de ejemplos, que con tan sólo copiar y pegar tendrás la posibilidad de modificarlo a tu gusto ...
Ejemplo 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dropdown menu ejemplo 1 - Bootstrap 3</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class='container'>
<div class="dropdown">
<div class='btn-group'>
<!-- Configurar el botón dropdown -->
<button class='btn btn-info'>Opciones</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<!-- Configurar el botón dropdown -->
<!-- Lista de opciones -->
<ul class="dropdown-menu">
<li class="dropdown-header">CABECERA 1</li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li class="divider"></li>
<li class="dropdown-header">CABECERA 2</li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</li>
<li class="disabled"><a href="#">Desactivado</a></li>
</ul>
<!-- Lista de opciones -->
</div>
</div>
</div>
</body>
</html>
Ejemplo 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dropdown menu ejemplo 2 - Bootstrap 3</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class='container'>
<div class="dropdown">
<div class='btn-group'>
<!-- Configurar el botón dropdown -->
<button class='btn btn-primary'>Complementos</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<!-- Configurar el botón dropdown -->
<!-- Lista de opciones -->
<ul class="dropdown-menu" style='width: 300px;'>
<li class="dropdown-header"><strong>TIENDA</strong></li>
<li>
<table class='table'>
<tr class='info'><th><a href="#">Hombre</a></th><th><a href="#">Mujer</a></th><th><a href="#">Niñ@s</a></th></tr>
<tr><td><a href="#">Link 1</a></td><td><a href="#">Link 1</a></td><td><a href="#">Link 1</a></td></tr>
<tr><td><a href="#">Link 2</a></td><td><a href="#">Link 2</a></td><td><a href="#">Link 2</a></td></tr>
<tr><td><a href="#">Link 3</a></td><td><a href="#">Link 3</a></td><td><a href="#">Link 3</a></td></tr>
</table>
</li>
</ul>
<!-- Lista de opciones -->
</div>
</div>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario