Il sistema di griglia predefinito fornito come parte di Bootstrap è una griglia a 12 colonne di 940 pixel di larghezza .

Dispone inoltre di quattro varianti reattive per vari dispositivi e risoluzioni: telefono, tablet verticale, orizzontale tabella e desktop piccoli e desktop widescreen di grandi dimensioni.

< classe div = "riga" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Come mostrato qui, è possibile creare un layout di base con due "colonne", ciascuna che copre un numero di 12 colonne di base che abbiamo definito come parte del nostro sistema di griglia.

Con il sistema di griglia statico (non fluido) in Bootstrap, il nesting è facile. Per annidare i tuoi contenuti, aggiungi semplicemente una nuova .rowe serie di colonne all'interno di una colonna .span*esistente ..span*

Esempio

Le righe nidificate dovrebbero includere un set di colonne che si sommano al numero di colonne del suo genitore. .span3Ad esempio, due colonne nidificate devono essere posizionate all'interno di un file .span6.

< classe div = "riga" > 
  < classe div = "span12" > 
    Livello 1 della colonna
    < classe div = "riga" > 
      <div class = "span6" > Livello 2 </div> 
      <div class = "span6" > Livello 2 </div> 
    </div>
  </div>
</div>

Percentuali, non pixel

Il sistema a griglia fluida utilizza le percentuali per le larghezze delle colonne anziché i pixel fissi. Ha anche le stesse variazioni reattive del nostro sistema a griglia fissa, garantendo proporzioni adeguate per risoluzioni e dispositivi chiave dello schermo.

Righe fluide

Rendi fluida qualsiasi riga semplicemente cambiando .rowin .row-fluid. Le colonne rimangono esattamente le stesse, rendendo estremamente semplice passare da layout fissi a layout fluidi.

Marcatura

< classe div = "fluido riga" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

La nidificazione con le griglie fluide è leggermente diversa: il numero di colonne nidificate non deve necessariamente corrispondere al genitore. Invece, le tue colonne vengono reimpostate a ogni livello perché ogni riga occupa il 100% della colonna principale.

< classe div = "fluido riga" > 
  < classe div = "span12" > 
    Livello 1 della colonna
    < classe div = "fluido riga" > 
      <div class = "span6" > Livello 2 </div> 
      <div class = "span6" > Livello 2 </div> 
    </div>
  </div>
</div>

Variabili in LESS

In Bootstrap sono integrate una manciata di variabili per la personalizzazione del sistema di griglia predefinito da 940 pixel, documentato sopra. Tutte le variabili per la griglia sono memorizzate in variabili.less.

Come personalizzare

Modificare la griglia significa cambiare le tre @grid*variabili e ricompilare Bootstrap. Modificare le variabili della griglia in variabili.less e utilizzare uno dei quattro modi documentati per ricompilare . Se stai aggiungendo più colonne, assicurati di aggiungere il CSS per quelle in grid.less.

Rimanere reattivi

La personalizzazione della griglia funziona solo al livello predefinito, la griglia 940px. Per mantenere gli aspetti reattivi di Bootstrap, dovrai anche personalizzare le griglie in responsive.less.

Disposizione fissa

Il layout centrato e di 940 px di larghezza di default per quasi tutti i siti Web o le pagine forniti da un singolo file <div class="container">.

<corpo>
  < classe div = "contenitore" > 
    ...
  </div>
</corpo>

Disposizione fluida

<div class="container-fluid">offre una struttura della pagina flessibile, larghezze minime e massime e una barra laterale sinistra. È ottimo per app e documenti.

< classe div = "fluido contenitore" > 
  < classe div = "fluido riga" > 
    < classe div = "span2" > 
      <!--Contenuto della barra laterale-->
    </div>
    < classe div = "span10" > 
      <!--Contenuto del corpo-->
    </div>
  </div>
</div>

Dispositivi supportati

Bootstrap supporta una manciata di media query in un unico file per rendere i tuoi progetti più appropriati su diversi dispositivi e risoluzioni dello schermo. Ecco cosa è incluso:

Richiede meta tag

Per garantire che i dispositivi visualizzino correttamente le pagine reattive, includi il meta tag viewport.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  

Cosa fanno

Le media query consentono CSS personalizzati in base a una serie di condizioni (rapporti, larghezze, tipo di visualizzazione, ecc.), ma di solito si concentra su min-widthe max-width.

• Modifica la larghezza della colonna nella nostra griglia
• Impila gli elementi invece di fluttuare dove necessario
• Ridimensiona i titoli e il testo in modo che siano più appropriati per i dispositivi

Bootstrap non include automaticamente queste query multimediali, ma comprenderle e aggiungerle è molto semplice e richiede una configurazione minima. Hai alcune opzioni per includere le funzionalità reattive di Bootstrap:

1. Utilizzare la versione reattiva compilata, bootstrap-responsive.css
2. Aggiungi @import "responsive.less" e ricompila Bootstrap
3. Modifica e ricompila responsive.less come file separato

Perché non includerlo e basta? A dire il vero, non tutto deve essere reattivo. Invece di incoraggiare gli sviluppatori a rimuovere questa funzione, riteniamo che sia meglio abilitarla.

  // Telefoni orizzontali e giù
  @media ( larghezza massima : 480px ) { ... } _     
 
  // Da telefono orizzontale a tablet verticale
  @media ( larghezza massima : 768px ) { ... } _     
 
  // Tablet da verticale a orizzontale e desktop
  @media ( larghezza min : 768px ) e ( larghezza max : 980px ) { ... } _ _        
 
  // Desktop grande
  @media ( larghezza minima : 1200px ) { .. } _