Exemple de grile Bootstrap
Aspecte de bază ale grilei pentru a vă familiariza cu construcția în cadrul sistemului de grile Bootstrap.
În aceste exemple, .themed-grid-col
clasa este adăugată la coloane pentru a adăuga unele tematice. Aceasta nu este o clasă care este disponibilă implicit în Bootstrap.
Cinci niveluri de grilă
Sistemul de grilă Bootstrap are cinci niveluri, câte unul pentru fiecare gamă de dispozitive pe care le acceptăm. Fiecare nivel începe de la o dimensiune minimă a ferestrei de vizualizare și se aplică automat dispozitivelor mai mari, dacă nu este suprascris.
Trei coloane egale
Obțineți trei coloane cu lățime egală, începând de la desktopuri și scalare la desktopuri mari . Pe dispozitivele mobile, tablete și mai jos, coloanele se vor stivui automat.
Alternativă cu trei coloane egale
Folosind .row-cols-*
clasele, puteți crea cu ușurință o grilă cu coloane egale.
.col
copil al
.row-cols-md-3
.col
copil al
.row-cols-md-3
.col
copil al
.row-cols-md-3
Trei coloane inegale
Obțineți trei coloane, începând de la desktopuri și scalare la desktopuri mari de diferite lățimi. Amintiți-vă, coloanele de grilă ar trebui să adună până la douăsprezece pentru un singur bloc orizontal. Mai mult decât atât, și coloanele încep să se stivuească indiferent de portul de vizualizare.
Două coloane
Obțineți două coloane începând de la desktopuri și scalare la desktopuri mari .
Lățimea completă, o singură coloană
Nu sunt necesare clase de grilă pentru elementele cu lățime completă.
Două coloane cu două coloane imbricate
Conform documentației, imbricarea este ușoară - doar puneți un rând de coloane într-o coloană existentă. Acest lucru vă oferă două coloane, începând de la desktopuri și scalare la desktopuri mari , cu alte două (lățimi egale) în coloana mai mare.
La dimensiunile dispozitivelor mobile, tablete și în jos, aceste coloane și coloanele lor imbricate se vor stivui.
Mixt: mobil și desktop
Sistemul de grilă Bootstrap v4 are cinci niveluri de clase: xs (foarte mic, acest infix de clasă nu este utilizat), sm (mic), md (mediu), lg (mare) și xl (extra mare). Puteți utiliza aproape orice combinație a acestor clase pentru a crea aspecte mai dinamice și mai flexibile.
Fiecare nivel de clase crește, ceea ce înseamnă că dacă intenționați să setați aceleași lățimi pentru md, lg și xl, trebuie doar să specificați md.
Mixt: mobil, tabletă și desktop
Jgheaburi
Cu .gx-*
clase, jgheaburile orizontale pot fi reglate.
.col
cu
.gx-4
jgheaburi
.col
cu
.gx-4
jgheaburi
.col
cu
.gx-4
jgheaburi
.col
cu
.gx-4
jgheaburi
.col
cu
.gx-4
jgheaburi
.col
cu
.gx-4
jgheaburi
Utilizați .gy-*
clasele pentru a controla jgheaburile verticale.
.col
cu
.gy-4
jgheaburi
.col
cu
.gy-4
jgheaburi
.col
cu
.gy-4
jgheaburi
.col
cu
.gy-4
jgheaburi
.col
cu
.gy-4
jgheaburi
.col
cu
.gy-4
jgheaburi
Cu .g-*
clasele, jgheaburile în ambele direcții pot fi reglate.
.col
cu
.g-3
jgheaburi
.col
cu
.g-3
jgheaburi
.col
cu
.g-3
jgheaburi
.col
cu
.g-3
jgheaburi
.col
cu
.g-3
jgheaburi
.col
cu
.g-3
jgheaburi
Containere
Clasele suplimentare adăugate în Bootstrap v4.4 permit containere cu lățime de 100% până la un anumit punct de întrerupere. v5 adaugă un nou punct de xxl
întrerupere.