Bootstrap 5 Grid System | Spiegato

Il sistema a griglia di Bootstrap è creato utilizzando Flexbox. Converte la pagina web in 12 colonne. Un sistema a griglia è un layout bidimensionale, il che significa che può funzionare con le righe e le colonne alla volta. Un utente può unire le colonne per ottenere i risultati richiesti o un layout specifico.

Sistema della griglia

Il sistema a griglia di Bootstrap divide la pagina in 12 colonne. Come nell'esempio seguente .La classe Col viene utilizzata per creare colonne e tutto il sistema a griglia dipende da questo .Classe Col. Questo sistema di griglia è l'approccio migliore per impilare il contenuto in orizzontale e consentire l'utilizzo di pagina al massimo.

Codice

.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col

Per fare diversi layout che utilizziamo .riga E .col classe.

Classe Col senza alcuna dimensione

Se non hai specificato la dimensione delle colonne, .col la classe divide automaticamente la riga equamente in base al numero di div con .col lezioni in esso.

Codice

.col
.col
.col

In questo esempio aggiungo solo tre div con il .col classe senza specificare il numero di colonne ma il .col La classe fornisce automaticamente la fusione di 4 colonne a ciascun div e copre collettivamente 12 colonne.

Classe Col con dimensioni

Se vengono specificate le dimensioni delle colonne, quindi .La classe Col divide la riga in base alla dimensione specificata da 0-12.

Codice

.Col-4
.Col-6
.Col-2

In questo esempio aggiungo tre div con .col classe e specificare il numero di colonne come 4, 6 e 2. Ora queste tre colonne coprono ancora lo spazio di 12 colonne ma ora con dimensioni diverse. Questo aiuta un utente a gestire il contenuto in una pagina e utilizzarlo al massimo.

Esempio 2

Questo esempio è per il problema in cui la dimensione dei div supera 12.

Codice

.Col-4
.Col-6
.Col-5

Ora in questo esempio i primi 2 Div coprono già 10 colonne in una riga che lasciano lo spazio per altre due colonne, ma il terzo Div viene fornito con la dimensione 5 delle colonne che si traduce in spostamento del terzo div alla riga successiva per coprire lo spazio di 5 colonne che lascia 2 colonne spazio nella prima riga vuota. Quindi, per evitare questo tipo di problema, assicurati sempre di dividere le colonne in un modo che copre 12 colonne lo spazio collettivamente in una riga.

Classe Col con breakpoint

.col La classe viene anche utilizzata con diversi punti di interruzione per controllare la vista del contenuto su schermi diversi.

• .col-xxl
• .col-xl
• .colg
• .Col-MD
• .col-sm

Codice

.Col-MD
.Col-MD
.Col-MD

Nell'esempio sopra, tre div vengono creati usando .Col-MD La classe è recita proprio come .col classe ma la differenza tra semplice .col classe e .Col-MD La classe è quella .col la classe distribuisce colonne equamente a ciascun div, quindi agisci uguali su ogni dimensione dello schermo ma .Col-MD la classe distribuisce anche colonne equamente tra ogni div ma rimane lo stesso solo XXL, XL, LG E MD dimensioni dello schermo ma non appena va al di sotto delle dimensioni dello schermo medio, tutte le divoni coprono interi 12 colonne ciascuna che si traducono in tre righe e impilarle in verticale.

Classe Col con breakpoint e dimensioni

.col La classe viene anche utilizzata con diversi punti di interruzione per controllare la vista del contenuto su schermi diversi, ma per vedere queste classi in azione devono specificare anche le loro dimensioni.

• .col-*
• .col-xxl-*
• .col-xl-*
• .Col-lg-*
• .col-md-*
• .col-sm-*

Sostituisci * con il numero da 0-12.

Codice

.Col-MD-4
.Col-MD-6
.Col-MD-2

Nell'esempio sopra mi applico .col-md-* Classe su tre Div con la dimensione di 4,6,2, in quanto ha dimostrato che questa classe è applicabile su doppio extra largo (xxl), extra grande (xl), grande (LG) e media (MD) non appena dimensioni dello schermo va al di sotto della schermata media (MD) Tutti i div ridimensionali e coprono 12 colonne ciascuna che risulta in 3 righe e ogni riga è impilata verticalmente. Ecco come vengono creati layout dinamici e flessibili.

Conclusione

Per lavorare in una griglia bootstrap, usa .riga classe e avvolgerlo .col classe se si desidera assegnare colonne uguali a ciascun div ma se si desidera assegnare un numero diverso di colonne a ciascun div, quindi utilizzare .Col- size (0-12) ai div come requisito. Tuttavia, se si desidera fare un uso di layout più flessibile e dinamico .col classe con Breakpoints (XXL/XL/LG/MD/SM), inoltre specificare le loro dimensioni (0-12) pure .col- breakpoint-size.