Bootstrap - menus suspensos de botões

Este capítulo irá discutir sobre como adicionar um menu suspenso a botões usando classes Bootstrap. Para adicionar um menu suspenso a um botão, basta envolver o botão e o menu suspenso em um.btn-group. Você também pode usar <span class = "caret"> </span> para atuar como um indicador de que o botão é um menu suspenso.

O exemplo a seguir demonstra menus suspensos básicos de um único botão -

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
      Default 
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
      Primary 
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
   
</div>

Botões suspensos de divisão

Os menus suspensos do botão de divisão usam o mesmo estilo geral do botão suspenso, mas adicionam uma ação principal junto com o menu suspenso. Os botões de divisão têm a ação principal à esquerda e um alternador à direita que exibe o menu suspenso.

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Default</button>
   
   <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
      <span class = "caret"></span>
      <span class = "sr-only">Toggle Dropdown</span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-primary">Primary</button>
   
   <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
      <span class = "caret"></span>
      <span class = "sr-only">Toggle Dropdown</span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

Tamanho da lista suspensa do botão

Você pode usar os menus suspensos com qualquer tamanho de botão - .btn-large, .btn-sm, ou .btn-xs.

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default dropdown-toggle btn-lg" data-toggle = "dropdown">
      Default
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-primary dropdown-toggle btn-sm" data-toggle = "dropdown">
      Primary
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-success dropdown-toggle btn-xs" data-toggle = "dropdown">
      Success
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
   
</div>

Variação Dropup

Os menus também podem ser criados para abrir em vez de para baixo. Para conseguir isso, basta adicionar.dropup para o pai .btn-group recipiente.

<div class = "row" style = "margin-left:50px; margin-top:200px">
   
   <div class = "btn-group dropup">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Default
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu" role = "menu">
         <li><a href = "#">Action</a></li>
         <li><a href = "#">Another action</a></li>
         <li><a href = "#">Something else here</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
   </div>
   
   <div class = "btn-group dropup">
      <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
         Primary
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu" role = "menu">
         <li><a href = "#">Action</a></li>
         <li><a href = "#">Another action</a></li>
         <li><a href = "#">Something else here</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
   </div>
   
</div>