TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come utilizzare i layout di griglia Bootstrap 5?

6

Bootstrap 5 offre un potente sistema di layout della griglia che aiuta a creare facilmente layout ottimizzati per i dispositivi mobili. Ci sono sei punti di interruzione reattivi per diverse dimensioni di dispositivi nel sistema di layout della griglia Bootstrap. Ci sono 12 colonne in ciascuna e mescolando e abbinando, puoi creare diversi layout che desideri. Il sistema a griglia è basato su flex box ed è completamente reattivo.

Tutorial sul layout della griglia Bootstrap 5

Questo tutorial contiene i seguenti argomenti:

  1. Nozioni di base sul layout della griglia
  2. Sistema di griglia di livello 5
  3. Griglia semplice di uguale larghezza
  4. Larghezza di una colonna e ridimensionare altre colonne
  5. Contenuto a larghezza variabile
  6. Griglia a più righe di uguale larghezza
  7. Griglia orizzontale impilata
  8. Allineamento verticale
  9. Allineamento orizzontale
  10. Griglia senza grondaie
  11. Griglia di colonne avvolte
  12. Riordino del contenuto delle colonne all’interno di Grid
  13. Compensazione colonna
  14. Nidificazione all’interno di Grid

1 Nozioni di base sul sistema di griglia Bootstrap

Il sistema a griglia utilizza tre classi CSS principali per creare il layout necessario: .container, .row e .col. Il contenitore copre il layout completo e poi le righe e poi le colonne.

  • Usa la classe .container per centrare il contenuto con una larghezza fissa e .container-fluid per un layout reattivo a tutta larghezza.
  • Puoi usare la classe .row per includere tutte le colonne orizzontali divise in 12 di uguale larghezza.
  • Posiziona il contenuto effettivo all’interno delle colonne utilizzando le classi .col o .col-*. Ad esempio, una riga può contenere due colonne come .col-8 + .col-4. La colonna dovrebbe essere il figlio immediato della classe di riga.
  • Tutte le colonne utilizzano flexbox, il che significa che l’uso semplice della classe .col dividerà la riga in colonne di uguale larghezza. Ad esempio, quando utilizzi due classi .col all’interno di una riga, verrà automaticamente suddiviso in due aree al 50%.
  • Puoi definire esplicitamente la larghezza della colonna come .col-sm-8 che occuperà 3/4 (75%) della larghezza della riga.
  • Per impostazione predefinita, le colonne e le righe hanno riempimento e margine per una migliore visibilità. Puoi rimuovere il margine e il riempimento aggiungendo un’ulteriore classe ".noglutter" con ".row".
  • Bootstrap 5 offre sei punti di interruzione: extra small (xs), small (sm), medium (md), large (lg), extra large (xl) ed extra extra large (xxl).
  • Tutti i livelli di punti di interruzione per impostazione predefinita utilizzano la classe .col. Eventuali altre classi utilizzate verranno applicate a tutti i dispositivi di livello superiore. Ad esempio, .col-sm-4 (piccolo) verrà applicato a dispositivi piccoli, medi, grandi ed extra grandi.

Sistema di rete a 2 livelli 6

La tabella seguente mostra i sei livelli di punti di interruzione offerti in Bootstrap 5:

Griglia Piccolissimo Piccolo medio Grande Extra grande Extra Extra Large
Punto di rottura <576px ≥576 px ≥768px ≥992px ≥1200 px ≥1400 px
Classe CSS .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Larghezza massima contenitore None (auto) 540 px 720px 960 px 1140 px 1320px
  • Colonne: ogni riga è divisa in 12 colonne di uguale larghezza.
  • Larghezza grondaia: 15 pixel su ciascun lato della colonna per un totale di 30 px.
  • Annidamento: sì, le colonne possono essere nidificate all’interno di altre colonne.
  • Ordinamento delle colonne: sì, il contenuto all’interno di qualsiasi colonna all’interno di una riga può essere riordinato.

