Bootstrap 5 Griglia

Bootstrap 5 Sistema di Griglia

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

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

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

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

Assicurati che la somma sia uguale o inferiore a 12 (se non si desidera utilizzare tutti i 12 colonne disponibili).

Classi di griglia

Il sistema di griglia di Bootstrap 5 ha sei classi:

  • .col- (dispositivi ultrapiccoli - larghezza dello schermo inferiore a 576px)
  • .col-sm- (dispositivi piccoli - larghezza dello schermo uguale o maggiore di 576px)
  • .col-md- (dispositivi medi - larghezza dello schermo uguale o maggiore di 768 pixel)
  • .col-lg- (dispositivi grandi - larghezza dello schermo uguale o maggiore di 992 pixel)
  • .col-xl- (dispositivi xlarge - larghezza dello schermo uguale o maggiore di 1200px)
  • .col-xxl- (dispositivi xxlarge - larghezza dello schermo uguale o maggiore di 1400px)

Puoi combinare le classi menzionate sopra per creare layout più dinamici e flessibili.

Suggerimento:Ogni classe è amplificata proporzionalmente, quindi se vuoi creare sm e md Per impostare la stessa larghezza, è sufficiente 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 visualizzano sui 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>
<!-- Lascia che Bootstrap gestisca automaticamente la layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

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

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

Di seguito, abbiamo raccolto alcuni esempi di base di layout di griglia Bootstrap 5.

Colonne divise in tre parti

L'esempio seguente mostra come creare tre colonne uguali su tutti i dispositivi e larghezze di schermo:

Esempio

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

Prova tu stesso

Colonne responsive

L'esempio seguente mostra come creare quattro colonne uguali partendo da tablet e espandersi a grandi桌面上.Sui telefoni o schermi con larghezza inferiore a 576px, le colonne si ripiegano automaticamente insieme:

Esempio

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

Prova tu stesso

Due colonne responsive diverse

L'esempio seguente mostra come ottenere due colonne di diverse larghezze su tablet e espandersi a grandi桌面上：

Esempio

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

Prova tu stesso

Suggerimento:Imparerai più avanti in questo tutorial Sistema di griglia Più contenuti.