grupos de botones
Bootstrap le permite agrupar una serie de botones a la vez (en una sola línea) en un grupo de botones:
Utilice un <div> elemento con la clase .btn-group para 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> Inténtalo tú mismo " Consejo: En lugar de aplicar tamaños de botones para cada botón en un grupo, utilice la clase .btn-group-* al tamaño todos los botones en el 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> Inténtalo tú mismo " Verticales grupos de botones
Bootstrap también soporta grupos de botones verticales:
Utilice la clase .btn-group-vertical para 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> Inténtalo tú mismo " Justificadas grupos de botones
Para abarcar todo el ancho de la pantalla, utilice el .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> Inténtalo tú mismo " Nota: Para <button> elementos, debe envolver cada botón en un .btn-group de clase:
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> Inténtalo tú mismo " Botón de anidación Grupos y menús desplegables
grupos de botones nido 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> Inténtalo tú mismo " Menús desplegables botón de división
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> Inténtalo tú mismo " Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 »