Impara il sistema Bootstrap 4 Grid in 10 minuti

Il sistema Bootstrap 4 Grid viene utilizzato per layout reattivi.

Un layout reattivo rappresenta il modo in cui gli elementi si allineano nella pagina a diverse risoluzioni. È importante che tu capisca come utilizzare la griglia prima di conoscere qualsiasi altro componente di Bootstrap 4, perché qualunque elemento tu usi, dovrai posizionarlo da qualche parte sullo schermo.

Iniziamo!

Sommario

  • Contenitori Bootstrap 4
  • Bootstrap 4 righe
  • Bootstrap 4 colonne
  • Ulteriori letture

La griglia Bootstrap 4 è composta da contenitori, righe e colonne. Li prenderemo uno per uno e li spiegheremo.

Contenitori Bootstrap 4

Un contenitore Bootstrap 4 è un elemento con la classe .container. Il contenitore è la radice del sistema a griglia Bootstrap 4 e viene utilizzato per controllare la larghezza del layout.

Il contenitore Bootstrap 4 contiene tutti gli elementi in una pagina. Ciò significa che la tua pagina dovrebbe avere la seguente struttura: prima il corpo della pagina HTML, al suo interno dovresti aggiungere il contenitore e tutti gli altri elementi all'interno del contenitore.

 ... 

La .containerclasse semplice imposta la larghezza del layout a seconda della larghezza dello schermo. Posiziona il contenuto al centro della pagina allineandolo orizzontalmente. C'è lo stesso spazio tra il contenitore Bootstrap 4 e il bordo sinistro e destro della pagina.

La .containerlarghezza si riduce man mano che la larghezza dello schermo si restringe e diventa a tutta larghezza sui dispositivi mobili. La larghezza del contenitore è definita all'interno della libreria Bootstrap 4 per ogni dimensione dello schermo. Puoi vedere le dimensioni esatte qui.

Un contenitore a larghezza intera occupa il 100% delle dimensioni dello schermo indipendentemente dalla larghezza dello schermo. Per usarlo è necessario aggiungere la classe. container-fluid.

 Hello! I am in a simple container. Hello! I am in a full-width container. 

Puoi visualizzare CodePen qui.

Per vedere le differenze tra i due tipi di contenitori, puoi aprire la penna nella tua console e passare da una dimensione dello schermo all'altra.

Bootstrap 4 righe

Bootstrap 4 righe sono sezioni orizzontali dello schermo. Sono usati solo come wrapper per le colonne. Per usarli, hai bisogno della .rowclasse.

 ... 

Ecco le cose più importanti che devi ricordare sulle righe di Bootstrap 4:

  • Sono usati solo per contenere colonne. Se inserisci altri elementi all'interno della riga insieme alle colonne, non otterrai il risultato atteso.
  • Devono essere posti in contenitori. Se non lo fai, otterrai uno scorrimento orizzontale sulla tua pagina. Ciò accade perché le righe hanno margini sinistro e destro negativi di 15. Il contenitore ha una spaziatura interna di 15 px, quindi contrasta i margini.
  • Le colonne devono essere figli della riga. Altrimenti non si allineeranno. Le righe e le colonne vengono create per lavorare insieme in questa rigida gerarchia.

Bootstrap 4 colonne

Ora possiamo arrivare alla bella parte di questo tutorial, le colonne Bootstrap 4. Le colonne sono fantastiche! Ti aiutano a dividere lo schermo orizzontalmente.

Se inserisci una singola colonna nella riga, occuperà tutta la larghezza. Se aggiungi due colonne, ciascuna prenderà la metà della larghezza. E così vale per qualsiasi numero di colonne.

 ... ... ... ... ... ... ... ... 

Puoi vedere il codice dal vivo su CodePen.

Nota a margine : le colonne non sono colorate. Ho appena aggiunto i colori per una descrizione visivamente accattivante / in modo che siano belli.

Impostazione delle dimensioni per le colonne

L'utilizzo della .colclasse imposta dinamicamente la larghezza della colonna. Ciò significa che, a seconda del numero di colonne in una riga, la larghezza di una colonna sarà la larghezza del contenitore divisa per il numero di colonne.

Ma c'è un altro modo per definire le colonne. È possibile utilizzare classi per le colonne e definirne le dimensioni.

Per impostazione predefinita, la griglia Bootstrap 4 è composta da 12 colonne. Puoi selezionare qualsiasi dimensione da 1 a 12 per la tua colonna. Se vuoi 3 colonne uguali, puoi usare .col-4per ognuna (perché 3 * 4 colonne = 12). Oppure puoi impostare dimensioni diverse per loro. Ecco alcuni esempi:

 ... ... ... ... ... ... ... ... 

Puoi vedere il codice dal vivo su CodePen.

Se la somma delle colonne nella riga non arriva a 12, non riempiono l'intera riga. Se la somma delle colonne supera 12, si sposterà alla riga successiva. La prima riga mostrerà solo i primi elementi che si sommano fino a 12 o meno.

Impostazione dei punti di interruzione per le colonne

Se prendi l'esempio sopra e desideri visualizzarlo su un dispositivo mobile, potresti incontrare alcuni problemi. La visualizzazione di cinque colonne sul dispositivo mobile renderà il contenuto illeggibile.

È qui che entra in gioco uno dei componenti più potenti di Bootstrap 4. Per avere layout diversi su schermi diversi non è necessario scrivere query multimediali, ma è possibile utilizzare i punti di interruzione della colonna.

