Exemples de quadrícula d'arrencada

Dissenys bàsics de quadrícula per familiaritzar-vos amb la construcció dins del sistema de quadrícula Bootstrap.

Tres columnes iguals

Obteniu tres columnes d'amplada igual que comencen als escriptoris i s'escalen a escriptoris grans . En dispositius mòbils, tauletes i a continuació, les columnes s'apilaran automàticament.

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

Tres columnes desiguals

Obteniu tres columnes que comencen als escriptoris i s'escalen a escriptoris grans de diferents amplades. Recordeu que les columnes de la quadrícula haurien de sumar fins a dotze per a un sol bloc horitzontal. Més que això, i les columnes comencen a apilar-se sense importar la finestra gràfica.

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

Dues columnes

Obteniu dues columnes que comencen als escriptoris i s'escalen a escriptoris grans .

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

Ample complet, columna única

No calen classes de quadrícula per als elements d'amplada completa.

Dues columnes amb dues columnes imbricades

Segons la documentació, la nidificació és fàcil: només cal que col·loqueu una fila de columnes dins d'una columna existent. Això us ofereix dues columnes que comencen als escriptoris i s'escalen a escriptoris grans , amb altres dues (amples iguals) dins de la columna més gran.

A les mides de dispositius mòbils, tauletes o inferiors, aquestes columnes i les seves columnes imbricades s'apilaran.

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

Mixta: mòbil i escriptori

El sistema de graella Bootstrap 3 té quatre nivells de classes: xs (telèfons), sm (tauletes), md (escriptoris) i lg (escriptoris més grans). Podeu utilitzar gairebé qualsevol combinació d'aquestes classes per crear dissenys més dinàmics i flexibles.

Cada nivell de classes augmenta, és a dir, si teniu previst establir les mateixes amplades per a xs i sm, només heu d'especificar 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: mòbil, tauleta i escriptori

.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

Netejada de columnes

Flotadors clars en punts d'interrupció específics per evitar embolcalls incòmodes amb contingut desigual.

.col-xs-6 .col-sm-3
Canvieu la mida de la vostra finestra gràfica o comproveu-la al telèfon per obtenir un exemple.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Reinicia la compensació, l'empenta i l'extracció

Restableix les compensacions, les empentes i les traccions en punts de ruptura específics.

.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