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.

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 .rowconjunt de columnes noves dins d'una columna .span*existent ..span*

Exemple

<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>

Variables en MENYS

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.

Com personalitzar

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.

Mantenir-se sensible

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.

Disseny fix

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>

Distribució de fluids

<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>

Dispositius compatibles

Bootstrap admet un bon nombre de consultes multimèdia 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:

El que fan

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-widthi max-width.

• Modifiqueu l'amplada de la columna a la nostra quadrícula
• Apila els elements en lloc de flotar sempre que sigui necessari
• Canvia la mida dels encapçalaments i del text perquè siguin més adequats per als dispositius

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:

1. Utilitzeu la versió responsive compilada, bootstrap-responsive.css
2. Afegiu @import "responsive.less" i torneu a compilar Bootstrap
3. Modifiqueu i recompileu responsive.less com a separat

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 : 940 píxels ) { ... }        
 
  // Escriptori gran
  @media ( amplada mínima : 1200 px ) { .. }