Bootstrap 5 Sistema di Griglia

Sistema di griglia

Il sistema di griglia di Bootstrap è costruito con flexbox, permettendo al massimo 12 colonne sulla pagina.

Se non si desidera utilizzare singolarmente tutte le 12 colonne, è possibile combinare queste colonne per creare colonne più larghe:

Il sistema di griglia risponde rapidamente, le colonne si rimpiazzano automaticamente in base alla dimensione dello schermo.

Assicurati che la somma sia uguale o inferiore a 12 (non è necessario utilizzare tutti i 12 colonne disponibili).

Classi di griglia

Il sistema di griglia di Bootstrap 5 fornisce sei classi:

  • .col- (Dispositivi di ultra-piccolo formato - larghezza dello schermo inferiore a 576px)
  • .col-sm- (Dispositivi di piccolo formato - larghezza dello schermo uguale o superiore a 576px)
  • .col-md- (Dispositivi di medio formato - larghezza dello schermo uguale o superiore a 768px)
  • .col-lg- (Dispositivi di grande formato - larghezza dello schermo uguale o superiore a 992px)
  • .col-xl- (Dispositivi di ultra-grande formato - larghezza dello schermo uguale o superiore a 1200px)
  • .col-xxl- (Dispositivi di grande formato - larghezza dello schermo uguale o superiore a 1400px)

Combinando queste classi, è possibile creare layout più dinamici e flessibili.

Suggerimento:Ogni classe è amplificata proporzionalmente, quindi se vuoi impostare la stessa larghezza per sm e md, devi solo specificare sm.

Struttura di base della griglia di Bootstrap 5

Ecco la struttura di base della griglia di Bootstrap 5:

<!-- Controlla la larghezza delle colonne e come si comportano su diversi dispositivi -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<!-- O lascia che Bootstrap gestisca automaticamente la布局 -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Prova tu stesso

Primo esempio: crea una riga (<div class = "row">). Poi, aggiungi il numero di colonne necessarie (con .col-*-* etichetta della classe). La prima stella (*) rappresenta la risposta: sm, md, lg, xl o xxl, mentre la seconda stella rappresenta un numero, che sommando in ogni riga dovrebbe essere 12.

Secondo esempio: non dare a ogni col Aggiungi un numero, ma lascia che bootstrap gestisca la布局 per creare colonne uguali: due "col" Elemento = larghezza del 50% di ogni colonna, mentre tre colonne = larghezza del 33.33% di ogni colonna. Quattro colonne = larghezza del 25% ecc. Puoi anche usare .col-sm|md|lg|xl|xxl Rende le colonne responsive.

Opzioni di griglia

La tabella seguente riassume come il sistema di griglia di Bootstrap 5 funziona su diverse dimensioni di schermo:

Ultra-small (<576px) Small (>=576px) Medium (>=768px) Large (>=992px) Super-large (>=1200px) Extra-large (>=1400px)
Prefisso della classe .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Comportamento della griglia Sempre orizzontale Piega iniziale, orizzontale sopra il punto di interruzione Piega iniziale, orizzontale sopra il punto di interruzione Piega iniziale, orizzontale sopra il punto di interruzione Piega iniziale, orizzontale sopra il punto di interruzione Piega iniziale, orizzontale sopra il punto di interruzione
Larghezza del contenitore Nessuno (auto) 540px 720px 960px 1140px 1320px
Adatto a Schermo verticale dello smartphone Schermo orizzontale dello smartphone Tablet Portatile Portatile e computer da scrivania Portatile e computer da scrivania
Numero della colonna # 12 12 12 12 12 12
Larghezza della gocciolata 1.5rem (sul lato di ogni colonna .75rem) 1.5rem (sul lato di ogni colonna .75rem) 1.5rem (sul lato di ogni colonna .75rem) 1.5rem (sul lato di ogni colonna .75rem) 1.5rem (sul lato di ogni colonna .75rem) 1.5rem (sul lato di ogni colonna .75rem)
Nested Sì Sì Sì Sì Sì Sì
Offset Sì Sì Sì Sì Sì Sì
Ordinamento delle colonne Sì Sì Sì Sì Sì Sì