Tutorial básico de Bootstrap

Plugin de Bootstrap

Grupo de campos de entrada Bootstrap Grupo de botones Bootstrap

Menú desplegable de botones Bootstrap

Este capítulo explicará cómo agregar un menú desplegable a un botón utilizando las clases de Bootstrap. Para agregar un menú desplegable a un botón, simplemente en un .btn-group Coloque el botón y el menú desplegable en el contenedor. También puede usar <span></span> para indicar que el botón es un menú desplegable.

El siguiente ejemplo muestra un menú desplegable de botón básico simple:

online example

example

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap example　-　El menú desplegable de botón básico</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group">
	<button type="button" class="btn btn-default dropdown-toggle"　
			data-toggle="dropdown">
		default <span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Función</a></li>
		<li><a href="#">Otra función</a></li>
		<li><a href="#">Otro</a></li>
		<li class="divider"></li>
		<li><a href="#">Enlace separado</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">original　
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Función</a></li>
		<li><a href="#">Otra función</a></li>
		<li><a href="#">Otro</a></li>
		<li class="divider"></li>
		<li><a href="#">Enlace separado</a></li>
	</ul>
</div>
</body>
</html>

Prueba y mira ‹/›

Los resultados se muestran a continuación:

El menú desplegable de botón dividido

El menú desplegable de botón dividido utiliza un estilo similar al del botón desplegable, pero agrega la función original. A la izquierda del botón dividido se encuentra la función original, y a la derecha, el cambio para mostrar el menú desplegable.

online example

example

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap example　-　Split button dropdown menu</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group">
	<button type="button" class="btn btn-default">default</button>
	<button type="button" class="btn btn-default dropdown-toggle"　
			data-toggle="dropdown">
		<span class="caret"></span>
		<span class="sr-only">Toggle dropdown menu</span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Función</a></li>
		<li><a href="#">Otra función</a></li>
		<li><a href="#">Otro</a></li>
		<li class="divider"></li>
		<li><a href="#">Enlace separado</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-primary">original</button>
	<button type="button" class="btn btn-primary dropdown-toggle"　
			data-toggle="dropdown">
		<span class="caret"></span>
		<span class="sr-only">Toggle dropdown menu</span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Función</a></li>
		<li><a href="#">Otra función</a></li>
		<li><a href="#">Otro</a></li>
		<li class="divider"></li>
		<li><a href="#">Enlace separado</a></li>
	</ul>
</div>
</body>
</html>

Prueba y mira ‹/›

Los resultados se muestran a continuación:

Button dropdown menu size

You can use dropdown menus with buttons of various sizes:.btn-lg, .btn-sm or .btn-xs。

online example

example

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap example　-　Button dropdown menu size</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group">
	<button type="button" class="btn btn-default dropdown-toggle btn-lg"　
			data-toggle="dropdown">
		default <span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Función</a></li>
		<li><a href="#">Otra función</a></li>
		<li><a href="#">Otro</a></li>
		<li class="divider"></li>
		<li><a href="#">Enlace separado</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-primary dropdown-toggle btn-sm"　
			data-toggle="dropdown">
		original <span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Función</a></li>
		<li><a href="#">Otra función</a></li>
		<li><a href="#">Otro</a></li>
		<li class="divider"></li>
		<li><a href="#">Enlace separado</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-success dropdown-toggle btn-xs"　
			data-toggle="dropdown">
		success <span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Función</a></li>
		<li><a href="#">Otra función</a></li>
		<li><a href="#">Otro</a></li>
		<li class="divider"></li>
		<li><a href="#">Enlace separado</a></li>
	</ul>
</div>
</body>
</html>

Prueba y mira ‹/›

Los resultados se muestran a continuación:

Button dropdown menu

Menu can also be stretched upwards, just need to simply stretch the parent .btn-group container add .dropup just do it.

online example

example

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　<title>Bootstrap example　-　Button dropdown menu</title>
　　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row" style="margin-left:50px; margin-top:200px">
	<div class="btn-group dropup">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">default　
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">Función</a></li>
			<li><a href="#">Otra función</a></li>
			<li><a href="#">Otro</a></li>
			<li class="divider"></li>
			<li><a href="#">Enlace separado</a></li>
		</ul>
	</div>
	<div class="btn-group dropup">
		<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">original　
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">Función</a></li>
			<li><a href="#">Otra función</a></li>
			<li><a href="#">Otro</a></li>
			<li class="divider"></li>
			<li><a href="#">Enlace separado</a></li>
		</ul>
	</div>
</div>
</body>
</html>

Prueba y mira ‹/›

Los resultados se muestran a continuación:

Grupo de campos de entrada Bootstrap Grupo de botones Bootstrap