Twitter Bootstrap: come implementare l’uso di form?
Eccoci alla terza lezione del corso sul Twitter Bootstrap. Abbiamo visto finora cos’è il Twitter Bootstrap e come utilizzare il suo potentissimo grid-system all’interno dei nostri progetti. Nella lezione di oggi ti spiegherò in dettaglio gli elementi HTML base e come integrarli nelle tue pagine web.
Quali sono gli stili di default che il Bootstrap associa agli elementi HTML?
Nella scorsa lezione abbiamo visto come gli elementi HTML abbiano uno stile di base utilizzando Normalize.css. Quello che non abbiamo visto è che ci sono alcuni elementi del Bootstrap che ci vengono però forniti già con uno stile CSS personalizzato così da essere pronti all’uso.
Tra questi abbiamo:
- gli elementi tipografici (<h1>…<h6>, <p>, <em>, ecc. )
- gli elementi di tipo codice (<pre> e <code>)
- le tabelle
- le form
- i <button>
- le immagini
- le icone
Vista la quantità di elementi da analizzare e relativi esempi, la lezione sarà suddivisa in due parti. In questa prima parte scoprirai, tra le altre cose, come sia semplice realizzare form molto potenti con pochissime righe di codice; nella seconda parte, invece, approfondirai i button, le immagini e le icone incluse nel Bootstrap.
Iniziamo?
Gli elementi tipografici
Tutti gli elementi HTML utilizzati per il contenuto della pagina sono forniti dal Boostrap con uno stile già personalizzato. Questo significa, ad esempio, che tutti gli elementi di tipo heading (h1, h2, …), i paragrafi, le abbreviazioni, le liste, e così via hanno già uno stile che ci consente di utilizzarli direttamente senza la necessità di assegnare noi uno stile predefinito.
Oltre agli elementi base, ci sono anche delle classi già personalizzate che consentono di modificare il colore degli elementi tipografici. Se ad esempio volessimo mostrare, in seguito alla compilazione di una form, un messaggio con un colore differente a seconda dell’esito dell’operazione potremmo utilizzare una delle seguenti classi:
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
E’ disponibile una lista completa degli stili al seguente link.
Codice
Gli elementi di tipo codice possono essere di due tipi:
- inline (<code>)
- blocco (<pre>)
Anche per questi due elementi è possibile visionare una demo online.
Tabelle
Il Bootstrap fornisce differenti tipologie di classi che possono essere assegnate alle tabelle o ai singoli elementi della tabella rendendo altissimo il numero di combinazioni possibili che possiamo realizzare grazie ad esse.
Lo stile di base di una comune tabella è il seguente:
<table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> ... </tbody> </table>
Nel caso volessimo alternare il colore delle righe della tabella potremmo assegnare la classe table-striped alla tabella:
<table class="table table-striped">
Per aggiungere un bordo arrotondato alla tabella possiamo utilizzare la classe table-bordered:
<table class="table table-bordered">
Se invece abbiamo la necessità di evidenziare la riga corrente al passaggio del mouse abbiamo a disposizione la classe table-hover:
<table class="table table-hover">
Per una tabella più compatta, senza padding superiori e inferiori alle righe, c’è la classe table-condensed:
<table class="table table-condensed">
Come per gli elementi tipografici, anche per le righe abbiamo a disposizione delle classi per modificare il colore ed enfatizzarle rispetto al resto della tabella. Le classi sono le seguenti:
- success
- error
- warning
- info
e possono essere utilizzate come nell’esempio seguente:
... <tr class="success"> <td>1</td> <td>TB - Monthly</td> <td>01/04/2012</td> <td>Approved</td> </tr> ...
Un esempio di tutte le tabelle è disponibile al seguente link.
Form
Le form rappresentano sicuramente la sezione che più è stata personalizzata dagli sviluppatori del Bootstrap. Le possibilità di utilizzo e combinazioni dei vari elementi (e relative classi personalizzate) sono davvero infinite. In questo articolo vedremo solo le più comuni ed importanti ma è possibile approfondire la lista completa delle funzionalità a disposizione nella documentazione ufficiale.
Gli elementi di base di una form (input, select, button, ecc.) hanno già uno stile che ci consente di creare in una manciata di minuti una form già funzionante senza bisogno di mettere mano al foglio di stile.
Il codice seguente, ad esempio, ci consente di creare una semplice form con gli elementi più comuni:
<form> <fieldset> <legend>Legend</legend> <label>Label name</label> <input type="text" placeholder="Type something…"> <span class="help-block">Example block-level help text here.</span> <label class="checkbox"> <input type="checkbox"> Check me out </label> <button type="submit" class="btn">Submit</button> </fieldset> </form>
Il risultato finale è disponibile al seguente link.
Nel caso si avesse il bisogno di avere gli elementi della form in un’unica riga è possibile assegnare la classe form-inline:
<form class="form-inline"> <input type="text" class="input-small" placeholder="Email"> <input type="password" class="input-small" placeholder="Password"> <label class="checkbox"> <input type="checkbox"> Remember me </label> <button type="submit" class="btn">Sign in</button> </form>
Il Bootstrap come principio generale è stato realizzato per venirci incontro nella maggior parte delle esigenze più frequenti. E’ per questo che abbiamo a disposizione altre classi per le form più comuni che quotidianamente abbiamo la necessità di realizzare.
Un altro valido esempio è una form di ricerca:
<form class="form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">Search</button> </form>
In alcune form di registrazione, si potrebbe avere l’esigenza di allineare a destra le label in maniera da avere allineati orizzontalmente i vari campi (come ad esempio in alcune form di login). Il codice necessario è il seguente:
<form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="inputEmail">Email</label> <div class="controls"> <input type="text" id="inputEmail" placeholder="Email"> </div> </div> <div class="control-group"> <label class="control-label" for="inputPassword">Password</label> <div class="controls"> <input type="password" id="inputPassword" placeholder="Password"> </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"> <input type="checkbox"> Remember me </label> <button type="submit" class="btn">Sign in</button> </div> </div> </form>
Ogni form che si rispetti ha la necessità di essere validata. Anche in questo caso ci viene incontro il Bootstrap con alcune classi CSS:
<div class="control-group warning"> <label class="control-label" for="inputWarning">Input with warning</label> <div class="controls"> <input type="text" id="inputWarning"> <span class="help-inline">Something may have gone wrong</span> </div> </div> <div class="control-group error"> <label class="control-label" for="inputError">Input with error</label> <div class="controls"> <input type="text" id="inputError"> <span class="help-inline">Please correct the error</span> </div> </div> <div class="control-group success"> <label class="control-label" for="inputSuccess">Input with success</label> <div class="controls"> <input type="text" id="inputSuccess"> <span class="help-inline">Woohoo!</span> </div> </div>
Come estendere le form con il Bootstrap?
Finora abbiamo visto come utilizzare le form nella maniera classica. Ci sono però tantissimi altri modi di sfruttare il Bootstrap per potenziare i campi di input e migliorare incredibilmente l’esperienza utente.
E’ possibile infatti anteporre o posporre ad un campo input di tipo testo degli elementi di tipo button, un altro strumento potentissimo messo a disposizione. Un esempio di partenza può essere il seguente:
<div class="input-append"> <input class="span2" id="appendedInputButton" type="text"> <button class="btn" type="button">Go!</button> </div>
Le potenzialità del Bootstrap però non si limitano a questo. Possiamo ad esempio utilizzare il button come menu dropdown:
<div class="input-append"> <input class="span2" id="appendedDropdownButton" type="text"> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> </div>
Possiamo anche inserire due menu dropdown:
<div class="input-prepend input-append"> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> <input class="span2" id="appendedPrependedDropdownButton" type="text"> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> </div>
Conclusioni
In queste prime lezioni non abbiamo ancora scritto una sola riga di codice Javascript eppure abbiamo realizzato degli elementi interattivi anche abbastanza complessi con una semplicità incredibile. Abbiamo visto infatti che sono sufficienti poche classi CSS assegnate a comunissimi elementi HTML per creare, ad esempio, menu dropdown che altrimenti ci avrebbero portato via molto tempo.
Quali sono le tue impressioni sul Bootstrap dopo queste prime lezioni?
Indice della guida
- Come sviluppare rapidamente applicazioni web?
- Come utilizzare le griglie?
- Come implementare l’uso di form e pulsanti?
- Le form
- I pulsanti
- Come creare le interfacce delle nostre applicazioni?
- Come far interagire gli utenti con le applicazioni?
17 commenti
Trackback e pingback
-
Twitter Bootstrap Scaffolding: come utilizzare le griglie? | Your Inspiration Web
[...] Come implementare l’uso di form e pulsanti? [...] -
Twitter Bootstrap: come sviluppare rapidamente applicazioni web? | Your Inspiration Web
[...] Le form [...] -
Twitter Bootstrap: come realizzare dei menu accattivanti? | Your Inspiration Web
[...] Le form [...] -
Twitter Bootstrap: come implementare l’uso dei pulsanti? | Your Inspiration Web
[…] Le form […]
Grazie mille per la guida, davvero utilissima!
Sto pian piano iniziando ad usare il Bootstrap e sto imparando ad amarlo. :)
Ciao Daniele,
grazie per i complimenti e soprattutto felice di esserti d’aiuto :)
Sono veramente affascinato dall’argomento e dal tuo modo di esporlo. Ho letto tutti e tre gli articoli di filato e non vedo l’ora di mettere in pratica il tutto!
Ho due domande.
La prima, solo per capire se ho capito (premetto che non ho ancora scaricato il pacchetto completo): tutti questi codici css sono già pronti? voglio dire, io creo un sito e anzichè iniziare con la creazione di index.html e style.css, faccio solo la mia paginetta html e ci associo il file bootstrap.css ed è già tutto lì?
La seconda è più tecnica: IE7
Non credo ci sia bisogno di aggiungere altro… :)
Ciao Igor,
la prima: esattamente! Includi i file scaricati ed hai già tutto lì.
la seconda: qui trovi la tabella delle compatibilità https://github.com/twitter/bootstrap/wiki/Browser-Compatibility . IE7 è dichiarato come supportato ma non ho esperienze in prima persona dato che ormai sviluppiamo da IE8 in su.
Il fatto è che, nonostante le statistiche dicano che gli utenti che usano IE7 siano circa il 3/5% della popolazione, ti posso dire che tra i miei clienti ne ho trovati diversi che lo utilizzano… con tutte le noie del caso :D Quindi prima di buttarmi anima e corpo su HTML5 bisogna che riesca a farlo funzionare bene su tutti i browser prima ancora che su tutti i dispositivi.
Ti capisco benissimo Igor. E’ normale avere la certezza assoluta che tutto funzioni per il meglio prima di utilizzare un prodotto!
Confesso che conoscevo il Bootstrap di Twitter già prima, però non avevo compreso bene il meccanismo di funzionamento delle griglie, soprattutto nel caso “-fluid”.
A quando la prossima puntata? Perché non considerate una cadenza regolare? Grazie mille, siete fantastici!
Ciao Vincenzo, è stata pubblicata oggi la seconda parte di questa lezione.
Attualmente gli articolo hanno già una cadenza regolare, vengono pubblicati di mercoledì ogni due settimane. ;)
Ciao, grazie mille per gli articoli molto interessanti. Sto provando bootstrap e mi piace molto lo stile e la filosofia. Io sto provando con wordpress. Non mi è ancora chiaro però, come fare per attivare il responsive. MI spiego meglio, se ho un CSS basato su bootstrap ma non responsive, come faccio ad attivarlo? Mi basta inserire le media query e la chimata ai file .js nell’header? Un altro dubbio che ho è sui file .min.CSS…sono indisensabili? Cosa fanno? Prevalgono sul CSS normale?
Grazie in anticipo per le eventuali spiegazioni :-)
Saluti, Davide
Ciao Davide,
puoi approfondire il Bootstrap e trovare risposte alle tue domande leggendo i precedenti articoli. Trovi l link nell’indice in fondo all’articolo.
Comunque il responsive è attivo automaticamente, ti è sufficiente importare il file css relativo (bootstrap-responsive.css) senza bisogno di js.
Riguardo i file min, anche questo è spiegato nell’altro articolo. Ad ogni modo sono una versione minimizzata, ovvero compressa dei file originali utilizzata per risparmiare spazio e banda degli utenti che visiteranno il tuo sito. Non hanno una valenza maggiore (sono del tutto uguali) bensì possono essere utilizzati al posto dei file originali (più pesanti).
Buon lavoro! :)
Ciao Simone, stamane, nel tuo diario facebook, ho letto che avevi appena pubblicato una lezione su Twitter Bootstrap. L’ho letta tutto di un fiato (e anche le precedenti) e sono rimasto sbalordito dalle numerose potenzialità che questo framework offre a chiunque si cimenti nella programmazione sul web. Se penso al tempo dedicato alle creazione di menu, bottoni, form e quant’altro, mi viene male.
Si creano gli elementi tipografici senza scrivere neppure una riga di codice!
Grande!!!
Con piacere voglio aggiungere che esponi le tue lezioni in maniera chiara e approfondita con esempi appropriati che permettono di capirle con estrema facilità.
Grazie per le conoscenze che ci trasmetti.
A presto.
Claudio
Ciao Claudio,
ti ringrazio immensamente per i complimenti che sono sempre più di stimolo a fare meglio.
Questo framework bisogna riconoscerlo è fantastico. Da quanto lo abbiamo inserito nei nostri processi di sviluppo, il risparmio dei tempi è stato nettissimo.
Grazie ancora. :)
Ottimo …i tutorial e anche Bootstrap
ma devo approfondire di più, prima di utilizzare una nuova cosa
devo capire bene quali sono i limiti…
grazie