Componenti di Bootstrap, una panoramica

Prima di vederli in uso sul progetto che abbiamo approntato per questa guida, è opportuno soffermarsi in questa lezione sui componenti di Bootstrap. Non li analizzeremo nei dettagli uno per uno, anche perché sarebbe un'inutile duplicazione dei contenuti della documentazione ufficiale e della

che accompagna questa guida.

Imparare a usare i componenti del framework, in effetti, è un processo che consta di due momenti successivi:

1. imparare la struttura e il markup HTML con le classi associate a ciascun componente;
2. studiare il codice CSS associato ai componenti stessi, soprattutto ai fini della personalizzazione.

Se per questo secondo passo è necessario confrontarsi direttamente con il codice CSS del foglio di stile di Bootstrap, per il primo sarà sufficiente approfondire a partire dalla documentazione. In ogni caso, si tenga presente che la logica che sottende al funzionamento di Bootstrap è identica a quella di altri framework e che abbiamo visto in azione anche nella

: un componente è dato dall'applicazione di specifici stili assegnati tramite classi o associati direttamente a determinati elementi HTML nel foglio di stile.

Come è strutturata la documentazione di Bootstrap

La documentazione di Bootstrap è suddivisa in tre sezioni:

1. [!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager

   : comprende gli stili di base globali, le regole per la tipografia e quelle per la formattazione degli elementi HTML fondamentali.

2. [!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager

   : comprende esempi e codice di base per tutti i componenti di interfaccia predefiniti del framework.

3. [!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager

   : è la sezione dedicata ai plugin jQuery che forniscono la base per la realizzazione di componenti interattivi.

Per ciascun componente vengono fornite sintetiche istruzioni sull'implementazione. Soprattutto, la documentazione presenta sempre un esempio con il codice HTML, l'evidenziazione delle classi da applicare e il risultato finale, una comoda anteprima che ci consente sempre di sapere in anticipo cosa si va a realizzare scegliendo un dato componente:

Di fatto, la documentazione è anche una collezione di snippet di codice HTML pronti per l'uso e da cui iniziare per comporre la nostra pagina. Un consiglio operativo: piuttosto che affidarsi ogni volta ad un copia e incolla dalla documentazione al nostro documento HTML, è preferibile costruirsi una piccola libreria con gli snippet associati ai vari componenti, magari personalizzandoli secondo le nostre esigenze. A questa libreria si potrà attingere facilmente ogni qual volta si mette mano ad un progetto. Il luogo ideale dove realizzarla è il nostro editor di riferimento. Che si tratti di Sublime Text, o, su Mac, di Textmate o Coda, tutti offrono la possibilità di creare simili collezioni di snippet di codice, da editor a editor cambia solo la denominazione. Ecco un esempio con Coda 2 su Mac:

Stili di base

Torniamo alla panoramica sui componenti illustrando più in dettaglio le tre sezioni, a partire dalla pagina

. Troverete qui le impostazioni stilistiche per gli elementi HTML di base: tipografia (titoli, paragrafi, liste, etc.), porzioni e listati di codice, tabelle, form, bottoni, immagini. La sezione comprende anche la documentazione relativa alla griglia e al layout, oltre che i riferimenti alle classi di utilità per il design responsivo.

Componenti CSS

La sezione

comprende tutti quei componenti che vanno al di là degli elementi HTML primari. Ecco la lista completa:

Componente	Descrizione
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	istruzioni ed esempi per usare l'icon font predefinito di Bootstrap e per associare le icone agli altri componenti.
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	menu contestuali a comparsa per liste di link da associare alla barra di navigazione e ad altri pulsanti di attivazione; l'interattività è gestita tramite il plugin Javascript [!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager .
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	un'estensione del componente primario [!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager per creare gruppi e barre di pulsanti.
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	menu dropdown associati a bottoni.
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	campi di input dei form associati e raggruppati con testo e/o pulsanti.
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	menu di navigazione creati a partire da liste di link in diverse configurazioni (tab o pills, orizzontale o verticale, etc.).
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	un complesso componente per creare una barra di navigazione principale del sito interattiva e responsiva.
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	navigazione breadcrumb per segnalare la posizione corrente nella struttura del sito.
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	link per la navigazione in siti multi-pagina.
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	generiche etichette per l'evidenziazione di testo.
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	evidenziazione di nuovi elementi o elementi non letti secondo le convenzioni dell'interfaccia di iOS.
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	un box generico e flessibile per ospitare i contenuti in evidenza della pagina.
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	anche in questo caso, un box generico per ospitare le intestazioni di sezione di un documento.
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	un componente flessibile da associare alla griglia per creare gallerie responsive di immagini, video e box testuali.
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	box di avviso a comparsa; l'interattività è gestita tramite il plugin [!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager .
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	barre di avanzamento statiche e animate.
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	liste di oggetti composte da testo e immagini floattate a destra o sinistra come i thread di commenti.
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	componente flessibile per la visualizzazione di elementi di lista raggruppati in un box.
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	una struttura generica per creare pannelli e box.
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	un box generico con effetto incassato per l'evidenziazione di contenuti.

Plugin Javascript

La collezione di plugin Javascript di Bootstrap è rimasta praticamente invariata rispetto alle versione 2.x. Ecco cosa ci mette a disposizione il framework:

Plugin	Descrizione
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	box modali con overlay.
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	in un menu di navigazione, evidenzia le varie voci man mano che si raggiungono le sezioni corrispondenti scorrendo la pagina.
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	pannelli a tab.
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	piccoli box a comparsa per mostrare contenuto secondario associato a un link o a un pulsante.
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	sostituisce in questa versione il plugin Accordion.
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	slideshow di immagini e pannelli con testo.
[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager	menu di navigazione fisso e con evidenziazione della sezione corrente.

Per concludere, ecco una

riuniti in un unico file PNG (1,4mb, 5150x5299px). L'immagine è stata generata a partire da

distribuito da Designshock.