Bootstrap - Modulo Demo
Layout del modulo
Bootstrap fornisce i seguenti tipi di layout di modulo:
- Forma verticale (predefinita)
- Modulo in linea
- Forma orizzontale
Forma verticale o di base
La struttura di base del modulo viene fornita con Bootstrap; i singoli controlli del modulo ricevono automaticamente uno stile globale. Per creare un modulo di base, procedi come segue:
Aggiungi un modulo di ruolo all'elemento <form> padre.
Avvolgi etichette e controlli in un <div> con class .form-group . Ciò è necessario per una spaziatura ottimale.
Aggiungi una classe di .form-control a tutti gli elementi <input>, <textarea> e <select> testuali.
Modulo in linea
Per creare un modulo in cui tutti gli elementi sono in linea, allineati a sinistra e le etichette sono a fianco, aggiungi la classe .form-inline al tag <form>.
Forma orizzontale
I moduli orizzontali si distinguono dagli altri non solo nella quantità di markup, ma anche nella presentazione del modulo. Per creare un modulo che utilizza il layout orizzontale, procedi come segue:
Aggiungi una classe di .form-horizontal all'elemento genitore <form>.
Avvolgi etichette e controlli in un <div> con class .form-group .
Aggiungi una classe di .control-label alle etichette.
| Esempio | Descrizione | Link per scaricare |
|---|---|---|
| Pagina di login | Questo esempio indica la struttura della pagina di accesso in Bootstrap | Scarica |
| Pagina dei contatti | Questo esempio indica la struttura della pagina dei contatti in Bootstrap | Scarica |
| Pagina di iscrizione | Questo esempio indica la struttura della pagina di registrazione in Bootstrap | Scarica |