Esempi di griglia Bootstrap

Disposizioni di griglia di basa per familiarizàvi cù a custruzione in u sistema di griglia Bootstrap.

Trè colonne uguali

Ottene trè colonne di larghezza uguale partendu da i desktop è scalate à grandi desktop . Nant'à i dispositi mobili, tablette è sottu, e culonne s'acumularanu automaticamente.

.col-md-4
.col-md-4
.col-md-4

Trè culonni ineguali

Ottene trè colonne partendu da i desktop è scalate à grandi desktop di diverse larghezze. Ricurdativi, e culonni di griglia devenu aghjunghje à dodici per un unicu blocu horizontale. Più di questu, è e culonne cumincianu à stacking ùn importa micca a vista.

.col-md-3
.col-md-6
.col-md-3

Dui culonni

Ottene duie colonne chì partenu da i desktop è scalanu à grandi desktop .

.col-md-8
.col-md-4

Larghezza piena, una sola colonna

Nisuna classi di griglia sò necessarie per elementi di larghezza completa.

Dui culonni cù duie colonne nidificate

Sicondu a documentazione, a nidificazione hè faciule - basta mette una fila di colonne in una colonna esistente. Questu vi dà duie colonne chì partenu da i desktop è scalanu à grandi desktop , cù altre duie (larghezza uguale) in a colonna più grande.

À e dimensioni di i dispositi mobili, tablette è giù, sti culonni è e so culonne nidificate si stack.

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

Mixed: mobile è desktop

U sistema di griglia Bootstrap 3 hà quattru livelli di classi: xs (telefoni), sm (tablette), md (desktop) è lg (scrivania più grande). Pudete aduprà quasi ogni cumminazione di queste classi per creà layout più dinamichi è flessibili.

Ogni livellu di classi scala, vale à dì chì se pensa à stabilisce a stessa larghezza per xs è sm, avete solu bisognu di specificà 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

Mistu: mobile, tableta è 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

Pulitura di a colonna

Limpia i galleggianti in punti di rottura specifichi per prevene l'imballaggio scomodu cù un cuntenutu irregolare.

.col-xs-6 .col-sm-3
Resize u vostru viewport o verificate u vostru telefunu per un esempiu.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, push, and pull resets

Resettate l'offsets, i push è i pulls in punti di rottura specifichi.

.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