Un punto di interruzione è una variabile Bootstrap 4 che sta per una risoluzione dello schermo. Quando si specifica un punto di interruzione per una classe, si dice alla classe di essere attiva solo per risoluzioni grandi almeno quanto il numero contenuto nel punto di interruzione.

La classe più semplice che impareremo è la .col-[breakpoint]classe. Quando si utilizza questa classe, si definisce il comportamento delle colonne solo quando vengono visualizzate su dispositivi che hanno una risoluzione almeno pari al punto di interruzione definito. Fino al punto di interruzione specificato, le colonne verranno allineate verticalmente per impostazione predefinita. E dopo il punto di interruzione, si allineeranno orizzontalmente a causa della classe.

Bootstrap ha 4 punti di interruzione che puoi utilizzare:

  • .col-sm per telefoni cellulari più grandi (dispositivi con risoluzioni ≥ 576px);
  • .col-md per tablet (≥768px);
  • .col-lg per laptop (≥992px);
  • .col-xl per desktop (≥1200 px)

Supponiamo che tu voglia visualizzare due colonne una dopo l'altra verticalmente su schermi piccoli e sulla stessa riga su schermi più grandi. Sarà necessario specificare il punto di interruzione in cui le colonne vanno sulla stessa riga.

Nel nostro esempio useremo il .col-lgpunto di interruzione e vedremo come appaiono le colonne su schermi diversi. Per risoluzioni inferiori al punto di interruzione specificato (<992 px) le colonne verranno visualizzate verticalmente. Ciò significa che su dispositivi mobili e tablet, le colonne avranno questo aspetto:

E per i dispositivi che hanno una risoluzione maggiore o uguale al punto di interruzione (≥992 px) le colonne andranno sulla stessa riga. Ciò significa che su laptop e desktop otterrai questo risultato:

 ... ... 

Puoi vedere il codice dal vivo su CodePen.Se apri il Codepen in un'altra finestra e vedi la pagina a diverse risoluzioni, vedrai le colonne cambiare il loro posizionamento.

Se si desidera che le 2 colonne vadano sulla stessa riga a partire dai telefoni cellulari più grandi che usereste .col-sm, per i tablet .col-mde per gli schermi extra large .col-xl.

Impostazione delle dimensioni e dei punti di interruzione per le colonne

È possibile combinare le dimensioni e i punti di interruzione e utilizzare un'unica classe con il formato .col-[breakpoint]-[size].

Ad esempio, se desideri allineare tre colonne di dimensioni diverse su una riga che inizia con la risoluzione del laptop, devi farlo:

 ... ... ... 

Otterrai questo risultato con risoluzioni <992px:

E per gli schermi che sono ≥992 px:

Di nuovo, puoi vedere il codice dal vivo su CodePen.

Ma cosa succede se si desidera visualizzare una colonna per riga su piccole risoluzioni mobili, due colonne per riga su tablet e quattro su laptop o dispositivi con risoluzioni più elevate?

Quindi aggiungi più classi per una singola colonna per descrivere il comportamento per ogni risoluzione. Utilizzando più classi, specifichi che il contenuto occuperà sei slot su tablet e tre su laptop.

 ... ... ... ... 

Il risultato verrà visualizzato in questo modo sui tablet:

E in questo modo su laptop e risoluzioni più elevate:

Questo esempio è anche in diretta su CodePen.

Come esercizio, puoi provare a creare righe con un numero diverso di colonne a seconda delle dimensioni dello schermo e verificare il comportamento nella console del browser.

Colonne di offset

Se non desideri che le colonne siano una accanto all'altra, puoi utilizzare la classe .offset-[breakpoint]-[size]insieme al file .col-[breakpoint]-[size].

Utilizzare questa classe equivale ad aggiungere una colonna vuota prima della colonna. Qui c'è un semplice esempio:

 ... ... 

Puoi vedere il codice dal vivo su CodePen.

Puoi usare la classe su qualsiasi colonna della riga. Ecco alcuni altri esempi:

 ... ... ... ... ... 

Colonne annidate

Potrebbe essere una sorpresa, ma puoi aggiungere una riga all'interno di una colonna!

La riga in questione (che avrà la larghezza della sua colonna padre) verrà quindi divisa in 12 colonne (più piccole) a cui puoi fare riferimento attraverso le .col-* classi.

Diamo un'occhiata a cosa succede quando inseriamo una nuova riga all'interno di una colonna:

 ... ... ... ... 

Puoi vedere il codice dal vivo su CodePen.

Sapendo questo, puoi andare in profondità di molti livelli per organizzare le tue informazioni. Le colonne forniranno un modo semplice per gestire il tuo spazio.

Questo racchiude le conoscenze di base relative al sistema di griglia reattivo Bootstrap 4. Se hai domande fammelo sapere nei commenti, sarò lieto di risponderti.

Ulteriori letture

Se hai più tempo, ecco alcune risorse utili:

  • Documentazione ufficiale sulla griglia di GetBootstrap
  • Tutorial video di Scrimba

Questo articolo è stato inizialmente pubblicato sul blog BootstrapBay. Fa parte di una serie più ampia di tutorial Bootstrap 4 chiamata 14 Days of Bootstrap 4. Se vuoi continuare a conoscere i componenti di Bootstrap 4, questi articoli sono un buon punto di partenza.

E se vuoi iniziare il tuo sviluppo con un modello Bootstrap, puoi controllare il nostro marketplace.

Ma prima di approfondire, prenditi un momento per celebrare le tue nuove abilità acquisite !?