Mostriamo diversi esempi per capire meglio le griglie:

3 Griglia semplice di uguale larghezza

Crea una griglia semplice con colonne uguali semplicemente usando le classi ".col". Quando si utilizzano le classi ".col", la riga verrà automaticamente divisa in colonne di uguale larghezza. Ad esempio, quando si utilizzano due classi ".col", la riga verrà divisa in due colonne 1/2+1/2. Di seguito è riportato un esempio di codici per creare colonne 1/2+1/2 e 1/3+1/3+1/3 utilizzando semplici classi ".col".

<div class="container"> <div class="row"> <div class="col"> .col </div> <div class="col"> .col </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col"> .col </div> <div class="col"> .col </div> </div> </div>

Le colonne uguali verranno mostrate sul browser come di seguito:

Come utilizzare i layout di griglia Bootstrap 5?

4 Larghezza di una colonna e ridimensionare altre colonne

Il sistema a griglia Bootstrap ti consente di definire la larghezza per una colonna e le colonne rimanenti all’interno della stessa riga verranno regolate automaticamente. Ad esempio, quando definisci "col + col-6 + col" in una riga, verrà automaticamente diviso come colonne "1/3+1/6+1/3". Di seguito sono riportati due esempi per definire una colonna, quindi le altre due colonne rimanenti verranno regolate di conseguenza.

Come utilizzare i layout di griglia Bootstrap 5?

Di seguito è riportato il codice per la regolazione delle colonne che circondano la colonna con la larghezza definita:

<div class="container"> <div class="row"> <div class="col"> .col </div> <div class="col-6"> .col-6 </div> <div class="col"> .col </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col-5"> .col-5 </div> <div class="col"> .col </div> </div> </div>

5 Contenuto a larghezza variabile

La larghezza delle colonne può essere limitata al contenuto effettivo utilizzando la classe ".col-{breakpoint}-auto", ad esempio ".col-md-auto".

Come utilizzare i layout di griglia Bootstrap 5?

Le colonne centrali nell’esempio sopra vengono adattate automaticamente alla larghezza del contenuto. Di seguito è riportato il codice per il layout della griglia sopra:

<div class="container"> <div class="row justify-content-md-center"> <div class="col col-lg-2"> .col .col-lg-2 </div> <div class="col-md-auto"> .col-md-auto (variable width) </div> <div class="col col-lg-2"> .col .col-lg-2 </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col-md-auto"> .col-md-auto (variable width) </div> <div class="col col-lg-2"> .col .col-lg-2 </div> </div> </div>

Griglia a 6 righe di uguale larghezza

Crea semplicemente un layout a più colonne all’interno di una riga utilizzando continuamente le classi ".col". Hai solo bisogno di inserire la classe ".w-100" dove è richiesto un punto di interruzione.

Come utilizzare i layout di griglia Bootstrap 5?

Di seguito è riportato il codice per creare righe multiple di uguale larghezza utilizzando una singola classe "riga".

<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="w-100"></div> <div class="col">.col</div> <div class="col">.col</div> <div class="w-100"></div> <div class="col">.col</div> <div class="col">.col</div> </div>

7 Griglia Orizzontale Impilata

Puoi creare un layout di griglia impilato usando le classi ".col-sm-" che verranno espanse alla griglia orizzontale sul desktop.

Come utilizzare i layout di griglia Bootstrap 5?

Di seguito è riportato il codice per la creazione di un layout di griglia orizzontale impilato come mostrato sopra.

<div class="row"> <div class="col-sm-8">.col-sm-8</div> <div class="col-sm-4">.col-sm-4</div> </div> <div class="row"> <div class="col-sm">.col-sm</div> <div class="col-sm">.col-sm</div> <div class="col-sm">.col-sm</div> </div>

8 Allineamento verticale

L’allineamento verticale del contenuto all’interno di una colonna può essere regolato aggiungendo una delle seguenti tre classi con la classe ".row" come di seguito:

