Il sistema a griglia di Bootstrap

Bootstrap è indubbiamente uno dei framework più popolari per il front-end. Con più di 73.000 stelline e 27.000 fork, Bootstrap è uno dei più importanti repository di GitHub. In questo articolo discuteremo del sistema a griglia, uno dei più importanti concept all’interno di Bootstrap.
Il sistema a griglia di Bootstrap

Specifiche sulla traduzione

Di seguito la traduzione dell’articolo “Understanding Bootstrap’s Grid System“.

Bootstrap è indubbiamente uno dei framework più popolari per il front-end. Con più di 73.000 stelline e 27.000 fork, è uno dei più importanti repository di GitHub. Nel mio ultimo articolo vi ho spiegato il funzionamento responsive di Bootstrap. In questo articolo discuteremo del sistema a griglia, uno dei più importanti concept all’interno di Bootstrap.

In cosa consiste il sistema a griglia di Bootstrap?

Come una qualsiasi griglia, anche quella di Bootstrap si basa su una libreria di componenti HTML/CSS che ti consentono di strutturare e di posizionare facilmente i contenuti di un sito web.

Pensa ad un foglio di carta millimetrata, dove ogni foglio è composto da un reticolato di linee orizzontali e verticali. Quando queste linee si intersecano, si ottengono spazi rettangolari.

Bene, tutto questo è anche applicabile al sistema a griglia di Bootstrap. Ti consente di creare righe o colonne e di posizionare contenuti all’interno delle aree intersecate.

La questione è, quante linee e colonne puoi creare usando Bootstrap? Puoi creare fino a 12 colonne e un numero illimitato di righe. Continua a leggere per capire come utilizzare il sistema a griglie per creare diversi tipi di layout.

partiamo da zero con il sistema a griglia di Bootstrap

Per partire devi necessariamente aggiungere il framework in pagina. Se sei nuovo di Bootstrap, puoi approfondire a questo link o tramite il mio libro. Analizziamo nel dettaglio tutte le parti che compongono la griglia:

  • 1 container
  • Rows
  • Columns

Creiamo un Container

Il sistema a griglia di Bootstrap necessita di un container per contenere le righe e le colonne. Un container è un semplice elemento div con associata la classe .container. Viene usata per assegnare una width appropriata al layout, come se facesse da wrapper per il contenuto.

Dai un’occhiata alla demo:

See the Pen Bootstrap grid container demo by SitePoint (@SitePoint) on CodePen.

Qui il container wrappa il contenuto e imposta i margini sinistro e destro cambiando il suo valore di width in base al device che stiamo utilizzando. Dai un’occhiata alla seguente tabella:

Device Width Container Width
1200px or higher 1170px
992px to 1199px 970px
768px to 991px 750px
Less than 768px auto

Se non ti convince molto il layout fixed, puoi anche scegliere di utilizzare un container fluido, usando la classe .container-fluid. A questo punto la width corrisponderà alla larghezza del device in uso.

Ricorda che entrambe le varianti, fixed e fluida, hanno 15px di padding per lato.

Creiamo una Row

Una row agisce da wrapper intorno alle colonne. La Row annulla i padding impostati dall’elemento container tramite un margine negativo a destra e sinistra di -15px.

Una row si estende dal bordo sinistro al bordo destro dell’elemento contenitore. Viene creata aggiungendo la classe .row all’elemento di livello blocco contenuto nel container.

Dai un occhiata al seguente Pen:

See the Pen Bootstrap grid demo with row by SitePoint (@SitePoint) on CodePen.

In questa demo puoi notare come il testo tocchi il lato sinistro dell’elemento container. Questo perché il padding del container viene rimosso dalla row a causa dei suoi margini negativi. Non ci sono limiti al numero massimo di row che puoi creare.

Creiamo una Column

In base al device in uso, Bootstrap alterna differenti prefissi nelle classi css associate alle column. Questi prefissi sono elencati nella seguente tabella:

Class Prefix Device Size
.col-xs- <768px
.col-sm- 768px to 991px
.col-md- 992px to 1199px
.col-lg- ≥ 1200px

Quindi creiamo la prima colonna con Bootstrap:

See the Pen Bootstrap Grid demo with row and column by SitePoint (@SitePoint) on CodePen.

Nell’esempio sopra ho usato la classe .col-sx-12 per creare una singola colonna che occupa lo spazio virtuale di 12 colonne di Bootstrap. Quindi la larghezza di questa colonna corrisponde alla larghezza della row.

Sempre nello stesso esempio, sono ricomparsi i 15px di padding che allontanano l’elemento dal container. Questo perché ogni colonna in Bootstrap ha un padding di 15px.

