Bootstrap Grupo de botones
Los grupos de botones permiten apilar varios botones en la misma línea. Cuando quieres alinear botones juntos, esto resulta muy útil. Puedes utilizarPlugin de botones de BootstrapAgrega comportamiento opcional de estilo de JavaScript para botones de opción y casillas de verificación.
La siguiente tabla resume algunas clases importantes proporcionadas por Bootstrap para usar grupos de botones:
| Class | Descripción | Ejemplo de código |
|---|
| .btn-group | Esta clase se usa para formar un grupo básico de botones. En.btn-groupcoloca una serie de botones con la clase.btn. |
<div class="btn-group">
<button type="button" class="btn btn-default">Button1</button>
<button type="button" class="btn btn-default">Button2</button>
</div>
|
| .btn-toolbar | Esta clase ayuda a combinar varios grupos <div class="btn-group"> en un <div class="btn-toolbar">, generalmente para obtener componentes más complejos. |
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">...</div>
<div class="btn-group">...</div>
</div>
|
| .btn-group-lg, .btn-group-sm, .btn-group-xs | Estas clases se pueden aplicar para ajustar el tamaño de todo el grupo de botones, sin necesidad de ajustar cada botón individualmente. |
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>
|
| .btn-group-vertical | Esta clase hace que un grupo de botones se muestre apilado verticalmente, en lugar de horizontalmente. |
<div class="btn-group-vertical">
...
</div>
|
Grupo básico de botones
El siguiente ejemplo demuestra las clases discutidas en la tabla anterior.btn-groupy su uso:
Ejemplo
<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>
Pruébalo »
El resultado se muestra a continuación:
Barra de herramientas de botones
El siguiente ejemplo demuestra las clases discutidas en la tabla anterior.btn-toolbary su uso:
Ejemplo
<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>
Pruébalo »
El resultado se muestra a continuación:
Tamaño de los botones
El siguiente ejemplo demuestra las clases discutidas en la tabla anterior.btn-group-*y su uso:
Ejemplo
<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>
Pruébalo »
El resultado se muestra a continuación:
Anidamiento
Puedes anidar otro grupo de botones dentro de un grupo de botones, es decir, dentro de un.btn-groupanidar otro dentro de.btn-group . Esto se usa cuando quieres combinar un menú desplegable con una serie de botones.
Ejemplo
<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>
Pruébalo »
El resultado se muestra a continuación:
Grupo de botones vertical
El siguiente ejemplo demuestra las clases discutidas en la tabla anterior.btn-group-verticaly su uso:
Ejemplo
<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>
Pruébalo »
El resultado se muestra a continuación:
Otras extensiones
