Bootstrap 3: quello che c’è da sapere sulla griglia responsiva

In questo breve tutorial ci concentreremo sul componente principale di bootstrap: la sua griglia responsiva. Bootstrap include fra i suoi strumenti una griglia responsiva a 12 colonne talmente flessibile e potente che spesso viene utilizzata da sola. In questa guida mi concentrerò sugli elementi fondamentali che vi permetteranno di utilizzare immediatamente questo strumento, per i dettagli vi incoraggio a fare riferimento alla  guida ufficiale mentre per una panoramica generale vi consiglio di leggere il Bootstrap 3 primi passi.

Inizio proponendovi 3 libri utili per chi desidera approfondire ogni aspetto di Bootstrap attraverso progetti pratici (a breve vi proporrò anche un mio eBook che sto finendo di scrivere in questi giorni):

ABC della griglia di Bootstrap

La griglia di bootstrap  è fatta di righe e colonne, le righe (.row) devono essere collocate all’interno di un contenitore che può essere a larghezza fissa (.container) o a larghezza fluida (.container-fluid), questo garantisce il corretto allineamento e padding degli elementi interni.

Al fine di comprendere meglio come funzionano le griglie vi consiglio di aggiungere uno stile di debug che ne evidenzi la struttura:

Le righe permettono di isolare gruppi orizzontali di colonne delineando confini ben precisi nel layout responsivo.

Per garantire il corretto funzionamento della griglia responsiva il contenuto deve essere collocato all’interno delle colonne  e solamente le colonne possono essere figlie delle righe.

Le colonne sono spaziate fra loro con il padding. Tramite le righe il padding dell’ultima e della prima colonna sono compensati da un margin negativo.

esGriglia01

Se una riga contiene più di 12 colonne le unità supplementari andranno a capo e genereranno una nuova riga: questo meccanismo viene utilizzato per gestire le colonne alle differenti risoluzioni.

La griglia di bootstrap mette a vostra disposizione 4 serie di classi che descrivono 4 griglie da 12 alle corrispettive modalità:

  • .col-xs-x
  • .col-sm-x
  • .col-md-x
  • .col-lg-x

L’utilizzo appropriato di queste classi permette un controllo estremamente granulare del comportamento del vostro layout alle differenti risoluzioni.

Il principio base che regola il funzionamento di queste classi é piramidale: le classi della vista xs regolano tutte le altre viste in assenza di specifiche regole. Così se imposto due colonne nella vista xs e non applico ulteriori classi, le due colonne rimarranno inalterate per tutte e 4 le viste. Lo stesso vale per le classi con prefisso sm e md.

Viceversa in assenza di regole specifiche passando da una vista maggiore ad una minore la colonna verrà settanta a 100%, quindi se imposto due colonne nella vista lg passando alla vista md queste si trasformeranno in due righe.

Questo schema spiega in modo dettagliato il comportamento delle colonne alle varie risoluzioni, in particolare evidenzia la dimensione di container e delle singole colonne in base alla modalità (XS,SM,MD,LG)

tabellaColonne_bootstrap

Gestire le colonne sulle 4 griglie

Di fatto Bootstrap permette di gestire 4 griglie “indipendenti” attraverso l’utilizzo delle 4 serie di classi: questo concetto deve rimanervi in mente quando andate a realizzare un layout responsivo utilizzando la griglia di Bootstrap.
In questo semplice esercizio le quattro griglie vengono utilizzate assieme:

Al variare della risoluzione si passa dalla griglia LG alla MD per poi passare alla SM e infine alla XS in questo modo l’assetto del layout cambia per garantire lo spazio necessario al contenuto di ciascuna colonna in funzione dello spazio disponibile.

griglia

Resettare le colonne

L’utilizzo delle 4 griglie crea situazioni in cui può essere utile effettuare un “reset” delle colonne ad una data risoluzione. Per reset intendiamo la creazione di una riga indipendentemente dall’altezza del contenuto delle singole colonne. Facciamo un esempio:

In questo caso, nella modalità xs, la prima colonna, che ha un’altezza differente, compromette il corretto funzionamento della seconda riga.

griglia_responsiva_2

Per risolvere il problema possiamo avvalerci delle classi ausiliarie, per gestire la visibilità di elementi in base alla modalità attiva, e di .clearfix per generare la nuova riga consistente anche in assenza di un contenitore .row.
Quindi il codice precedente diventerà:

.clearfix avrà effetto esclusivamente nella modalità xs (dove il div verrà visualizzato in modalità blocco).

griglia_responsiva_3

Le griglie annidate o nested

La griglia di bootstrap 3 è strutturata per funzionare anche annidata (la larghezza degli elementi è impostata in percentuale). Per annidare una griglia dentro l’altra è sufficiente scrivere così:

E’ sufficiente inserire nella colonna in cui si vuole creare una nuova griglia le righe e le colonne desiderate. Ricordiamoci che le dimensioni sono in percentuale per cui la nostra cella sarà suddivisa in dodici colonne. Nell’esempio riportato abbiamo inserito due righe nella prima colonna.

nesting bootstrap grid

Gestire l’offset delle colonne

La griglia di bootstrap permette una gestione molto fine della posizione delle singole colonne grazie all’offset. In pratica posso spostare a destra una colonna applicando un offset pari ad un certo numero di unità. Il comportamento è il medesimo delle classi preposte alla gestione delle colonne (.col-xx-offset-yy). Dove con xx ci riferiamo alla modalità mentre con yy all’unità (.col-md-offset-2).

