I gruppi di input di Bootstrap

Bootstrap permette in modo molto semplice di creare e formattare opportunamente gli input di testo, cioè i campi in cui l’utente può digitare del testo. Nella sua forma più semplice, un campo di input viene gestito grazie alla classe form-control.

<input type="text" class="form-control" placeholder="Nome">

Bootstrap consente, tuttavia, di creare soluzioni più complesse creando dei campi di input "compositi". Per fare ciò si utilizza la classe input-group la quale viene associata ad un div contenitore al cui interno viene posizionato l’input ed altri elementi come, ad esempio, uno span di testo al quale viene aggiunta la classe input-group-addon.

Il campo e questo elemento aggiuntivo, che può essere posizionato prima e/o dopo il campo stesso, costituiscono un blocco unico anche dal punto di vista visivo.

<div class="input-group">
  <span class="input-group-addon">€</span>
  <input type="text" class="form-control" placeholder="Prezzo">
</div>

L’elemento aggiuntivo non deve necessariamente essere costituito da testo, ma potrebbe anche essere costituito da un altro elemento, come un pulsante. In questo caso bisogna usare un elemento div di classe .input-group-btn (che può essere aggiunto prima o dopo al campo di input) al cui interno andremo ad inserire il bottone vero e proprio:

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-btn">
    <button class="btn btn-default" type="button">VAI!</button>
  </div>
</div>

Il pulsante aggiunto potrebbe anche essere un pulsante che attiva un elenco a discesa. In questo caso, bisogna solo badare ad annidare correttamente i diversi elementi:

<div class="input-group">
  <div class="input-group-btn">
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Scegli <span class="caret"></span></button>
     <ul class="dropdown-menu">
       <li><a href="#">Opzione uno</a></li>
       <li><a href="#">Opzione due</a></li>
       <li><a href="#">Opzione tre</a></li>
     </ul>
  </div>
  <input type="text" class="form-control">
</div>

Dimensionare i gruppi di input

I gruppi di input, come molti altri elementi di Bootstrap, possono essere ridimensionati nel loro complesso: per ingrandire il gruppo, basta assegnargli la classe input-group-lg, mentre per rimpicciolirlo, si deve usare la classe input-group-sm.

Nell’esempio proponiamo un gruppo semplice ma, ovviamante, queste classi possono essere utilizzate per tutti i gruppi.

<div class="input-group input-group-lg">
  <span class="input-group-addon">€</span>
  <input type="text" class="form-control" placeholder="Prezzo">
</div>
<br/><br/>
<div class="input-group">
  <span class="input-group-addon">€</span>
  <input type="text" class="form-control" placeholder="Prezzo">
</div>
<br/><br/>
<div class="input-group input-group-sm">
  <span class="input-group-addon">€</span>
  <input type="text" class="form-control" placeholder="Prezzo">
</div>