Esempio di Griglia Bootstrap 5
- Pagina precedente Griglia BS5 XXL
- Pagina successiva Modello di base BS5
Di seguito abbiamo raccolto alcuni esempi di layout a griglia di Bootstrap 5.
Tre colonne divise in parti uguali
Usa su un numero specifico di elementi .col Le classi, Bootstrap riconoscerà il numero di elementi (e creerà colonne di larghezza uguale). Nell'esempio seguente, abbiamo usato tre elementi col, ciascuno con una larghezza del 33.33%.
Esempio
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
Tre colonne uguali utilizzando numeri
Puoi anche usare numeri per controllare la larghezza delle colonne. Assicurati solo che la somma sia uguale o inferiore a 12 (non è necessario utilizzare tutte le 12 colonne disponibili):
Esempio
<div class="row"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div>
Tre colonne diverse
Per creare colonne diverse, devi usare numeri. Esempio: creerà una divisione del 25%/50%/25%:
Esempio
<div class="row"> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> </div>
Impostare la larghezza di una colonna
Tuttavia, è sufficiente impostare la larghezza di una colonna e lasciare che le colonne vicine si adattino automaticamente. Esempio: creerà una divisione del 25%/50%/25%:
Esempio
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
Più colonne uguali
Esempio
<!-- Due colonne uguali --> <div class="row"> <div class="col">1 di 2</div> <div class="col">2 di 2</div> </div> <!-- Quattro colonne uguali --> <div class="row"> <div class="col">1 di 4</div> <div class="col">2 di 4</div> <div class="col">3 di 4</div> <div class="col">4 di 4</div> </div> <!-- Sei colonne uguali --> <div class="row"> <div class="col">1 di 6</div> <div class="col">2 di 6</div> <div class="col">3 di 6</div> <div class="col">4 di 6</div> <div class="col">5 di 6</div> <div class="col">6 di 6</div> </div>
Row Cols
Puoi anche usare .row-cols-* Il numero di colonne controllate dovrebbe apparire accanto l'uno all'altro (indipendentemente dal numero di colonne):
Esempio
<div class="row row-cols-1"> <div class="col">1 di 2</div> <div class="col">2 di 2</div> </div> <div class="row row-cols-2"> <div class="col">1 di 4</div> <div class="col">2 di 4</div> <div class="col">3 di 4</div> <div class="col">4 di 4</div> </div> <div class="row row-cols-3"> <div class="col">1 di 6</div> <div class="col">2 di 6</div> <div class="col">3 di 6</div> <div class="col">4 di 6</div> <div class="col">5 di 6</div> <div class="col">6 di 6</div> </div>
Più colonne diverse
Esempio
<!-- Due colonne diverse --> <div class="row"> <div class="col-8">1 di 2</div> <div class="col-4">2 di 2</div> </div> <!-- Quattro colonne diverse --> <div class="row"> <div class="col-2">1 di 4</div> <div class="col-2">2 di 4</div> <div class="col-2">3 di 4</div> <div class="col-6">4 di 4</div> </div> <!-- Impostazione delle larghezze delle due colonne --> <div class="row"> <div class="col-4">1 di 4</div> <div class="col-6">2 di 4</div> <div class="col">3 di 4</div> <div class="col">4 di 4</div> </div>
Altezza uguale
Se una colonna è più alta dell'altra (per testo o altezza CSS), le altre seguiranno:
Esempio
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
Colonne annidate
Esempio di come creare una layout a due colonne, una delle quali contiene altre due colonne:
Esempio
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
Classi responsive
Il sistema di griglia di Bootstrap 5 ha cinque classi:
.col-(dispositivi ultra piccoli - 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)
Le classi sopra elencate possono essere combinate per creare layout più dinamici e flessibili.
Suggerimento:Ogni classe viene ingrandita proporzionalmente, quindi se si desidera sm e md Se si desidera impostare la stessa larghezza, è sufficiente specificare sm。
Sovrapponimento orizzontale
Esempio di come creare una layout di colonne, che inizialmente si sovrappone sui dispositivi di piccolo formato e poi diventa una layout orizzontale sui dispositivi di grandi dimensioni (sm, md, lg e xl):
Esempio
<div class="row"> <div class="col-sm-9">col-sm-9</div> <div class="col-sm-3">col-sm-3</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>
Mix e Match
Esempio
<!-- Sulla piccolissima, 50%/50% di divisione, sulla grande, 75%/25% di divisione --> <div class="row"> <div class="col-6 col-sm-9">col-6 col-sm-9</div> <div class="col-6 col-sm-3">col-6 col-sm-3</div> </div> <!-- Sulla piccolissima, piccola, media, 58%/42% di divisione, sulla grande e ultra grande, 66.3%/33.3% di divisione --> <div class="row"> <div class="col-7 col-lg-8">col-7 col-lg-8</div> <div class="col-5 col-lg-4">col-5 col-lg-4</div> </div> <!-- Sulla piccola, 25%/75% di divisione, sulla media, 50%/50% di divisione, sulla grande e ultra grande, 33%/66% di divisione. Sulla piccolissima, verrà riposta automaticamente (100%) --> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div> <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div> </div>
nessuna cucitura
Per modificare lo spazio tra le colonne (spazio aggiuntivo), utilizzare qualsiasi .g-1|2|3|4|5 Classe (.g-4 è il valore predefinito).
Per rimuovere completamente la cucitura (gutter), utilizzare .g-0：
Esempio
<div class="row g-0">
- Pagina precedente Griglia BS5 XXL
- Pagina successiva Modello di base BS5
