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.

En aquests exemples, la .themed-grid-colclasse s'afegeix a les columnes per afegir alguna temàtica. Aquesta no és una classe disponible a Bootstrap per defecte.

Cinc nivells de graella

Hi ha cinc nivells al sistema de graella Bootstrap, un per a cada gamma de dispositius que admetem. Cada nivell comença amb una mida mínima de la finestra gràfica i s'aplica automàticament als dispositius més grans tret que se substitueix.

.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
.col-xxl-4
.col-xxl-4
.col-xxl-4

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

Alternativa de tres columnes iguals

Utilitzant les .row-cols-*classes, podeu crear fàcilment una graella amb columnes iguals.

.colfill de .row-cols-md-3
.colfill de .row-cols-md-3
.colfill de .row-cols-md-3

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 quadrícula Bootstrap v4 té cinc nivells de classes: xs (extra petit, aquest infix de classe no s'utilitza), sm (petit), md (mitjà), lg (gran) i xl (extra gran). 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 md, lg i xl, només heu d'especificar md.

.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: mòbil, tauleta i escriptori

.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

Canalons

Amb .gx-*les classes, els canalons horitzontals es poden ajustar.

.colamb .gx-4canalons
.colamb .gx-4canalons
.colamb .gx-4canalons
.colamb .gx-4canalons
.colamb .gx-4canalons
.colamb .gx-4canalons

Utilitzeu les .gy-*classes per controlar els canals verticals.

.colamb .gy-4canalons
.colamb .gy-4canalons
.colamb .gy-4canalons
.colamb .gy-4canalons
.colamb .gy-4canalons
.colamb .gy-4canalons

Amb .g-*les classes, es poden ajustar els canalons en ambdues direccions.

.colamb .g-3canalons
.colamb .g-3canalons
.colamb .g-3canalons
.colamb .g-3canalons
.colamb .g-3canalons
.colamb .g-3canalons

Contenidors

Les classes addicionals afegides a Bootstrap v4.4 permeten contenidors amb una amplada del 100% fins a un punt d'interrupció concret. v5 afegeix un nou punt d' xxlinterrupció.

.contenidor
.contenidor-sm
.contenidor-md
.contenidor-lg
.contenidor-xl
.contenidor-xxl
.contenidor-fluid