English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Il sistema di griglia di Bootstrap è il metodo più veloce e più semplice per creare layout di pagina reattivi.
Bootstrap fornisce un sistema di griglia fluida e reattivo, con priorità per i dispositivi mobili, che si divide automaticamente in fino a 12 colonne man mano che la dimensione dello schermo o della finestra di visualizzazione (viewport) aumenta.
Possiamo anche definire il numero di colonne secondo le nostre esigenze:
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 4 | 4 | 4 | |||||||||
| 4 | 8 | ||||||||||
| 6 | 6 | ||||||||||
| 12 | |||||||||||
Il sistema di griglia di Bootstrap 4 è reattivo, le colonne si riorganizzano automaticamente in base alla dimensione dello schermo.
Bootstrap 4 include classi di griglia predefinite, che possono creare rapidamente layout di griglia per dispositivi di diversi tipi (ad esempio, telefoni cellulari, tablet, laptop e computer desktop, ecc.). Ad esempio, è possibile utilizzare queste classi .col-* per creare colonne di griglia per dispositivi ultra-piccoli in modalità verticale, allo stesso modo, è possibile utilizzare queste classi .col-sm-* per dispositivi a schermo piccolo (ad esempio, telefoni cellulari in modalità orizzontale), .col-md-* per dispositivi a schermo medio (ad esempio, tablet), .col-lg-* per dispositivi grandi (ad esempio, computer desktop) e .col-xl-* per schermi di grandi dimensioni di computer desktop per creare colonne di griglia.
Il sistema di griglia di Bootstrap 4 ha le seguenti 5 classi:
.col- per tutti i dispositivi
.col-sm- per tablet - larghezza di schermo uguale o maggiore di 576px
.col-md- per schermi desktop - larghezza di schermo uguale o maggiore di 768px)
.col-lg- per schermi desktop grandi - larghezza di schermo uguale o maggiore di 992px)
.col-xl- per schermi desktop extra grandi - larghezza di schermo uguale o maggiore di 1200px)
Regole del sistema di griglia Bootstrap4:
Ogni riga di griglia deve essere collocata all'interno di un contenitore con la classe .container (larghezza fissa) o .container-fluid (larghezza a schermo), in modo che vengano impostati automaticamente alcuni margini esterni e interni.
Le righe vengono utilizzate per creare gruppi di colonne orizzontali.
Il contenuto deve essere posizionato all'interno delle colonne e solo le colonne possono essere nodi diretti della riga.
Le classi predefinite come .row e .col-sm-4 possono essere utilizzate per creare rapidamente layout di griglia.
Le colonne vengono create riempendo lo spazio tra il contenuto delle colonne. Questo spazio è impostato tramite il margine negativo della prima riga e dell'ultima colonna sulla classe .rows.
Le griglie di rete vengono create superando 12 colonne specificateAd esempio, per impostare tre colonne uguali, è necessario utilizzare tre .col-sm-4.
La differenza principale tra Bootstrap 3 e Bootstrap 4 è che Bootstrap 4 utilizza flexbox (scatola flessibile) invece di float. Un grande vantaggio di Flexbox è che le griglie senza specificare la larghezza vengono impostate automaticamente comeColonne allineate e altezza uguale Se desideri ulteriori informazioni su Flexbox, puoi leggere la nostra guida CSS Flexbox.
La seguente tabella riassume come il sistema di griglia di Bootstrap funziona su diversi dispositivi:
| Dispositivi ultrapiccoli <576px | Tablet ≥576px | Schermi desktop ≥768px | Schermi desktop grandi ≥992px | Schermi desktop extra grandi ≥1200px | |
|---|---|---|---|---|---|
| Larghezza massima del contenitore | Nessuno (auto) | 540px | 720px | 960px | 1140px |
| Prefisso della classe | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| Numero di colonne e | 12 | ||||
| Larghezza delle interruzioni | 30px (ogni lato di una colonna è di 15px) | ||||
| Imbottigliabile | Sì | ||||
| Ordinamento delle colonne | Sì | ||||
Queste classi possono essere utilizzate insieme per creare una layout di pagina più flessibile.
Il seguente codice rappresenta la struttura di base della griglia di Bootstrap 4:
<!-- Primo esempio: Controlla la larghezza delle colonne e come si visualizzano sui diversi dispositivi --> <div class="row"> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <!-- Secondo esempio: O lascia Bootstrap gestire 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">) Aggiungi i colonne necessarie (.col-*-* Imposta nel tipo di classe). Il primo asterisco (*) Rappresenta il dispositivo di risposta: sm, md, lg o xl, il secondo asterisco (*) rappresenta un numero, i numeri della stessa riga sommati devono essere 12.
Secondo esempio: Non aggiungere in ogni col Aggiungi numeri, Bootstrap gestisce automaticamente la layout, la larghezza di ogni colonna della stessa riga è uguale: due "col" Ogni una è larga il 50%, tre "col"Ogni una è larga il 33.33%, quattro "col"Ogni una è larga il 25%, ecco come. Allo stesso modo, puoi usare .col-sm|md|lg|xl Impostiamo le regole di risposta delle colonne.
Guardiamo ora un esempio.
<!DOCTYPE html> <html> <head> <title>Esempio Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Hello World!</h1> <p>Crea tre colonne di larghezza uguale! Prova ad aggiungere un nuovo div con class="col" all'interno del div con class="row", verranno visualizzate quattro colonne di larghezza uguale.</p> <div class="row"> <div class="col" style="background-color:lavender;">.col</div> <div class="col" style="background-color:orange;">.col</div> <div class="col" style="background-color:lavender;">.col</div> </div> </div> </body> </html>Testa e vedi ‹/›
Esempio seguente dimostra come creare colonne responsive di larghezza uguale su tablet e schermi più grandi. Sul dispositivo mobile, ossia quando la larghezza dello schermo è inferiore a 576px, le quattro colonne si impilano verticalmente:
<!DOCTYPE html> <html> <head> <title>Esempio Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Hello World!</h1> <p>Resetta la dimensione del browser per vedere l'effetto.</p> <p> Sul dispositivo mobile, ossia quando la larghezza dello schermo è inferiore a 576px, le quattro colonne si impilano verticalmente.</p> <div class="row"> <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div> </div> </div> </body> </html>Testa e vedi ‹/›
Esempio seguente dimostra come creare colonne responsive di larghezza variabile su tablet e schermi più grandi. Sui dispositivi mobili, quando la larghezza dello schermo è inferiore a 576px, le due colonne saranno disposte una sopra l'altra.:
<!DOCTYPE html> <html> <head> <title>Esempio Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Hello World!</h1> <p>Resetta la dimensione del browser per vedere l'effetto.</p> <p>Sui dispositivi mobili, quando la larghezza dello schermo è inferiore a 576px, le quattro colonne saranno disposte una sopra l'altra.</p> <div class="row"> <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div> </div> </div> </body> </html>Testa e vedi ‹/›
Di seguito, gli esempi dimostrano che su display di dispositivi desktop, le larghezze delle due colonne sono rispettivamente del 50%, se su tablet, la larghezza della colonna sinistra è del 25% e quella della colonna destra è del 75%, su dispositivi mobili come telefoni cellulari, verranno visualizzati uno accanto all'altro.
<!DOCTYPE html> <html> <head> <title>Esempio Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Layout della griglia tablet e desktop</h1> <p>Di seguito, gli esempi dimostrano che su display di dispositivi desktop, le larghezze delle due colonne sono rispettivamente del 50%, se su tablet, la larghezza della colonna sinistra è del 25% e quella della colonna destra è del 75%, su dispositivi mobili come telefoni cellulari, verranno visualizzati uno accanto all'altro.</p> </p> <p>Resetta la dimensione della finestra del browser per vedere l'effetto.</p> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-6 bg-success"> w3codebox </div> <div class="col-sm-9 col-md-6 bg-warning"> Guida di base </div> </div> </div> </div> </body> </html>Testa e vedi ‹/›
Di seguito, gli esempi hanno una percentuale di larghezza rispettivamente di: 25/75%, 50/50%, 33.33/66.67%, 16.67/83.33%, su dispositivi mobili come telefoni cellulari, verranno visualizzati uno accanto all'altro.
<!DOCTYPE html> <html> <head> <title>Esempio Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Tablet, desktop, grande display desktop, super grande display desktop</h1> <p>Di seguito, gli esempi hanno una percentuale di larghezza rispettivamente di: 25/75%, 50/50%, 33.33/66.67%, 16.67/83.33%, su dispositivi mobili come telefoni cellulari, verranno visualizzati uno accanto all'altro.</p> <p>Resetta la dimensione della finestra del browser per vedere l'effetto.</p> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 bg-success"> w3codebox </div> <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 bg-warning"> Guida di base </div> </div> </div> </div> </body> </html>Testa e vedi ‹/›
Le colonne spostate sono impostate tramite le classi offset-*-*. Il primo asterisco ( * ) può essere sm, md, lg, xl，che rappresenta il tipo di dispositivo di schermo, il secondo asterisco ( * ) può essere 1 a 11 i numeri.
Per utilizzare lo spostamento su display a schermo grande, utilizzare .offset-md-* le classi. Queste classi aumentano il margine esterno sinistro (margin) di una colonna * colonne, dove * L'intervallo è da 1 a 11。
Ad esempio: .offset-md-4 è spostare .col-md-4 di quattro colonne a destra.
<!DOCTYPE html> <html> <head> <title>Esempio Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Spostamento delle colonne</h1> <p>.offset-md-4 è spostare .col-md-4 di quattro colonne a destra.</p> <div class="container-fluid"> <div class="row"> <div class="col-md-4 bg-success">.col-md-4</div> <div class="col-md-4 offset-md-4 bg-warning">.col-md-4 .offset-md-4</div> </div> <div class="row"> <div class="col-md-3 offset-md-3 bg-success">.col-md-3 .offset-md-3</div> <div class="col-md-3 offset-md-3 bg-warning">.col-md-3 .offset-md-3</div> </div> <div class="row"> <div class="col-md-6 offset-md-3 bg-success">.col-md-6 .offset-md-3</div> </div> </div> </div> </body> </html>Testa e vedi ‹/›
Speriamo che tu abbia già compreso le basi del nuovo sistema di griglia Bootstrap 4. Nei prossimi capitoli, imparerai come utilizzare questo sistema di griglia flexbox per creare layout di base per le pagine web.