botão Grupos
Bootstrap permite agrupar uma série de botões juntos (em uma única linha) em um grupo de botões:
Use um <div> elemento com classe .btn-group para criar um grupo de botões:
Exemplo
<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> Tente você mesmo " Dica: Em vez de aplicar tamanhos de botão para todos os botões em um grupo, use classe .btn-group-* ao tamanho todos os botões do grupo:
Exemplo
<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> Tente você mesmo " Grupos de botões verticais
Bootstrap também suporta grupos de botões verticais:
Use a classe .btn-group-vertical para criar um grupo de botões vertical:
Exemplo
<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> Tente você mesmo " Justificados grupos de botões
Para abranger toda a largura da tela, use o .btn-group-justified classe:
Exemplo com <a> elementos:
Exemplo
<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> Tente você mesmo " Nota: Para <button> elementos, você deve embrulhar cada botão em um .btn-group de classe:
Exemplo
<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> Tente você mesmo " Botão de nidificação Grupos & Dropdown Menus
grupos de botões ninho para criar menus suspensos:
Exemplo
<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> Tente você mesmo " Dropdowns botão de divisão
Exemplo
<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> Tente você mesmo " Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »