Bootstrap 3 primi passi: realizziamo un layout responsivo

In questa breve guida realizzeremo un layout responsivo utilizzando il framework Bootstrap 3. Partiremo dalle basi per cui se avete sentito parlare di questo framework ma non sapete da dove iniziare questo è il posto giusto per voi!

Che cos’è Bootstrap?

Bootstrap è un framework sviluppato da Mark Otto e Jacob Thornton (aka @mdo and @fat) a Twitter con l’obiettivo di mettere a punto un set di strumenti che uniformasse l’interfaccia web del Social Network facilitandone la manutenzione.
Nel 2011 Twitter ha rilasciato Bootstrap sotto licenza open source, da allora questo framework è stato adottato da un numero crescente di sviluppatori ed al contempo ha raggiunto la release 3.3.2.

Per avere un’idea di quanto Bootstrap sia apprezzato è sufficiente vedere il progetto su gitHub: ha ottenuto oltre 77.600 stelle e oltre 29.800 fork al progetto principale.

Da dove inizio?

Quello che vogliamo ottenere è una homepage semplice ma con tutto quello che server:

  • un layout responsivo
  • un menù responsivo usando il modulo integrato
  • un carousel completo
  • ecc.

Qui un’anteprima del layout finito:

homepage responsiva con bootstrap

Per prima cosa creeremo una pagina alla quale collegheremo i file necessari per poter iniziare a costruire il nostro layout. Oltre a Bootstrap ci serviranno jQuery, html5shiv e respond, quindi scarichiamoli:

  • Bootstrap 3 può essere usato in diversi modi, ad esempio via CDN o utilizzando Bower o NPM. Noi ci accontenteremo di scaricare l’archivio con i file già compilati (prima colonna) lasciando la versione LESS e SASS a futuri tutorial
  • jQuery è necessario per poter utilizzare la parte javascript del framework  jQuery 1.11.2 e relativo file .map
  • html5shiv è un piccolo script che garantisce la retro compatibilità dei tag HTML5 con IE8 e precedenti. In alternativa se preferite potete utilizzare il più completo  modernizr
  • Respond garantisce il funzionamento delle media query anche su IE8 e precedenti 

Creiamo la pagina HTML di partenza

Decomprimete gli archivi scaricati e organizzateli in questo modo:

tutorial-bootstrap-filesystem

Create una nuova pagina web (denominata index.html) in HTML5 così strutturata (potete usare anche questo template di partenza è ottimo):

Questa pagina può essere un ottimo punto di partenza per tutti i vostri progetti con Bootstrap perchè garantisce un funzionamento ottimale del framework e una buona retro compatibilità con i vecchi browser di casa Microsoft.

Definiamo la struttura del layout

Una volta definita la pagina di partenza è giunto il momento di strutturare il layout definendo le aree principali come la testata, l’area dedicata al carousel ecc. Qui di seguito riportiamo il contenuto del body:

Il layout è suddiviso in quattro parti: la testata, il carousel, la sezione di contenuto che conterrà  3 widget organizzati tramite la griglia di bootstrap (che vedremo più avanti) e il footer.

Strutturiamo l’header

Per prima cosa concentriamoci sull’header all’interno del quale inseriamo il primo componente: il menù responsivo. Questo componente si adatta ottimamente allo spazio disponibile secondo i quattro breakpoint che bootstrap mette a disposizione  (large, medium, small e extra small) con le opportune media query. Assieme al componente inseriremo alla sinistra il logo (testuale), mentre a destra andrà posizionato il campo cerca. Riportiamo di seguito il contenuto di header:

Il tag nav delimita il menù (navbar e navbar-inverse conferiscono forma e colore) dopodiché possiamo individuare due aree distinte al suo interno: il div con classe “navbar-header” e il div con id “mainMenu”. Il primo contiene logo e pulsante per l’attivazione del menù verticale in modalità extra small mentre il secondo contiene la lista non ordinata e il campo di ricerca (ovvero gli elementi che dovranno essere inseriti nella tendina a scomparsa):

