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-colclasa 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.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

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.

.col-md-4

Alternativă cu trei coloane egale

Folosind .row-cols-*clasele, puteți crea cu ușurință o grilă cu coloane egale.

.colcopil 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.

.col-md-3

.col-md-6

.col-md-3

Două coloane

Obțineți două coloane începând de la desktopuri și scalare la desktopuri mari .

.col-md-8

.col-md-4

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.

.col-md-8

.col-md-6

.col-md-4

Mixt: mobil și desktop

Sistemul de grilă Bootstrap v5 are șase niveluri de clase: xs (foarte mic, acest infix de clasă nu este utilizat), sm (mic), md (mediu), lg (mari), xl (x-mari) și xxl (xx). -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, xl și xxl, trebuie doar să specificați md.

.col-md-8

.col-6 .col-md-4

.col-6

Mixt: mobil, tabletă și desktop

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

Jgheaburi

Cu .gx-*clase, jgheaburile orizontale pot fi reglate.

.colcu .gx-4jgheaburi

Utilizați .gy-*clasele pentru a controla jgheaburile verticale.

.colcu .gy-4jgheaburi

Cu .g-*clasele, jgheaburile în ambele direcții pot fi reglate.

.colcu .g-3jgheaburi

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.

.container

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.recipient-fluid