English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriales básicos de Bootstrap

Plugin de Bootstrap

Grupo de botones de Bootstrap

Los grupos de botones permiten que varios botones se apilen en una misma línea. Es muy útil cuando se desea alinear los botones. Puede hacerlo a través de: Plugin de Bootstrap para botones (Button) Añadir estilos de comportamiento de radio button y checkbox JavaScript opcionales.

La siguiente tabla resume algunas clases importantes proporcionadas por Bootstrap para el uso de grupos de botones:

Clasedescripciónejemplo de código
.btn-groupEsta clase se utiliza para formar un grupo de botones básico en .btn-group colocar una serie de botones con clase .btn de los botones.
<div>
　　<button　type="button">Botón1</button>
　　　<button　type="button">Botón2</button>
</div>
.btn-toolbarEsta clase ayuda a combinar varios <div> en un <div>, generalmente obteniendo componentes más complejos.
<div　role="toolbar">
　　<div>.../div>
　　<div>.../div>
</div>
.btn-group-lg, .btn-group-sm, .btn-group-xsEstas clases se pueden aplicar al ajuste de tamaño de todo el grupo de botones, sin necesidad de ajustar el tamaño de cada botón.
<div>.../div>
<div>.../div>
<div>.../div>
.btn-group-verticalEsta clase permite que un grupo de botones se muestre apilado verticalmente en lugar de apilado horizontalmente.
<div>
　　...
</div>

Básico grupo de botones

Los siguientes ejemplos demuestran las clases .btn-group uso：

ejemplo en línea

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　ejemplo　-　Básico　grupo de botones</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">botón　1</button>
	<button　type="button"　class="btn　btn-default">botón　2</button>
	<button　type="button"　class="btn　btn-default">botón　3</button>
</div>
</body>
</html>
Prueba aquí ‹/›

Los resultados se muestran a continuación:

barra de herramientas de botones

Los siguientes ejemplos demuestran las clases .btn-toolbar uso：

ejemplo en línea

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　ejemplo　-　barra　de　herramientas de botones</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-toolbar"　role="toolbar">
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default">botón　1</button>
		<button　type="button"　class="btn　btn-default">botón　2</button>
		<button　type="button"　class="btn　btn-default">botón　3</button>
	</div>
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default">botón　4</button>
		<button　type="button"　class="btn　btn-default">botón　5</button>
		<button　type="button"　class="btn　btn-default">botón　6</button>
	</div>
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default">botón　7</button>
		<button　type="button"　class="btn　btn-default">botón　8</button>
		<button　type="button"　class="btn　btn-default">botón　9</button>
	</div>
</div>
</body>
</html>
Prueba aquí ‹/›

Los resultados se muestran a continuación:

Tamaño　de　los　botones

Los siguientes ejemplos demuestran las clases .btn-group-* uso：

ejemplo en línea

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　ejemplo　-　Tamaño　del　grupo　de　botones</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　btn-group-lg">
	<button　type="button"　class="btn　btn-default">Botón　1</button>
	<button　type="button"　class="btn　btn-default">Botón　2</button>
	<button　type="button"　class="btn　btn-default">Botón　3</button>
</div>
<div　class="btn-group　btn-group-sm">
	<button　type="button"　class="btn　btn-default">Botón　4</button>
	<button　type="button"　class="btn　btn-default">Botón　5</button>
	<button　type="button"　class="btn　btn-default">Botón　6</button>
</div>
<div　class="btn-group　btn-group-xs">
	<button　type="button"　class="btn　btn-default">Botón　7</button>
	<button　type="button"　class="btn　btn-default">Botón　8</button>
	<button　type="button"　class="btn　btn-default">Botón　9</button>
</div>
</body>
</html>
Prueba aquí ‹/›

Los resultados se muestran a continuación:

anidado

Puede anidar otro grupo de botones dentro de un grupo de botones, es decir, en un .btn-group anidado .btn-group 。Cuando desee usar un menú desplegable con una serie de botones, se utiliza esta.

ejemplo en línea

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Bootstrap　ejemplo　-　nested　button　group</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">botón　1</button>
	<button　type="button"　class="btn　btn-default">botón　2</button>
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown">
			desplegable
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu>
			<li><a href="#">Enlace desplegable　1</a></li>
			<li><a href="#">Enlace desplegable　2</a></li>
		</ul>
　　</div>
</div>
</body>
</html>
Prueba aquí ‹/›

Los resultados se muestran a continuación:

vertical　button　group

Los siguientes ejemplos demuestran las clases .btn-group-vertical uso：

ejemplo en línea

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
　　　<title>Bootstrap　ejemplo　-　vertical　button　group</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-vertical">
	<button　type="button"　class="btn　btn-default">botón　1</button>
	<button　type="button"　class="btn　btn-default">botón　2</button>
	<div　class="btn-group-vertical">
		<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown">
			desplegable
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu>
			<li><a href="#">Enlace desplegable　1</a></li>
			<li><a href="#">Enlace desplegable　2</a></li>
		</ul>
	</div>
</div>
</body>
</html>
Prueba aquí ‹/›

Los resultados se muestran a continuación:

Menú desplegable de botones de BootstrapMenú desplegable de Bootstrap