Guida Bootstrap

Premessa: questa guida si basa sulla versione 3 di Bootstrap rilasciata nell'Agosto del 2013. Se state utilizzando una versione precedente del framework il mio consiglio è di effettuare un aggiornamento, se questo non è possibile considerate che diverse cose sono cambiate con l'avvento della v.3 quindi alcune parti di questa guida potrebbero non essere applicabili al vostro progetto. Cos'è...

Procurarsi Bootstrap Procurarsi il framework Bootstrap è molto semplice. Basta visitare il sito getbootstrap.com e fare clic sul pulsante download che trovate sulla prima pagina del sito. Il collegamento è disponibile anche dalla pagina Getting started. Nota: Questa guida fa riferimento alla versione 3.0.0, cioè l’ultima versione disponibile nel momento in cui si scrive. Dal download otterrete un pacchetto .zip bootstrap-3.0.0.zip, oppure...

Nella prima lezione abbiamo avuto modo di raccontare i grandi vantaggi offerti da Bootstrap, ma è bene dedicare qualche riflessione anche al supporto offerto ai diversi browser ed ai diversi dispositivi da parte di questo framework. Ufficialmente Bootrstrap supporta le più recenti versioni dei seguenti browser Chrome (Mac, Windows, iOS e Android) Safari (ma solamente per Mac e iOS) Firefox (Mac, Windows) Internet Explorer Opera...

Dopo aver parlato in generale di Bootstrap, delle sue potenzialità e del supporto offerto dai vari dispositivi, è giunto il momento di “mettere” le mani in pasta e cominciare a lavorare con gli strumenti offerti da questo potente framework, in particolare, partiremo dalla costruzione di layout a più colonne. Prima di cominciare precisiamo che, da qui in avanti, immagineremo che...

Nella scorsa lezione abbiamo già visto che le “celle” delle colonne del layout (creato con l'ausilio della "griglia" di Bootstrap) sono completamente responsive, ossia si adattano alle dimensioni del display del dispositivo in cui vengono visualizzate. Naturalmente se le celle contengono testo questo non è un problema: il testo si adatta facilmente alle diverse dimensioni del contenitore che lo...

Dopo la digressione della scorsa lezione sulle immagini responsive, torniamo a parlare della griglia di Bootstrap per la creazione dei layout, parlando di offset, ovvero la possibilità di spostare le colonne verso destra. Nella lezione 4 abbiamo detto che non è obbligatorio usare tutte le colonne della griglia per il layout e che se la somma delle colonne utilizzate è...

Annidiare le colonne Bootstrap permette di annidare le colonne, cioè di inserire una nuova griglia all'interno di un'altra griglia. Per farlo è sufficiente definire una riga (un div con classe "row") all’interno di una colonna e quindi definire le colonne annidate all’interno di ciascuna riga. Ogni riga annidata contiene a sua volta una griglia di 12 colonne che si possono riempire...

Nelle lezioni precedenti abbiamo sempre creato le colonne utilizzando la classe .col-md-N., dove N è il numero delle colonne strutturali della griglia (che come sappiamo sono 12) su cui si deve espandere la colonna del layout. Questa situazione è la più comune e la più usata. In realtà, tuttavia, è bene sapere che Bootstrap 3 dispone di 4 tipi...

Uno degli elementi comuni a tutti i siti web è la barra di navigazione (o navbar). La navbar è l'elemento strutturale che contiene i link che consentono di muoversi tra le varie sezioni del sito web: in poche parole è l'area della pagina che ospita il menu ed altre utilità di navigazione come, ad esempio, un motore di ricerca...

Continuiamo quanto introdotto nella precedente lezione proseguendo nel parlare di barre di navigazione o navbar. Innanzi tutto diciamo che tutti gli elementi della barra, che per impostazione predefinita vengono allineati a sinistra, possono essere allineati a destra usando la classe .navbar-right. Naturalmente, esiste anche la corrispondente classe .navbar-left, ma è meno usata dato che riproduce il comportamento predefinito. Nell’esempio che...

Negli esempi che abbiamo proposto fin qui, abbiamo sempre utilizzato delle pagine responsive (o, in italiano, adattive) cioè pagine i cui elementi si ridimensionano e ridispongono a seconda delle dimensioni del display del dispositivo su cui sono visualizzati. Molto spesso il layout responsive è proprio quello che occorre, ma ci possono essere situazioni in cui, per una qualche ragione,...

Nelle barre di navigazione possono essere inseriti elementi più complessi rispetto a dei semplici collegamenti. Uno degli elementi più comuni sono i cosidetti menu a discesa (o menu dropdown) i quali consentono di raggruppare più opzioni di menu sotto una unica voce creando, di fatto, un menu multi-livello. In questa lezione vedremo, per prima cosa, come creare un menu a...

Il grid system di Bootstrap di cui abbiamo parlato nelle lezioni iniziali del corso può essere espanso con l’uso del componente thumbnail che permette di creare facilmente griglie ordinate di immagini, video, e molto altro. Creando un elemento di classe thumbnail in ogni colonna della griglia si potrà mostrare una immagine o altro contenuto riquadrato. Ecco una griglia che mostra...

Per creare l'header delle pagine (intesa come area di intestazione visibile all'utente), Bootstrap dispone di una apposita classe, page-header, che appunto crea una area in cui inserire il titolo H1 ed eventuale testo supplementare. Vediamo il codice HTML: <div class="page-header"> <h1>Intestazione pagina <small>testo aggiuntivo</small></h1> </div> Naturalmente, nell'intestazione della pagina potete aggiungere altri elementi come, ad esempio, un pulsante di navigazione.. Jumbotron Se però...