Il componente menù utilizza collapse.js il plugin di bootstrap incluso in bootstrap.min.js; il button “toggle navigation” è collegato al menù principale e lo fa funzionare grazie alla sintassi dichiarativa data-target=”#mainMenu” con la quale viene indicato la seconda sezione del menù.

PROBLEMA: il menù ha troppe voci per essere visualizzato su una sola riga nelle viste medium e small.

SOLUZIONE: la soluzione più elegante è modificare il comportamento del modulo e fare in modo che collassi già in modalità small o addirittura medium. Sconsiglio modificare direttamente il framework, l’approccio migliore e ricompilare le sorgenti LESS modificando @navbarCollapseWidth (purtroppo il wizard online non prevede la modifica diretta di tale variabile). Una soluzione alternativa è scrivere una media query che sovrascriva il comportamento di default; quello riportato ad esempio attiva il menù a tendina in modalità small:

Una seconda soluzione può essere nascondere alcune voci di menù in base alla risoluzione grazie alle responsive utilities che bootstrap ci mette a disposizione.

responsive-utilities

Inseriamo il carousel

Il secondo componente che inseriremo è il carousel responsivo proposto fra gli strumenti predefiniti di bootstrap. Il componente è semplice quanto duttile. Qui a fini didattici ci limiteremo a inserire un carousel minimale collegato a tre placeholder. Riportiamo di seguito carousel e il suo contenuto:

Il carousel è strutturato in tre parti: gli indicatori, le slide (item può contenere anche una didascalia) e i controlli (se li omettiamo avremo uno slider automatico). Usando la sintassi dichiarativa possiamo configurare il carousel semplicemente seguendo questo schema. Brevemente:

  • la classe “carousel” applica il componente
  • la classe “slide” conferisce l’animazione di scorrimento orizzontale (senza si passerebbe da una slide all’altra senza animazioni)
  • data-ride=”carousel” provvede all’animazione automatica di passaggio da una slide all’altra, in sua assenza si devono utilizzare i pulsanti

Possiamo avere un controllo fine del comportamento del carousel con i seguenti attributi “data-“:

  • data-interval: indica l’ammontare di tempo che intercorre fra una slide e l’altra (di default data-interval=5000)
  • data-pause: attiva o meno la pausa del carousel quando il puntatore passa sulle slide (data-pause=”hover”)
  • data-wrap: indica se il loop delle foto è o meno continuo o c’è una pausa al completamento delle slide (data-pause:true)
  • data-keyboard: attiva o meno il controllo del carousel da tastiera

 Il content e la griglia

Sotto al carousel inseriremo una griglia bootstrap su due righe per gestire una citazione e tre widget. Questo ci da modo di approfondire il funzionamento della griglia responsiva. La griglia è organizzata in righe (.row) e colonne (col-x-y). La griglia di bootstrap è di 12 colonne per 4 viste per cui esistono 12 classe per ciascuna vista. In questo modo grazie alle media query è possibile gestire l’ampiezza di ciascuna colonna in base alla dimensione della finestra. Quindi se in modalità large (lg) voglio ottenere una struttura a due colonne dovrò scrivere:

