Bootstrap's impostazioni predefinite
I singoli controlli dei moduli ricevono automaticamente alcune stile globale con Bootstrap .
Tutti testuale <input>, <textarea> , e <select> elementi con class="form-control" sono impostati a width: 100%; per impostazione predefinita.
Disposizioni di riferimento per Bootstrap forme:
- Aggiungi role="form" al <form> elemento (aiuta a migliorare l'accessibilità per le persone che utilizzano screen reader)
- Avvolgere etichette e controlli dei moduli in un <div> elemento con class="form-group" (necessario per la spaziatura ottimale)
- Aggiungere class="form-control" a tutti testuali <input>, <textarea> , e <select> elementi
L'esempio seguente crea un semplice modulo di bootstrap con due campi di input, una casella di controllo, e di un pulsante di invio:
Bootstrap Modulo Esempio
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input
type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox">
Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form> Prova tu stesso " <form> Corsi
| Classe | Descrizione | Esempio |
|---|---|---|
| .form-inline | Fa un <form> allineato a sinistra con comandi inline-block (Questo vale solo per le forme all'interno di viewports che sono almeno 768px di larghezza) | Provalo |
| .form-horizontal | Allinea etichette e gruppi di controlli dei moduli in un layout orizzontale | Provalo |