Bootstrap - Grupos de entrada

Este capítulo explica sobre mais um recurso compatível com o Bootstrap, os grupos de entrada. Os grupos de entrada são controles de formulário estendidos . Usando grupos de entrada, você pode facilmente preceder e acrescentar texto ou botões às entradas baseadas em texto.

Adicionando conteúdo pré-anexado e anexado a um campo de entrada, você pode adicionar elementos comuns à entrada do usuário. Por exemplo, você pode adicionar o símbolo do dólar, o @ para um nome de usuário do Twitter ou qualquer outra coisa que possa ser comum para a interface do seu aplicativo.

Para preceder ou acrescentar elementos a um .form-control-

  • Envolva-o em um <div> com classe .input-group

  • Na próxima etapa, dentro do mesmo <div>, coloque seu conteúdo extra dentro de um <span> com classe .input-group-addon.

  • Agora coloque este <span> antes ou depois do elemento <input>.

Para compatibilidade entre navegadores, evite usar elementos <select> aqui, pois eles não podem ser totalmente estilizados em navegadores WebKit. Também não aplique classes de grupo de entrada diretamente a grupos de formulário. Um grupo de entrada é um componente isolado.

Grupo de entrada básico

O exemplo a seguir demonstra o grupo de entrada básico -

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "input-group">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "twitterhandle">
      </div>
		
      <br>

      <div class = "input-group">
         <input type = "text" class = "form-control">
         <span class = "input-group-addon">.00</span>
      </div>
		
      <br>
      
      <div class = "input-group">
         <span class = "input-group-addon">$</span>
         <input type = "text" class =" form-control">
         <span class = "input-group-addon">.00</span>
      </div>
   </form>
   
</div>

Tamanho do grupo de entrada

Você pode alterar o tamanho dos grupos de entrada, adicionando as classes de dimensionamento de formulários relativos, como .input-group-lg, input-group-sm, input-group-xs ao .input-groupem si. O conteúdo será redimensionado automaticamente.

Os exemplos a seguir demonstram isso -

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "input-group input-group-lg">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
		
      <br>

      <div class = "input-group">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
		
      <br>

      <div class = "input-group input-group-sm">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
   </form>
   
</div>

Caixas de seleção e complementos de rádio

Você pode pré-anexar ou anexar botões de opção e caixas de seleção em vez de texto, conforme demonstrado no exemplo a seguir -

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <span class = "input-group-addon">
                  <input type = "checkbox">
               </span>
               
               <input type = "text" class = "form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <span class = "input-group-addon">
                  <input type = "radio">
               </span>
               
               <input type = "text" class = "form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

Addons de botão

Você pode até pré-anexar ou anexar botões em grupos de entrada. Ao invés de.input-group-addon classe, você precisará usar classe .input-group-btnpara embrulhar os botões. Isso é necessário devido aos estilos de navegador padrão que não podem ser substituídos. Os exemplos a seguir demonstram isso -

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <span class = "input-group-btn">
                  <button class = "btn btn-default" type = "button">
                     Go!
                  </button>
               </span>
					
               <input type = "text" class = "form-control">
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               <input type = "text" class = "form-control">
               
               <span class = "input-group-btn">
                  <button class = "btn btn-default" type = "button">
                     Go!
                  </button>
               </span>
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

Botões com menus suspensos

Adicionar botões com menus suspensos em grupos de entrada pode ser feito simplesmente envolvendo o botão e o menu suspenso em um .input-group-btn classe conforme demonstrado no exemplo a seguir -

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <div class = "input-group-btn">
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown">
                     DropdownMenu 
                     <span class = "caret"></span>
                  </button>
                  
                  <ul class = "dropdown-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><!-- /btn-group -->
               
               <input type = "text" class = "form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <input type = "text" class = "form-control">
               <div class = "input-group-btn">
                  
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown">
                     DropdownMenu 
                     <span class = "caret"></span>
                  </button>
                  
                  <ul class = "dropdown-menu pull-right">
                     <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><!-- /btn-group -->
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

Botões Segmentados

Para segmentar menus suspensos de botões em grupos de entrada, use o mesmo estilo geral do botão suspenso, mas adicione uma ação principal junto com o menu suspenso, como pode ser visto no exemplo a seguir -

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <div class = "input-group-btn">
                  <button type = "button" class = "btn btn-default" 
                     tabindex = "-1">Dropdown Menu</button>
                  
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown" tabindex = "-1">
                     <span class = "caret"></span>
                     <span class = "sr-only">Toggle Dropdown</span>
                  </button>
                  
                  <ul class = "dropdown-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><!-- /btn-group -->
               <input type = "text" class = "form-control">
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               <input type = "text" class = "form-control">
               <div class = "input-group-btn">
                  
                  <button type = "button" class = "btn btn-default" tabindex = "-1">
                     Dropdown Menu
                  </button>
                  
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown" tabindex = "-1">
                     
                     <span class = "caret"></span>
                     <span class = "sr-only">Toggle Dropdown</span>
                  </button>
                  
                  <ul class = "dropdown-menu pull-right">
                     <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><!-- /btn-group -->
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>