Exemple de grile Bootstrap

Aspecte de bază ale grilei pentru a vă familiariza cu construcția în cadrul sistemului de grile Bootstrap.

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 3 are patru niveluri de clase: xs (telefoane), sm (tablete), md (desktop-uri) și lg ( desktop-uri mai mari). 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-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Mixt: mobil, tabletă și desktop

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

Curățarea coloanei

Clear plutește în anumite puncte de întrerupere pentru a preveni ambalarea incomodă cu conținut neuniform.

.col-xs-6 .col-sm-3
Redimensionați-vă fereastra de vizualizare sau verificați-l pe telefon pentru un exemplu.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Resetări de compensare, împingere și tragere

Resetați decalajele, împingerile și tragerile la anumite puncte de întrerupere.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0