Exemple de grile Bootstrap

Aspecte de bază ale grilei pentru a vă familiariza cu construcția în cadrul sistemului de grile 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-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-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
.col-md-4
.col-md-4

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-6
.col-md-4

Mixt: mobil și desktop

Sistemul de grilă Bootstrap v4 are cinci niveluri de clase: xs (foarte mic), sm (mic), md (mediu), lg (mare) și xl (foarte 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 xs și sm, trebuie doar să specificați xs.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Mixt: mobil, tabletă și desktop

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4