Grupos de botones Bootstrap
Grupos de botones
Bootstrap le permite agrupar una serie de botones (en una sola línea) en un grupo de botones:
Use un <div>elemento con clase .btn-grouppara crear un grupo de botones:
Ejemplo
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Sugerencia: en lugar de aplicar tamaños de botones a todos los botones de un grupo, use class .btn-group-lg|sm|xspara cambiar el tamaño de todos los botones del grupo:
Ejemplo
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Grupos de botones verticales
Bootstrap también admite grupos de botones verticales:
Usa la clase .btn-group-verticalpara crear un grupo de botones verticales:
Ejemplo
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Grupos de botones justificados
Para abarcar todo el ancho de la pantalla, use la .btn-group-justified
clase:
Ejemplo con <a>elementos:
Ejemplo
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
Nota: para <button>los elementos, debe envolver cada botón en una .btn-groupclase:
Ejemplo
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
Grupos de botones anidados y menús desplegables
Anida grupos de botones para crear menús desplegables:
Ejemplo
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
Menús desplegables de botones divididos
Ejemplo
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>