Vediamo un esempio:

In questo caso nella vista MD verranno utilizzati gli offset necessari a compensare le colonne più piccole.

offset griglia responsiva

Invertire l’ordine delle colonne

Le colonne solitamente seguono l’ordine con cui sono inserite (essendo flootate è questo il comportamento atteso) tuttavia potrebbe essere utile che due colonne adiacenti si scambino di posto ad una data risoluzione. Per farlo è possibile  utilizzare col-xx-push-yy e .col-xx-pull-yy.

Andiamo a provarle in un esempio pratico:

In pratica ad una data risoluzione le colonne vengono “spinte” delle unità necessarie per inserire la colonna “tirata” e viceversa. Alla risoluzione superiore dobbiamo ricordarci di resettare tale comportamento mettendo push e pull a 0.

inverto

18 Commenti

  1. Elena · 30 gennaio 2017 Reply

    Molto interessante grazie.
    Non riesco però a far funzionare il comando per fare il reset delle colonne a una data risoluzione. Nel mio file bootstrap.min.css non c’è nessuna istruzione per visible-xs-block. Come posso inserirla?
    Uso Bootstrap v.3.0.3. Grazie

    • Alessandro · 30 gennaio 2017 Reply

      Ciao Elena, strano la classe a cui ti riferisci è presente di default all’interno del css di Bootstrap.
      Nello specifico @media (max-width: 767px) { .visible-xs-block { display: block !important; }} il suo effetto è quello di visualizzare l’elemento in formato blocco solo al break-point xs e nasconderlo in tutti gli altri casi. Se per qualche motivo lo hai cancellato o stai usando una versione ridotta di bootstrap ti conviene scaricare quella completa da http://getbootstrap.com/getting-started/ o temporaneamente provare con la CDN per vedere, nel caso tu utilizzi un layout con Bootstrap personalizzato, che questo non crei conflitti con altri elementi di layout.

    • Elena · 30 gennaio 2017 Reply

      Ok, trovato. Funziona usando visible-xs (togliendo -block). Grazie comunque.

  2. Elena · 30 gennaio 2017 Reply

    Grazie Alessandro della prontissima risposta!!

    • Alessandro · 30 gennaio 2017 Reply

      Prego 🙂

      • Elena · 30 gennaio 2017 Reply

        Posso approfittare della tua disponibilità?
        Cerco un sistema per fare il “contrario” di quanto sopra, cioè fare in modo che i blocchi non vadano su una nuova riga quando vanno a capo. Intendo dire: prendi il tuo esempio “Resettare le colonne” ma immagina che la colonna alta sia la seconda


        Vorrei che in xs la colonna 3 andasse sotto la 1 invece che in nuova riga. Spero di essermi spiegata…..

  3. Giada · 8 marzo 2017 Reply

    Ciao Alessandro, complimenti per la professionalità.. Sto cercando di fare in maniera che il mio tema SPARKLING mi restituisca i risultati della ricerca posizionando l’immagine di anteprima a sinistra del titolo dell’articolo, anzichè sopra, magari anche rimpicciolita.. Cioè vorrei che fosse tutto su una riga (immagine e a seguire titolo), mentre adesso l’immagine risulta essere una riga posizionata superiormente al titolo dell’articolo; decisamente antiestetico. Attualmente utilizzo un’impostazione full-width, ma se cambio impostazione il risultato non cambia.
    Pensi di potermi aiutare? 😉

    • Alessandro · 8 marzo 2017 Reply

      Ciao scusa il ritardo. Postami il link della pagina che ci do un okkio

  4. Aldo Addo · 8 marzo 2017 Reply

    Ciao Alessandro, il commento della mia ragazza non è uscito, ci riprovo io. Ho un sito wp che utilizza il tema sparklight… quando utilizzo il box ricerca interno del sito mi restituisce tutti i risultati pertinenti, solo che l’immagine di anteprima corrispondente ad ogni articolo risulta sovrapposta ed è assolutamente antiestetico… vorrei che risultasse affiancata a sinistra. Puoi darmi qualche consiglio? Grazie in anticipo e complimenti per l’articolo 😉

    • Alessandro · 8 marzo 2017 Reply

      Ciao probabilmente è sufficiente una modifica ai css mandami un link della pagina con i risultati

  5. Giuseppe · 24 aprile 2017 Reply

    Ciao interessante e ben fatta la spiegazione. Da tempo però mi è venuto un dubbio al quale ancora non ho una risposta certa.
    In una pagina posso avere più DIV .container oppure questa classe si riferisce all’intero layout della pagina?
    In tutti gli esempi che ho visto, vedo sempre la creazione di una che oltre ad assolvere la funzione di menu , ingloba anche quella in un certo senso di Header, senza doversi preoccupare di creare una sezione “Titolo”. A questo scopo vorrei capire se sia corretto creare un div .contanier dedicato alla sezionel” Titolo” della pagina oppure no.

  6. Magnet plugin jQuery alternativa a Salvattore Mansory e Isotope · 25 aprile 2017 Reply

    […] di gran lunga Magnet 2 perché semplice da implementare, flessibile e facilmente integrabile in una griglia bootstrap. I layout a griglia sono diventati popolari grazie a Pinterest: un trend sempreverde quando si […]

Rispondi

Leggi articolo precedente:
Snippet di codice come conservarli e condividerli con GistBox

Conservare in modo ordinato le righe di codice usate nei vostri progetti è un modo per essere maggiormente produttivi. Spesso però lo snippet non si trova...

Chiudi