<div class="row align-items-start"> - Align content vertical top <div class="row align-items-center"> - Align content vertical middle <div class="row align-items-end"> - Align content vertical bottom

9 Allineamento orizzontale

Simile all’allineamento verticale, puoi anche regolare l’allineamento orizzontale delle colonne come di seguito:

<div class="container"> <div class="row justify-content-start"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-center"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-end"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-around"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-between"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> </div>

Questo produrrà il seguente risultato sul browser:

Come utilizzare i layout di griglia Bootstrap 5?

10 griglia senza grondaie

Per impostazione predefinita, le colonne avranno un riempimento orizzontale e le righe avranno margini orizzontali negativi per un migliore allineamento. Puoi rimuovere quei margini e padding utilizzando la classe "no-gutters" con "row" come mostrato di seguito.

<div class="row no-gutters"> <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div>

Produrrà il seguente risultato:

Come utilizzare i layout di griglia Bootstrap 5?

11 Griglia a colonne avvolte

Quando hai più di 12 colonne in una riga, le colonne verranno automaticamente spostate alla riga successiva. Ad esempio, con le prime due colonne sottostanti si adatteranno alla prima riga (9 + 2 = 11) mentre la terza e la quarta colonna verranno racchiuse in una nuova riga.

<div class="row"> <div class="col-9">.col-9 (Row 1)</div> <div class="col-2">.col-2 (Row 1)</div> <div class="col-4">.col-4 (Row 1)</div> <div class="col-5">.col-5 (Row 1)</div> </div>

Le colonne avvolte appariranno come di seguito:

Come utilizzare i layout di griglia Bootstrap 5?

Riordino del contenuto di 12 colonne all’interno di Grid

Bootstrap consente di riordinare il contenuto di una colonna indipendentemente dalla posizione in una riga. Ad esempio, ci sono tre colonne utilizzate nel layout della griglia sottostante.

<div class="container"> <div class="row"> <div class="col"> First .col No order </div> <div class="col order-12"> Second .col .order-12 moved to last </div> <div class="col order-1"> Third .col .order-1 moved to first </div> </div> </div>

Il risultato appare come di seguito senza colonne ordinate avrà la precedenza su tutte le altre colonne ordinate e verrà mostrato nella prima colonna. Il contenuto all’interno della colonna che utilizza la classe "order-12" verrà spostato nell’ultima posizione. E il contenuto all’interno della colonna che utilizza "ordine-1" verrà spostato nella posizione centrale (prima).

Come utilizzare i layout di griglia Bootstrap 5?

Compensazione di 13 colonne

Da Bootstrap 4, hanno abbandonato la funzione di compensazione delle colonne a causa dell’uso del layout della griglia flexbox. Ma puoi ancora spostare le colonne usando le classi di utilità del margine come "ml-auto", "mr-auto", ecc.

<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div> </div> <div class="row"> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> </div> <div class="row"> <div class="col-auto mr-auto">.col-auto .mr-auto</div> <div class="col-auto">.col-auto</div> </div>

Di seguito è riportato il risultato della compensazione della colonna utilizzando le classi di margine:

Come utilizzare i layout di griglia Bootstrap 5?

14 Annidamento all’interno della griglia

Puoi anche nidificare le colonne all’interno di altre colonne come mostrato di seguito:

<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-8 col-sm-6"> Level 2: .col-8 .col-sm-6 </div> <div class="col-4 col-sm-6"> Level 2: .col-4 .col-sm-6 </div> </div> </div> </div>

Produrrà il seguente risultato:

Come utilizzare i layout di griglia Bootstrap 5?

Conclusione

Come puoi vedere, ci sono molti layout predefiniti che puoi creare con il sistema di layout della griglia Bootstrap 5. È anche possibile creare CSS personalizzati per creare layout personalizzati o modificare uno dei layout predefiniti. Il solido layout della griglia flexbox e i componenti riutilizzabili rendono Bootstrap 5 più forte della versione precedente.


Impara Bootstrap 5 (Indice )


Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More