Sistema de graella
Utilitzeu la nostra potent quadrícula flexible per a mòbils per crear dissenys de totes les formes i mides gràcies a un sistema de dotze columnes, cinc nivells de resposta predeterminats, variables i mixins Sass i dotzenes de classes predefinides.
El sistema de graella de Bootstrap utilitza una sèrie de contenidors, files i columnes per dissenyar i alinear el contingut. Està creat amb flexbox i és totalment sensible. A continuació es mostra un exemple i una visió en profunditat de com s'uneix la graella.
Nou o no coneixeu Flexbox? Llegiu aquesta guia de CSS Tricks flexbox per obtenir antecedents, terminologia, directrius i fragments de codi.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
L'exemple anterior crea tres columnes d'amplada igual en dispositius petits, mitjans, grans i molt grans utilitzant les nostres classes de quadrícula predefinides. Aquestes columnes estan centrades a la pàgina amb el pare .container
.
Desglossant-lo, a continuació es mostra com funciona:
- Els contenidors proporcionen un mitjà per centrar i estampar horitzontalment el contingut del vostre lloc. Utilitzeu -lo
.container
per a una amplada de píxel sensible o.container-fluid
perwidth: 100%
a totes les mides de visualització i dispositiu. - Les files són embolcalls per a columnes. Cada columna té horitzontal
padding
(anomenat canaló) per controlar l'espai entre elles. Aixòpadding
es contraresta a les files amb marges negatius. D'aquesta manera, tot el contingut de les columnes s'alinea visualment al costat esquerre. - En un disseny de quadrícula, el contingut s'ha de col·locar dins de columnes i només les columnes poden ser fills immediats de les files.
- Gràcies a flexbox, les columnes de quadrícula sense una especificació
width
es dissenyaran automàticament com a columnes d'amplada igual. Per exemple, quatre casos de.col-sm
seran automàticament un 25% d'amplada a partir del petit punt d'interrupció. Consulteu la secció de columnes de disseny automàtic per obtenir més exemples. - Les classes de columnes indiquen el nombre de columnes que voleu utilitzar de les 12 possibles per fila. Per tant, si voleu tres columnes d'amplada igual, podeu utilitzar
.col-4
. - Les columnes
width
s'estableixen en percentatges, de manera que sempre són fluides i de mida en relació amb el seu element pare. - Les columnes tenen horitzontals
padding
per crear els canals entre columnes individuals, però, podeu eliminar-lesmargin
de les files ipadding
de les columnes.no-gutters
amb.row
. - Perquè la quadrícula respongui, hi ha cinc punts d'interrupció de la quadrícula, un per a cada punt d' interrupció responsiu : tots els punts d'interrupció (extra petit), petits, mitjans, grans i molt grans.
- Els punts d'interrupció de la quadrícula es basen en consultes de mitjans d'amplada mínima, és a dir , s'apliquen a aquest punt d'interrupció i a tots els que hi ha a sobre (p. ex.,
.col-sm-4
s'aplica a dispositius petits, mitjans, grans i molt grans, però no al primer punt d'xs
interrupció). - Podeu utilitzar classes de graella predefinides (com ara
.col-4
) o mixins de Sass per a un marcatge més semàntic.
Tingueu en compte les limitacions i errors al voltant de flexbox , com ara la impossibilitat d'utilitzar alguns elements HTML com a contenidors flexibles .
Tot i que Bootstrap utilitza em
s o rem
s per definir la majoria de mides, px
s s'utilitzen per als punts d'interrupció de la graella i les amplades dels contenidors. Això és degut a que l'amplada de la finestra gràfica és en píxels i no canvia amb la mida del tipus de lletra .
Vegeu com funcionen els aspectes del sistema de graella Bootstrap en diversos dispositius amb una taula pràctica.
Extra petit <576px |
Petit ≥576 píxels |
Mitjana ≥768 píxels |
Gran ≥992 px |
Extra gran ≥1200px |
|
---|---|---|---|---|---|
Amplada màxima del contenidor | Cap (automàtic) | 540 píxels | 720 píxels | 960 píxels | 1140 píxels |
Prefix de classe | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# de columnes | 12 | ||||
Amplada del canal | 30px (15px a cada costat d'una columna) | ||||
Encaixable | Sí | ||||
Ordenació de columnes | Sí |
Utilitzeu classes de columnes específiques del punt d'interrupció per facilitar la mida de les columnes sense una classe numerada explícita com .col-sm-6
.
Per exemple, aquí hi ha dos dissenys de quadrícula que s'apliquen a cada dispositiu i finestra gràfica, des de xs
fins a xl
. Afegiu qualsevol nombre de classes sense unitats per a cada punt d'interrupció que necessiteu i cada columna tindrà la mateixa amplada.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Les columnes d'amplada igual es poden dividir en diverses línies, però hi va haver un error de flexbox de Safari que va impedir que això funcionés sense un fitxer explícit flex-basis
o border
. Hi ha solucions alternatives per a versions anteriors del navegador, però no haurien de ser necessàries si esteu actualitzats.
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="w-100"></div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
La disposició automàtica de les columnes de quadrícula Flexbox també significa que podeu establir l'amplada d'una columna i que les columnes germanes canviïn automàticament la mida al seu voltant. Podeu utilitzar classes de quadrícula predefinides (com es mostra a continuació), mixins de quadrícula o amplades en línia. Tingueu en compte que les altres columnes canviaran la mida sense importar l'amplada de la columna central.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Utilitzeu col-{breakpoint}-auto
classes per dimensionar columnes en funció de l'amplada natural del seu contingut.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Creeu columnes d'amplada igual que abastin diverses files inserint un .w-100
lloc on voleu que les columnes es trenquin a una línia nova. Feu que les pauses responguin barrejant .w-100
amb algunes utilitats de visualització sensibles .
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
La graella de Bootstrap inclou cinc nivells de classes predefinides per crear dissenys responsius complexos. Personalitzeu la mida de les vostres columnes en dispositius molt petits, petits, mitjans, grans o molt grans com us convingui.
Per a les quadrícules que siguin iguals des del dispositiu més petit fins al més gran, utilitzeu les classes .col
i . .col-*
Especifiqueu una classe numerada quan necessiteu una columna de mida particular; en cas contrari, no dubteu a cenyir-vos a .col
.
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
Mitjançant un únic conjunt de .col-sm-*
classes, podeu crear un sistema de graella bàsic que comenci apilat abans de tornar-se horitzontal amb el petit punt d'interrupció ( sm
).
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
No voleu que les vostres columnes simplement s'apilin en alguns nivells de quadrícula? Utilitzeu una combinació de diferents classes per a cada nivell segons sigui necessari. Vegeu l'exemple següent per a una millor idea de com funciona tot.
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
Utilitzeu les utilitats d'alineació de flexbox per alinear columnes verticalment i horitzontalment.
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Els canals entre columnes a les nostres classes de quadrícula predefinides es poden eliminar amb .no-gutters
. Això elimina la margin
s negativa .row
i l'horitzontal padding
de totes les columnes secundàries immediates.
Aquí teniu el codi font per crear aquests estils. Tingueu en compte que les substitucions de columnes només tenen l'abast de les primeres columnes secundàries i s'orienten mitjançant el selector d'atributs . Tot i que això genera un selector més específic, el farciment de columnes encara es pot personalitzar encara més amb les utilitats d'espaiat .
Necessites un disseny de punta a punta? Deixeu anar el pare .container
o .container-fluid
.
A la pràctica, així és com es veu. Tingueu en compte que podeu continuar utilitzant-ho amb totes les altres classes de graella predefinides (incloses les amplades de columnes, els nivells de resposta, les reordenacions i molt més).
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Si es col·loquen més de 12 columnes dins d'una sola fila, cada grup de columnes addicionals, com una unitat, s'ajustarà a una línia nova.
Com que 9 + 4 = 13 > 12, aquest div de 4 columnes s'embolica en una línia nova com una unitat contigua.
Les columnes posteriors continuen per la nova línia.
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
Trencar columnes a una línia nova a flexbox requereix un petit truc: afegiu un element width: 100%
on vulgueu embolicar les vostres columnes a una línia nova. Normalment això s'aconsegueix amb múltiples .row
s, però no tots els mètodes d'implementació poden tenir en compte això.
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
També podeu aplicar aquesta interrupció en punts d'interrupció específics amb les nostres utilitats de visualització sensibles .
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
Utilitzeu .order-
classes per controlar l' ordre visual del vostre contingut. Aquestes classes són sensibles, de manera que podeu establir el order
punt d'interrupció per (p. ex., .order-1.order-md-2
). Inclou suport per 1
a través 12
dels cinc nivells de quadrícula.
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
També hi ha classes responsive .order-first
i que canvien el valor d'un element aplicant i ( ), respectivament. Aquestes classes també es poden barrejar amb les classes numerades segons sigui necessari..order-last
order
order: -1
order: 13
order: $columns + 1
.order-*
<div class="container">
<div class="row">
<div class="col order-last">
First, but last
</div>
<div class="col">
Second, but unordered
</div>
<div class="col order-first">
Third, but first
</div>
</div>
</div>
Podeu compensar les columnes de la quadrícula de dues maneres: les nostres .offset-
classes de quadrícula sensibles i les nostres utilitats de marge . Les classes de quadrícula tenen la mida per coincidir amb les columnes, mentre que els marges són més útils per a dissenys ràpids on l'amplada del desplaçament és variable.
Mou les columnes cap a la dreta amb .offset-md-*
classes. Aquestes classes augmenten el marge esquerre d'una columna per *
columnes. Per exemple, .offset-md-4
es mou .col-md-4
sobre quatre columnes.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
A més d'esborrar columnes als punts d'interrupció sensibles, és possible que hàgiu de restablir els desplaçaments. Vegeu això en acció a l'exemple de quadrícula .
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
Amb el pas a flexbox a la v4, podeu utilitzar utilitats de marge com .mr-auto
per forçar les columnes germanes allunyades les unes de les altres.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
Per niuar el contingut amb la quadrícula predeterminada, afegiu un .row
conjunt de columnes noves dins d'una columna .col-sm-*
existent . .col-sm-*
Les files imbricades haurien d'incloure un conjunt de columnes que sumen 12 o menys (no cal que utilitzeu les 12 columnes disponibles).
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
Quan utilitzeu els fitxers Sass d'origen de Bootstrap, teniu l'opció d'utilitzar variables i mixins Sass per crear dissenys de pàgina personalitzats, semàntics i sensibles. Les nostres classes de graella predefinides utilitzen aquestes mateixes variables i mixins per proporcionar un conjunt complet de classes llestes per utilitzar per a dissenys de resposta ràpida.
Les variables i els mapes determinen el nombre de columnes, l'amplada del canal i el punt de consulta de mitjans en què començar les columnes flotants. Els fem servir per generar les classes de quadrícula predefinides documentades anteriorment, així com per als mixins personalitzats que s'enumeren a continuació.
Els mixins s'utilitzen juntament amb les variables de graella per generar CSS semàntic per a columnes de graella individuals.
Podeu modificar les variables als vostres propis valors personalitzats o simplement utilitzar els mixins amb els seus valors predeterminats. Aquí teniu un exemple d'ús de la configuració predeterminada per crear un disseny de dues columnes amb un espai entre ells.
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Utilitzant les nostres variables i mapes Sass de graella integrats, és possible personalitzar completament les classes de graella predefinides. Canvieu el nombre de nivells, les dimensions de la consulta de mitjans i l'amplada del contenidor; després torneu a compilar.
El nombre de columnes de la graella es pot modificar mitjançant variables Sass. $grid-columns
s'utilitza per generar les amplades (en percentatge) de cada columna individual, mentre que $grid-gutter-width
permet amplades específiques de punt d'interrupció que es divideixen uniformement entre padding-left
i padding-right
per als canals de la columna.
Més enllà de les columnes, també podeu personalitzar el nombre de nivells de quadrícula. Si només volguéssiu quatre nivells de quadrícula, actualitzeu $grid-breakpoints
i $container-max-widths
a alguna cosa com això:
Quan feu qualsevol canvi a les variables o mapes de Sass, haureu de desar els canvis i tornar-los a compilar. En fer-ho, sortirà un nou conjunt de classes de quadrícula predefinides per a amplades de columnes, desplaçaments i ordres. Les utilitats de visibilitat responsives també s'actualitzaran per utilitzar els punts d'interrupció personalitzats. Assegureu-vos d'establir els valors de la quadrícula a px
(no rem
, em
, o %
).