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="#">«</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="#">»</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...
Abbiamo a cuore la tua privacy
Noi e i nostri partner archiviamo e/o accediamo a informazioni su un dispositivo. Cookie, identificatori del dispositivo o analoghi identificatori online (ad es. identificatori basati sull’accesso, identificatori assegnati casualmente, identificatori basati sulla rete) insieme ad altre informazioni (ad es. tipo di browser e informazioni sul browser, lingua, dimensioni dello schermo, tecnologie supportate, ecc.) possono essere archiviati sul o letti dal dispositivo dell’utente per riconoscerlo ogni volta che l’utente si connette a un’app o a un sito web, per una o più finalità qui presentate.
Con il tuo consenso, i tuoi dati possono essere utilizzati per quanto segue: Pubblicità e contenuti personalizzati, misurazione delle prestazioni dei contenuti e degli annunci, ricerche sul pubblico, sviluppo di servizi; Dati di geolocalizzazione precisi e identificazione attraverso la scansione del dispositivo.
I tuoi dati personali verranno trattati e le informazioni dal tuo dispositivo (cookie, identificatori univoci e altri dati del dispositivo) possono essere memorizzate, consultate e condivise con 179 partner, o utilizzate specificamente da questo sito o questa app. Alcuni fornitori potrebbero trattare i tuoi dati personali sulla base dell'interesse legittimo, al quale puoi opporti gestendo le tue opzioni qui sotto. Puoi revocare il tuo consenso in qualsiasi momento facendo clic sul link delle impostazioni sulla privacy situato in fondo alla pagina.
Alcuni partner non chiedono il tuo consenso al trattamento dei tuoi dati, ma fanno affidamento sul loro legittimo interesse commerciale. Guarda il nostro elenco di partner per conoscere gli scopi per cui credono di avere un interesse legittimo e come puoi opporti.
Questi sono i nostri partner pubblicitari che partecipano al Framework di trasparenza e consenso dello IAB, creato per garantire un uso trasparente e corretto dei dati.
Questi fornitori sono registrati su Google, ma non nel Transparency & Consent Framework di IAB Europe.
{"b_dec":{"def":"Rifiuta e chiudi","res":"Rifiuta e chiudi"},"priclt":" \u003Cdiv class=\u0022cl-consent-settings cl-consent-settings--is-hidden\u0022\u003E \u003Cstyle\u003E .cl-consent-settings { position: fixed; left: 16px; bottom: 28px; z-index: 100; transition: all 0.15s ease-in-out; transform: translateY(0); } .cl-consent-settings--is-hidden { transform: translateY(70px); opacity: 0; } .cl-consent-settings__hint { border-radius: 4px; background: #282A3C; box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.15); color: #FFFCF2; position: absolute; right: -195px; top: 0; bottom: 0; margin: auto; height: 40px; width: 175px; display: flex; align-items: center; justify-content: center; padding: 4px 12px; font-size: 12px; font-weight: 400; line-height: 16px; cursor: default; user-select: none; transition: transform 0.3s ease, opacity 0.3s ease; transform: translateX(0); opacity: 0; pointer-events: none; z-index: -1; } .cl-consent-settings__hint::after { content: \u0022\u0022; position: absolute; left: -16px; top: 0; bottom: 0; margin: auto; width: 0; height: 0; border: 0 solid transparent; border-top-width: 12px; border-bottom-width: 12px; border-right: 16px solid #282A3C; } .cl-consent-settings__btn { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background-color: #4B81E8; background-image: url(\u0022data:image\/svg+xml,%3Csvg xmlns=\u0027http:\/\/www.w3.org\/2000\/svg\u0027 width=\u002730\u0027 height=\u002730\u0027 viewBox=\u00270 0 30 30\u0027 fill=\u0027none\u0027%3E%3Cpath fill=\u0027%23fff\u0027 d=\u0027M15 2.813C8.28 2.813 2.812 8.28 2.812 15S8.28 27.188 15 27.188c6.72 0 12.188-5.468 12.188-12.188C27.188 8.28 21.72 2.812 15 2.812Zm0 1.874c5.686 0 10.313 4.627 10.313 10.313 0 5.686-4.627 10.313-10.313 10.313-5.686 0-10.313-4.627-10.313-10.313C4.688 9.314 9.314 4.687 15 4.687Zm-1.875 3.75a.937.937 0 1 0 0 1.875.937.937 0 0 0 0-1.874Zm5.156.938a1.406 1.406 0 1 0 0 2.812 1.406 1.406 0 0 0 0-2.812Zm-7.968 2.813a1.875 1.875 0 1 0 0 3.749 1.875 1.875 0 0 0 0-3.75Zm5.624 1.874a.938.938 0 1 0 0 1.876.938.938 0 0 0 0-1.876Zm4.688.938a.938.938 0 1 0 0 1.875.938.938 0 0 0 0-1.875Zm-8.906 2.813a1.406 1.406 0 1 0 0 2.812 1.406 1.406 0 0 0 0-2.813Zm6.562.937a1.406 1.406 0 1 0 0 2.813 1.406 1.406 0 0 0 0-2.813Z\u0027\/%3E%3C\/svg%3E\u0022); background-position: center center; background-size: 30px 30px; background-repeat: no-repeat; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.35); z-index: 70; position: relative; text-decoration: none; } .cl-consent-settings__btn:hover + .cl-consent-settings__hint { transform: translateX(22px); pointer-events: all; opacity: 1; } .cl-consent-settings__user { width: 18px; height: 18px; border-radius: 50%; padding: 0; border: 1px solid #ffffff; background-color: #00AD98; background-image: url(\u0022data:image\/svg+xml,%3Csvg xmlns=\u0027http:\/\/www.w3.org\/2000\/svg\u0027 viewBox=\u00270 0 10 11\u0027 width=\u002710\u0027 height=\u002711\u0027 fill=\u0027none\u0027%3E%3Cpath fill=\u0027%23fff\u0027 stroke=\u0027%23fff\u0027 stroke-width=\u0027.1\u0027 d=\u0027M6.858 6.262A3.3 3.3 0 0 0 8.2 3.597C8.2 1.796 6.764.325 5 .325s-3.2 1.47-3.2 3.272c0 1.094.53 2.07 1.342 2.665A4.67 4.67 0 0 0 .45 10.5v.05h1v-.05c0-2.012 1.585-3.632 3.55-3.632s3.55 1.62 3.55 3.632v.05h1v-.05a4.67 4.67 0 0 0-2.692-4.238ZM5 1.345c1.22 0 2.2 1.002 2.2 2.252s-.98 2.25-2.2 2.25-2.2-1-2.2-2.25.98-2.252 2.2-2.252Z\u0027\/%3E%3C\/svg%3E\u0022); background-position: center center; background-size: 9px 10px; background-repeat: no-repeat; z-index: 75; position: absolute; top: -2px; right: -8px; text-decoration: none; visibility: hidden; } \u003C\/style\u003E \u003Cbutton type=\u0022button\u0022 class=\u0022cl-consent-settings__btn\u0022 onclick=\u0022if(window.__lxG__consent__ !== undefined) {window.__lxG__consent__.showConsent()} else {alert(\u0027This function only for users from European Economic Area (EEA)\u0027)}; return false\u0022\u003E \u003Cspan class=\u0022cl-consent-settings__user\u0022\u003E\u003C\/span\u003E \u003C\/button\u003E \u003Cdiv class=\u0022cl-consent-settings__hint\u0022\u003EPrivacy and cookie settings\u003C\/div\u003E \u003C\/div\u003E","pricds":"show_in_the_footer","vcnt":179,"_t":{"titles":"Purposes|Purposes (Legitimate Interest)|Features|Special Features|Special Purposes|Scopi|Scopi (Interesse Legittimo)|Caratteristiche|Caratteristiche Speciali|Scopi Speciali","sp3_ret":"Le scelte che fai riguardo agli scopi e alle entità elencati in questo avviso sono salvate per un massimo di %sp3_retention% nei seguenti cookie e variabili di archiviazione locale","ill_pp_ttl":"Esempi di Utilizzo","vndr_dtls_con":"Trattamento dei dati basato sul tuo consenso","vndr_dtls_li":"Trattamento dei dati basato sul legittimo interesse","vndr_dtls_fi":"Trattamento dei dati basato sul tuo consenso o interesse legittimo","cks_strg_dur":"dura %DURATION%","cks_strg_ses":"per la sessione attuale","cks_strg_not_used":"non utilizzato","cks_strg_dur_s":"sec","cks_strg_dur_i":"min","cks_strg_dur_h":"ora(e)","cks_strg_dur_d":"giorno(i)","cks_strg_dur_m":"mese(i)","cks_strg_dur_y":"anno(i)","vr_dts_purl":"URL della politica sulla privacy","vr_dts_dsurl":"URL di divulgazione dell\u0027archiviazione del dispositivo","vr_dts_dsurl_h":"Informazioni aggiuntive su archiviazione e operazioni","vr_dts_clmurl":"URL della richiesta di interessi legittimi","vr_dts_datac":"Categorie di dati","vr_dts_datac_h":"Categorie di dati raccolti in relazione agli scopi","vr_dts_stdret":"Conservazione dei dati standard (giorni)","vr_dts_stdret_h":"Il periodo standard è utilizzato a meno che non sia dichiarato un altro periodo per scopi specifici.","vr_dts_ret":"Conservazione dei dati (giorni)","vr_dts_usecks":"Usa i cookie","vr_dts_usecks_h":"Indica se il fornitore utilizza l\u0027archiviazione dei cookie (sessione o altro). SÌ indica che l\u0027archiviazione dei cookie è utilizzata. NO - l\u0027archiviazione dei cookie non è utilizzata.","vr_dts_usecksy":"Sì","vr_dts_usecksn":"No","vr_dts_cksage":"Età massima del cookie","vr_dts_cksage_h":"Il numero di secondi che rappresenta la durata potenziale più lunga per l\u0027archiviazione dei cookie su un dispositivo. Se un fornitore utilizza più cookie con durate diverse, rappresenta il cookie con la durata più lunga. Un numero negativo o 0 indica l\u0027archiviazione della sessione simile alla specifica Set-Cookie.","vr_dts_cksref":"Aggiornamento cookie","vr_dts_cksref_h":"Indica se i cookie vengono aggiornati dopo essere stati inizialmente impostati. SÌ - indica che il fornitore può aggiornare i cookie. NO - indica che il fornitore non aggiorna i cookie ogni volta che il browser viene ricaricato.","vr_dts_noncks":"Utilizza l\u0027accesso senza cookie","vr_dts_noncks_h":"Indica l\u0027uso da parte del fornitore di archiviazione non-cookie e accesso alle informazioni già memorizzate sul dispositivo di un utente. SÌ - indica che l\u0027accesso senza cookie è utilizzato. NO - indica che l\u0027archiviazione e l\u0027accesso senza cookie alle informazioni già memorizzate sul dispositivo di un utente non vengono utilizzati.","vr_dts_hgetl":"Limite della lunghezza della richiesta HTTP GET (Kbyte)","vr_dts_hgetl_h":"Dimensione massima della richiesta GET in kilobyte per aiutare a diagnosticare i problemi con il passaggio della stringa TC e limitare le stringhe di dimensioni eccessive.","vr_dts_addtnl":"Dati aggiuntivi","vr_dts_legaddr":"Indirizzo completo dell\u0027entità legale","vr_dts_b2bcont":"Dettagli di contatto B2B","vr_dts_terscp":"Ambito territoriale","vr_dts_terscp_h":"Indica le giurisdizioni UE\/SEE\/UK in cui il fornitore opera con TCF. Nota che questo è diverso dalla sede del fornitore.","vr_dts_env":"Ambiente","vr_dts_env_h":"Indica gli ambienti in cui il venditore opera","vr_dts_tserv":"Tipo di servizi","vr_dts_tserv_h":"Indica il tipo di servizi offerti dal venditore","vr_dts_trnsfout":"Trasferimenti internazionali fuori dall\u0027UE\/SEE","vr_dts_trnsfout_h":"Indica le giurisdizioni UE\/SEE\/UK in cui il fornitore opera con TCF. Nota che questo è diverso dalla sede del fornitore.","vr_dts_trnsfmch":"Meccanismi di trasferimento internazionale"}}