Dopo aver visto le tabelle in questo articolo ci concentriamo sull'elemento <form>.
Per questo elemento le classi principali adottate da Bootstrap sono .form-control e .form-group, la prima viene data agli elementi <input>, <textarea> e <select> per dare larghezza 100%, la seconda classe invece viene utilizzata per ottimizzare gli spazi. Vediamo subito un esempio:
Form Base
<form>
<div class="form-group">
<label>Nome</label>
<input type="text" class="form-control" placeholder="Nome">
</div>
<div class="form-group">
<label>Cognome</label>
<input type="text" class="form-control" placeholder="Cognome">
</div>
<button type="submit" class="btn btn-default">Invia</button>
</form>
E il risultato è il seguente:
Form in linea
Con la classe .form-inline data al tag <form> manteniamo nella stessa riga gli elementi.
<form class="form-inline">
<div class="form-group">
<label>Nome</label>
<input type="text" class="form-control" placeholder="Nome">
</div>
<div class="form-group">
<label>Cognome</label>
<input type="text" class="form-control" placeholder="Cognome">
</div>
<button type="submit" class="btn btn-default">Invia</button>
</form>
Anche qui possiamo vedere il risultato qui sotto:
Form con formattazione orizzontale
Se vogliamo allineare i tag <label> e i tag <input> utilizzando una formattazione orizzontale possiamo utilizzare la classe .form-horizontal .
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2">Nome</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Nome">
</div>
</div>
<div class="form-group">
<label class="col-sm-2">Cognome</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Cognome">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Invia</button>
</div>
</div>
</form>
Per ora tralasciamo le classi .col-sm-2 e .col-sm-10 classi che riprenderemo più avanti nella guida.
Nella prossima lezione vedremo altre classi di Bootstrap da utilizzare nei form.
Commenti
Ancora nessun commento per questo articolo