Nelle lezioni precedenti ci è capitato di utilizzare dei pulsanti. Ora è giunto il momento di trattarli in modo più approfondito e capire, in modo compiuto, come sirealizzano e come è possibili personalizzarli in base alle proprie esigenze di web-design. Innanzi tutto, diciamo che per creare un pulsante, occorre usare un elemento button o a o input e assegnargli la...

Bootstrap permette di usare i pulsanti in situazioni più complesse di quelle viste nella lezione precedente, ad esempio è possibile creare gruppi di pulsanti. Gruppi di pulsanti È possibile raggruppare i pulsanti in orizzontale, facendo in modo che si presentino uniti e che solo quelli ai lati abbiano i bordi arrotondati. <div class="btn-group"> <button type="button" class="btn btn-default">Uno</button> <button type="button" class="btn...

Abbiamo già avuto modo di parlare di elenchi a discesa, ma nella loro versione più semplice. Torniamo sull’argomento per aggiungere qualche ulteriore informazione. Ad esempio, è possibile realizzare un menu a discesa (dropdown menu) che simula una selectbox. Si tratta di un’operazione semplice. Basta creare un gruppo di pulsanti con un pulsante e un elenco a discesa. Il pulsante che...

Fino ad ora abbiamo disegnato dei pulsanti che non fanno nulla, ovviamente si è trattato solo di esempi scolastici in quanto, per definzione, un pulsante fa sempre qualcosa essendo il "grilletto" natuale di numerose azioni. Ora, quindi, proveremo a trasformare i nostri bellissimi pulsanti in qualcosa di funzionale. Loading Cominciamo con un pulsante che si trova in uno stato che indica...

Il testo del corpo della pagina, per impostazione predefinita, in Boostrap, è reso con dimensione (font-size) 14px e una interlinea (line-height) di 20px; inoltre ai paragrafi viene applicato un margine inferiore (margin-bottom) di 10 px. Ovviamente esistono delle classi che permettono di modificare velocemente queste impostazioni base. Ad esempio, assegnando ad un paragrafo la classe lead, lo si evidenzia rispetto...

Bootstrap permette in modo molto semplice di creare e formattare opportunamente gli input di testo, cioè i campi in cui l'utente può digitare del testo. Nella sua forma più semplice, un campo di input viene gestito grazie alla classe form-control. <input type="text" class="form-control" placeholder="Nome"> Bootstrap consente, tuttavia, di creare soluzioni più complesse creando dei campi di input "compositi". Per fare ciò...

Bootstrap dispone di diverse classi per la formattazione delle etichette (o label). La classe label viene aggiunta ad elementi di testo inline per farne risaltare il contenuto. Oltre alla citata classe ne possono essere aggiunte altre per effettuare una ulteriore stilizzazione: queste classi corrispondono a quelle già viste per altri elementi come i pulsanti e servono per cambiare il...

