Ente accreditato Regione Veneto n.4271

La griglia fluida di Bootstrap, guida all’uso corretto

Un tutorial indispensabile per imparare a gestire il grid system del famosissimo framework open source di Twitter

Pubblicato da Simone // 8 febbraio 2017 // 747 visualizzazioni

griglia fluida Bootstrap

Il Mondo è mobile, questo è un dato di fatto.

Il primo dato da ricordare quando realizziamo i nostri siti web è che gli utenti che vi accederanno da smartphone saranno molto più di quelli che lo faranno da desktop. Diventa, quindi un obbligo, tenere in alta considerazione la visualizzazione dai device mobile.

Tra i framework più famosi per aiutarci a controllare questo aspetto c’è Bootstrap di Twitter, arrivato, in questo momento, alla versione stabile 3.3.7 con la 4 alle porte, ma state tranquilli, ci vorrà ancora un pò per la release definitiva.

Installare Bootstrap è semplicissimo e richiede veramente pochissimi passaggi, indicati direttamente nel sito ufficiale, ma non è questo di cui ci occuperemo oggi, quindi partiamo dal presupposto di aver già eseguito l’installazione.

Nei prossimi mesi torneremo spesso a parlare di questo strumento quindi rimanete connessi al nostro blog perché ci saranno delle sorprese.
Parliamo subito della famosissima e ben nota griglia fluida (o grid system che dir si voglia). Tranquilli se non la conoscete ancora. La guida è qui a posta per voi.

Notiamo subito, dalla sezione CSS del sito ufficiale, quale utilizzo faccia questo CSS precompilato delle media queries.

Grid System

Mentre, nella seconda figura, possiamo farci un idea di come vengano gestite le classi corrispondenti agli elementi che vogliamo mantenere in linea, nelle varie risoluzioni.

Grid System

In parole povere Bootstrap assegna 4 valori possibili alla gestione responsive delle classi, applicabili tenendo sempre conto che la griglia, sia questa definita in container-fluid (fullsize), o container (vedi misure sopra), lavora su un massimo di 12 colonne.

Grid System

Abbiamo quindi:

  • una classe col-lg (large) che porterà tutto di blocco sotto i 1200px di larghezza;
  • una classe col-md (medium) che porterà tutto di blocco sotto i 992px di larghezza;
  • una classe col-sm (small) che porterà tutto di blocco sotto i 768px di larghezza;
  • una classe col-xs (extra small) che non porterà mai la situazione di blocco ma manterrà sempre in linea.

Partiamo dalla versione desktop ovvero dai 1200px in sù.

Dalle figure qui sotto, si può subito notare che tutti gli elementi sono distribuiti su 3 colonne.
Ecco degli esempi chiarificatori del funzionamento di queste classi sul campo.

Grid System

Vediamo quindi come si comportano le classi lg una volta scesi sotto i 1200px di larghezza. Mentre tutte le altre rimangono allineate le prime modificano la loro struttura in block andando di fatto una sotto l’altra.

Grid System

Stesso comportamento avranno le classi md ma questa volta solamente una volta scesi sotto i 992px.

Grid System

Idem, come sopra per le sm, una volta scesi sotto i 768px. Vediamo sempre in figura come rimangono e rimarranno invariate le dinamiche relative alle xs che si mantengono in linea anche negli step successivi.

Grid System

A questo punto l’unica difficoltà è decidere quali utilizzare a seconda del progetto che stiamo realizzando.

Nell’ultima figura riassuntiva vediamo come le media queries di Bootstrap vadano a gestire la definizione delle classi da noi utilizzate, ovvero quelle da 4 per ottenere 3 colonne (4 + 4 + 4 = 12).

Grid System

Notiamo, infine, come non venga definita una queries per le xs, mentre per tutte le altre, una volta superata la risoluzione richiesta, i parametri portano questi elementi ad occupare tutto lo spazio disponibile all’interno della riga.

Non è stato troppo complicato.
A presto con moltissime info su come sfruttare al meglio questo diffusissimo framework.

Intanto, se volete, potete lasciarci un vostro commento.

Topic: , ,

Send this to a friend