Bootstrap - Grupos de botões

Os grupos de botões permitem que vários botões sejam empilhados em uma única linha. Isso é útil quando você deseja colocar itens como botões de alinhamento juntos. Você pode adicionar um rádio JavaScript opcional e um comportamento de estilo de caixa de seleção com o Bootstrap Button Plugin .

A tabela a seguir resume as classes importantes que o Bootstrap fornece para usar grupos de botões -

Classe Descrição Amostra de Código
.btn-group Esta classe é usada para um grupo básico de botões. Envolva uma série de botões com a classe.btn no .btn-group. 
<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 Isso ajuda a combinar conjuntos de <div class = "btn-group"> em uma <div class = "btn-toolbar"> para componentes mais complexos. 
<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 Essas classes podem ser aplicadas ao grupo de botões em vez de redimensionar cada botão. 
<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 classe faz com que um conjunto de botões apareça verticalmente empilhados em vez de horizontalmente. 
<div class = "btn-group-vertical">
   ...
</div>

Grupo de botões básicos

O exemplo a seguir demonstra o uso de classe .btn-group discutido na tabela acima -

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
   
</div>

Barra de ferramentas de botões

O exemplo a seguir demonstra o uso de classe .btn-toolbar discutido na tabela acima -

<div class = "btn-toolbar" role = "toolbar">
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 1</button>
      <button type = "button" class = "btn btn-default">Button 2</button>
      <button type = "button" class = "btn btn-default">Button 3</button>
   </div>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 4</button>
      <button type = "button" class = "btn btn-default">Button 5</button>
      <button type = "button" class = "btn btn-default">Button 6</button>
   </div>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 7</button>
      <button type = "button" class = "btn btn-default">Button 8</button>
      <button type = "button" class = "btn btn-default">Button 9</button>
   </div>
   
</div>

Tamanho do botão

O exemplo a seguir demonstra o uso de classe .btn-group-* discutido na tabela acima -

<div class = "btn-group btn-group-lg">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
</div>

<div class = "btn-group btn-group-sm">
   <button type = "button" class = "btn btn-default">Button 4</button>
   <button type = "button" class = "btn btn-default">Button 5</button>
   <button type = "button" class = "btn btn-default">Button 6</button>
</div>

<div class = "btn-group btn-group-xs">
   <button type = "button" class = "btn btn-default">Button 7</button>
   <button type = "button" class = "btn btn-default">Button 8</button>
   <button type = "button" class = "btn btn-default">Button 9</button>
</div>

Nesting

Você pode aninhar grupos de botões em outro grupo de botões, ou seja, colocar um .btn-group dentro de outro .btn-group . Isso é feito quando você deseja menus suspensos misturados com uma série de botões.

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
  
</div>

Grupo de botões vertical

O exemplo a seguir demonstra o uso de classe .btn-group-vertical discutido na tabela acima -

<div class = "btn-group-vertical">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   
   <div class = "btn-group-vertical">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
  
</div>