Bootstrap es basa en una graella sensible de 12 columnes. També hem inclòs dissenys d'amplada fixa i fluida basats en aquest sistema.
El sistema de quadrícula predeterminat que es proporciona com a part de Bootstrap és una quadrícula de 940 píxels d'ample i 12 columnes .
També té quatre variacions sensibles per a diversos dispositius i resolucions: telèfon, tauleta vertical, taula horitzontal i escriptoris petits i escriptoris de pantalla ampla.
- <div class = "fila" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Com es mostra aquí, es pot crear un disseny bàsic amb dues "columnes", cadascuna abastant un nombre de les 12 columnes fonamentals que hem definit com a part del nostre sistema de quadrícula.
- <div class = "fila" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
Amb el sistema de quadrícula estàtica (no fluida) a Bootstrap, la nidificació és fàcil. Per niuar el vostre contingut, només cal que afegiu un .row
conjunt de columnes noves dins d'una columna .span*
existent ..span*
Les files imbricades han d'incloure un conjunt de columnes que sumen el nombre de columnes del seu pare. Per exemple, dues columnes imbricades .span3
s'han de col·locar dins d'un fitxer .span6
.
- <div class = "fila" >
- <div class = "span12" >
- Nivell 1 de columna
- <div class = "fila" >
- <div class = "span6" > Nivell 2 </div>
- <div class = "span6" > Nivell 2 </div>
- </div>
- </div>
- </div>
El sistema de quadrícula fluida utilitza percentatges per a l'amplada de columnes en lloc de píxels fixos. També té les mateixes variacions de resposta que el nostre sistema de graella fixa, assegurant les proporcions adequades per a les resolucions clau de la pantalla i els dispositius.
Feu que qualsevol fila sigui fluida simplement canviant .row
a .row-fluid
. Les columnes es mantenen exactament iguals, cosa que fa que sigui molt senzill canviar entre dissenys fixos i fluids.
- <div class = "fila-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
La nidificació amb quadrícules fluides és una mica diferent: el nombre de columnes imbricades no cal que coincideixi amb el pare. En canvi, les columnes es restableixen a cada nivell perquè cada fila ocupa el 100% de la columna principal.
- <div class = "fila-fluid" >
- <div class = "span12" >
- Nivell 1 de columna
- <div class = "fila-fluid" >
- <div class = "span6" > Nivell 2 </div>
- <div class = "span6" > Nivell 2 </div>
- </div>
- </div>
- </div>
Variable | Valor per defecte | Descripció |
---|---|---|
@gridColumns |
12 | Nombre de columnes |
@gridColumnWidth |
60 píxels | Amplada de cada columna |
@gridGutterWidth |
20 píxels | Espai negatiu entre columnes |
@siteWidth |
Suma calculada de totes les columnes i canalons | Compta el nombre de columnes i canalons per establir l'amplada de la .container-fixed() barreja |
A Bootstrap hi ha un grapat de variables per personalitzar el sistema de quadrícula predeterminat de 940 px, documentat anteriorment. Totes les variables de la graella s'emmagatzemen a variables.less.
Modificar la graella significa canviar les tres @grid*
variables i recompilar Bootstrap. Canvieu les variables de la graella a variables.less i utilitzeu una de les quatre maneres documentades per recompilar . Si esteu afegint més columnes, assegureu-vos d'afegir el CSS per a les de grid.less.
La personalització de la quadrícula només funciona al nivell predeterminat, la quadrícula de 940 px. Per mantenir els aspectes sensibles de Bootstrap, també haureu de personalitzar les graelles a responsive.less.
El disseny predeterminat i senzill de 940 píxels d'ample i centrat per a gairebé qualsevol lloc web o pàgina proporcionada per un únic fitxer <div class="container">
.
- <cos>
- <div class = "contenidor" >
- ...
- </div>
- </cos>
<div class="container-fluid">
ofereix una estructura de pàgina flexible, amplades mínimes i màx. i una barra lateral esquerra. És ideal per a aplicacions i documents.
- <div class = "container-fluid" >
- <div class = "fila-fluid" >
- <div class = "span2" >
- <!--Contingut de la barra lateral-->
- </div>
- <div class = "span10" >
- <!--Contingut corporal-->
- </div>
- </div>
- </div>
Bootstrap admet un bon nombre de consultes multimèdia en un sol fitxer per ajudar-vos a fer que els vostres projectes siguin més adequats en diferents dispositius i resolucions de pantalla. Aquí teniu el que s'inclou:
Etiqueta | Amplada del disseny | Amplada de la columna | Amplada del canal |
---|---|---|---|
Telèfons intel·ligents | 480 píxels i per sota | Columnes fluides, sense amplades fixes | |
Tauletes retratades | De 480 a 768 píxels | Columnes fluides, sense amplades fixes | |
Tauletes de paisatge | De 768 a 979 píxels | 42 píxels | 20 píxels |
Per defecte | 980 píxels i més | 60 píxels | 20 píxels |
Pantalla gran | 1210 píxels i més | 70 píxels | 30 píxels |
Per garantir que els dispositius mostrin pàgines responsives correctament, incloeu la metaetiqueta de la finestra gràfica.
- <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
Les consultes de mitjans permeten un CSS personalitzat en funció d'una sèrie de condicions (ràtios, amplades, tipus de visualització, etc.), però normalment se centren al voltant de min-width
i max-width
.
Bootstrap no inclou automàticament aquestes consultes multimèdia, però comprendre-les i afegir-les és molt fàcil i requereix una configuració mínima. Teniu algunes opcions per incloure les funcions de resposta de Bootstrap:
Per què no només incloure-ho? La veritat és que no tot ha de respondre. En lloc d'animar els desenvolupadors a eliminar aquesta funció, pensem que és millor habilitar-la.
- // Paisatge telèfons i cap avall
- @media ( amplada màxima : 480 píxels ) { ... }
- // Telèfon horitzontal a tauleta vertical
- @media ( amplada màxima : 768 píxels ) { ... }
- // Tauleta vertical a horitzontal i escriptori
- @media ( amplada mínima : 768 píxels ) i ( amplada màxima : 980 píxels ) { ... }
- // Escriptori gran
- @media ( amplada mínima : 1200 px ) { .. }