Ti starai chiedendo come mai ho usato un prefisso nella classe css .col-xs- che apparteneva ai device più piccoli. In Bootstrap, se una column è definita per un particolare tipo di device allora anche su dispositivi più grandi è garantito lo stesso comportamento. Pertanto, una colonna definita per dispositivi di più piccole dimensioni, funzionerà in tutti i tipi di dispositivi.

Proviamo ora a creare un layout a 2 colonne per dispositivi più piccoli, e controlliamo il comportamento su risoluzioni inferiori e maggiori. Useremo in questo caso la classe con prefisso .col-sm-. Per creare 2 colonne di eguale larghezza, dovremmo assegnare ad ognuna di loro una width corrispondente a 6 colonne virtuali di Bootstrap così da mantenere il limite massimo di 12 colonne per una singola row.

Di seguito la demo:

See the Pen Bootstrap grid demo, 2 columns by SitePoint (@SitePoint) on CodePen.


Nidificare con il sistema a griglia

Il nesting è un’altra strada per creare complessi layout con il sistema a griglia di Bootstrap ed è anche una tematica dove spesso gli sviluppatori vanno in confusione.

Abbiamo ormai capito che per usare correttamente un sistema a griglia necessitiamo di: un container, rows e columns. Quindi per un sistema a griglia all’interno di una column avremo bisogno delle stesse 3 cose ma con l’unica differenza che il container è già stato definito. In questo caso le column si comporteranno come i container della griglia.

Ecco la logica: Il container fornisce i 15px di padding, che vengono annullati dalle row. Le colonne di contro hanno 15px di padding laterale. Quindi per creare un sistema a griglia all’interno di una colonna, abbiamo bisogno solo di row e column. Non abbiamo bisogno di nessun .container o .container-fluid per creare sistemi a griglie nidificati.

Ecco un esempio:

See the Pen Bootstrap grid demo with nested columns by SitePoint (@SitePoint) on CodePen.


Cosa succede oltre la dodicesima colonna?

Questa è una delle cause principali dei problemi che possono verificarsi con i layout di Bootstrap. Un calcolo sbagliato nel decidere il numero di colonne può portare ad un layout non corretto.

Se per esempio hai definito 2 colonne con le classi .col-md-8 e .col-md-5 (Tot. 13), la seconda colonna verra spostata in una nuova row perché il tutto richiede 5 columns mentre ne rimangono a disposizione solo 4.

Classi di aiuto

Bootstrap fornisce una serie di classi che possono risultare utili quando si lavora con le griglie. Queste classi sono:

.clearfix: Normalmente usata per il clear del float, aggiungi questa classe a qualsiasi column per spostarla in una nuova row automaticamente, per aiutarti a risolvere i problemi che si verificano con le differenti altezze delle column.

Offsetting columns.
Non è necessario occupare tutte le 12 column. Puoi usare le classi di offset come ad esempio .col-xs-offset-* oppure .col-md-offset-* per lasciare un numero definito di colonne alla sinistra di altre colonne.

Reordering: utilizza classi come .col-md-push-* and .col-md-pull-* per lasciare una colonna rispettivamente a destra o a sinistra.

Code Snippet

Per concludere ecco un layout a 3 colonne con navigation bar inclusa. Nota bene che questo layout non mostrerà la terza colonna nell’embed di codepen perché non c’è sufficiente spazio per affiancarne 3. Guarda la demo direttamente in fullscreen.

See the Pen Bootstrap 3-column grid example by SitePoint (@SitePoint) on CodePen.


  • Giorgio Canepa

    ciao Ragazzi,
    boostrap dilemma personale:
    dovrei allineare il container a sinistra ( quello che c’è dentro è perfettamente allineato ) che adesso non riesco a schiodare dal centro,
    ho provato in + modi a sovrascriver i css con float:left; etc. ma nisba, solo casini…
    consigli ?
    grazie
    Gio

    • Stefano Vollono

      Ciao giorgio, usare il container-fluid potrebbe risolvere? Cosi occupa tutto lo spazio e non è centrato. Fammi sapere!

      • Giorgio Canepa

        Ciao Stefano, grazie ma il container-fluid è un po’ troppo largo per quello che devo fare e cmq l’ho già provato e anche quello è sempre troppo al centro, quello che devo riuscire ad ottenere è un container allineato sulla sinistra, ho provato a creare sul mio ‘over.css’ un container con un float-left ma mi incasina tutto compreso il footer ( non ho capito come mai era regolarmente chiuso)… consigli ?

    • fabio

      esempio : …. ne hai usati 9 ma 3 e’ come se non esistessero

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github