I badges in Bootstrap sono piccoli elementi che possono essere posti accanto ad altri elementi per mettere in evidenza la presenza quacosa "di nuovo" come, ad esempio, il numero di messaggi non letti in un ipotetico sistema di messaggistica on-line. L'esempio più semplice consiste nell'associare un badge ad un link: <a href="#">Messaggi <span class="badge">6</span></a> Quando non contengono alcun valore i badge si...

Bootstrap permette di creare facilmente elementi utili per la paginazione dei contenuti. Tutto questo grazie all'uso della classe pagination applicata ad un elemento lista. <ul class="pagination"> <li><a href="#">&laquo;</a></li> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> <li><a href="#">D</a></li> ... ... <li><a href="#">V</a></li> <li><a href="#">Z</a></li> <li><a href="#">&raquo;</a></li> </ul> Come avviene anche per altri elementi di...

Un altro elemento facilmente realizzabile con Bootstrap è la barra di progressione (o barra di avanzamento). Nella sua forma più semplice, la barra di progressione richiede semplicemente un div di classe progress che contiene un altro elemento di classe progress-bar. Eventualmente si può inserire al suo interno un elemento con un testo che indica la percentuale di completamento. Vediamo un...

Bootstrap permette di generare in modo molto semplici delle finestre di messaggio (alert) da utilizzare per comunicare agi utenti delle informazioni di vario tipo come, ad esempio, il successo di un'operazione o il verificarsi di un errore. Questi messaggi vengono realizzati grazie alla classe alert che va necessariamente accompagnata da una delle classi di formattazione previste per questo elemento che...

Un popover è una sorta di fumetto con delle informazioni aggiuntive che compare vicino ad un elemento, quando si fa clic su di esso. Un popover viene creato a partire dall'elemento a cui è associato. Immaginiamo, ad esempio, di voler visualizzare un popover al clic su un pulsante (ma potrebbe trattarsi di qualsiasi altro elemento come una immagine), bisognerà, innanzi...

ScrollSpy è un plugin Bootstrap molto utile quando si usa una barra di navigazione per muoversi fra le varie parti di una pagina: questo plugin, infatti, permette di attivare automaticamente i link sulla barra di navigazione quando si fa lo scroll della pagina, in modo che la parte attualmente visualizzata corrisponda al link attivo sulla barra. Questo plugin risulta...

Questo plugin Bootstrap permette di creare una sequenza di immagini o altri elementi a scorrimento. Definire la struttura del Carousel La realizzazione di un carousel richiede diversi elementi. Innanzi tutto, è necessario un <div> che funga da contenitore di tutti gli elementi del carousel e che deve avere le classi carousel e slide. <div id="mioCarousel" class="carousel slide"> //contenuto del carousel </div> All'interno del div vanno...

La classe nav applicata alle liste le identifica come un insieme di collegamenti che consentono di "navigare" tra i contenuti. Nello specifico vedremo come utilizzare questa classe per creare dei sistemi di disposizione e visualizzazione dei contenuti all'interno di spazi ridotti. Fondamentalmente, abbiamo due tipi di nav: tabs e pills che possono poi essere variati mettendoli in pila (stacked) invece...

La classe list-group permette di modificare l'aspetto delle liste in modo da mostrare i contenuti in maniera più efficiente. Nella sua forma base un list-group è semplicissimo, basta aggiungere alla lista la classe list-group e ai singoli elementi della lista la classe list-group-item. <ul class="list-group"> <li class="list-group-item">Uno</li> <li class="list-group-item active">Due</li> <li class="list-group-item">Tre</li> <li class="list-group-item">Quattro</li> <li class="list-group-item">Cinque</li> </ul> L'eventuale...

L'accordion è uno strumento utile per presentare una grande quantità di contenuto nelle pagine occupando poco spazio. Il contenuto, in pratica, viene suddiviso in blocchi che poi vengono mostrati singolarmente attraverso un meccanismo a "fisarmonica" (quando si apre una "voce" si chiude quella che era aperta in precedenza). Per costruire l'accordion, si usa il plugin collapsible integrato in Bootstrap. Da un...