in questo caso quando passerò il breakpoint relativo alla vista medium dato che non ho utilizzato classi per le colonne della griglia corrispondente le due colonne verranno settate al 100% e al posto di due colonne avremo due righe. Per gestire dimensioni differenti per la vista medium (ad esempio una dimensione di 8/12 per la colonna sinistra e 4/12 er la destra aggiungerò le opportune colonne:

se invece voglio mantenere due colonne uguali sia in small, medium e large è sufficiente inserire le classi che regolamentano le colonna nella vista a risoluzione più bassa ovvero:

in questo caso otterremo due righe solamente nella vista extra small. Ora che abbiamo chiarito le basi del funzionamento della griglia concentriamoci su #content. Al suo interno inseriremo due riche così strutturate:

La prima riga contiene una sola cella a cui è attribuito un col-md-6 e un col-md-offset-3 questo significa che la colonna da 6 verrà centrata e il suo contenuto occuperà la metà dello spazio disponibile (in questo modo la citazione sarà disposta  su 2 righe in praticamente tutte le viste a parte la xs. Il comportamento sarà identico per la vista medium e large mentre nella vista small e extrasmall la cella andrà a 100% in assenza di regole definite.

La seconda riga contiene 3 widget costituiti da titolo (h3), immagine e testo. Qui il comportamento prevede 3 colone per la vista large e media (ottenuta utilizzando col-md-4) mentre per la vista small e extra small viene nascosta l’ultima colonna con hidden-xs e hidden-sm e settando 2 colonne usando col-xs-6 sulle celle rimanenti.

In questa parte di codice sono state utilizzate inoltre alcune classi di supporto e alcune custom non facenti parte del framework (.voffsetX).I titoli h3 sono stati centrati con la classe di supporto text-center. Le immagini sono state rese responsive usando img-responsive mentre con img-thumnail abbiamo aggiunto i bordi bianchi arrotondati. Ogni widget ha un link di approfondimento, le classi che lo formattano sono:

  • btn e btn-default che gli conferiscono l’aspetto di un pulsante
  • pull-right che lo flottano a destra

Inseriamo il footer

Concludiamo la pagina inserendo un menù nel footer. In questo caso non sarà necessario usare la griglia:

 Il foglio di stile personalizzato

Benché si sia cercato di utilizzare esclusivamente quanto messo a disposizione del framework sono stati necessari alcuni stili che ho inserito in un file denominato style.css (da collegare subito dopo a quello di bootstrap)

Conclusione

La guida aveva l’obiettivo di fornire una panoramica generale dell’utilizzo di bootstrap attraverso la creazione di una homepage. E’ possibile scaricare lo zip dell’esercizio svolto da qui. Buono studio!

 

 

 

2 Commenti

  1. Luca · 18 ottobre 2016 Reply

    Ciao, grande articolo… sto “giocando” con la pagina, due domande:
    – Come fare “far funzionare” il campo cerca?
    – “btn e btn-default che gli conferiscono l’aspetto di un pulsante”… ok, quindi come faccio a togliere il bordo che lo fa sembrare un pulsante?

    • Alessandro · 17 novembre 2016 Reply

      Ciao Luca,
      – Bootstrap è un framework per il front end ergo, per far funzionare il campo cerca è necessario fare in modo che il campo action del form a cui fa riferimento sia collegato ad uno script che esegua, ad esempio, una query sul database su cui sono memorizzati i dati, restituendo in una pagina tutti quei contenuti che contengono il termine ricercato. Bootstrap si occupa solo dell’aspetto del campo cerca non della logica.
      – Bootstrap propone una serie di elementi con un aspetto standard, per customizzare tale aspetto hai due strade: sovrascrivere via css in modo selettivo gli stili che desideri (in questo caso a btn-default applicherai uno stile border:none o se vuoi togliere a tutti i bottoni il bordo lo applichi a btn) oppure ricompilare bootstrap andando a customizzare direttamente il pacchetto da qui: http://getbootstrap.com/customize/ la sezione bottoni però non prevede di eliminare il bordo ma permette di variare altri aspetti come il suo colore nei vari stati ecc.

Rispondi

%d blogger hanno fatto clic su Mi Piace per questo:
Leggi articolo precedente:
jquery-match-height un plugin jQuery per ottenere colonne alte uguale

jquery-match-height risolve un problema tanto banale quanto fastidioso: quello di ottenere in box dalla medesima altezza in ogni frangente. Il plugin è leggero e garantisce...

Chiudi