HTML and CSS Reference
In-Depth Information
Il menu di navigazione viene creato attraverso il tag
nav
, al quale si applicano gli stili
navbar*
per stilizzarlo e specificare che il menu è sempre visibile in alto (
navbar-
fixed-top
). Dopodiché si usa il tag
div
con classe
navbar-header
, per specificare
il logo (tag
a
con classe
navbar-brand
) e il pulsante da visualizzare quando il layout
diventa
extra-small (
tag
button
). Questo bottone ha l'attributo
data-target
,
all'interno del quale specifichiamo il nome del
div
con il menu da mostrare quando il bot-
tone viene cliccato.
Successivamente, creiamo il div con il menu da mostrare (tag
div
con id
navba-
rCollapse
). All'interno del div usiamo i tag
ul
e
li
per aggiungere le voci di menu,
impostando la classe CSS
active
sulla voce che vogliamo selezionare. Grazie a questa
piccola porzione di codice, abbiamo un menu responsivo a costo praticamente zero. Questo
dovrebbe essere sufficiente a far capire perché Bootstrap è il framework HTML/CSS per
eccellenza.
Tuttavia, come abbiamo spiegato in precedenza, Bootstrap non permette solo di creare
layout in maniera semplice ma mette a disposizione anche altre classi per disegnare le no-
stre applicazioni web, come quelle per disegnare una form.
Qualunque applicazione web necessita di form per l'inserimento di dati. Ne sono un esem-
pio le form semplici come quelle di registrazione, di login e di ricerca o quelle più com-
plesse in cui si inserisce una notevole mole di dati. Qualunque sia il tipo di form che si deve
realizzare, Bootstrap ci aiuta a mantenere il codice HTML pulito e semplice. Prendiamo
come esempio la
figura 11.3
, che mostra una form di login.
Figura 11.3
- Una form di login con Bootstrap.
Quando creiamo una form con Bootstrap, dobbiamo racchiudere ogni oggetto di input in un
tag
div
, all'interno del quale aggiungiamo un tag
label
e un tag
input
. Le checkbox
fanno eccezione, in quanto il tag
input
va impostato come figlio del tag
label
invece
