Impalcatura

Bootstrap è costruito su una griglia reattiva a 12 colonne. Abbiamo anche incluso layout a larghezza fissa e fluida basati su quel sistema.

Griglia predefinita da 940 pixel

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.

Colonne di compensazione

4 compensazione 4

3 compensazione 3

8 compensazione 4

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

Colonne di nidificazione

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

Livello 1 della colonna

Livello 2

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

Personalizzazione della griglia

Variabile	Valore di default	Descrizione
`@gridColumns`	12	Numero di colonne
`@gridColumnWidth`	60px	Larghezza di ogni colonna
`@gridGutterWidth`	20px	Spazio negativo tra le colonne
`@siteWidth`	Somma calcolata di tutte le colonne e le grondaie	Conta il numero di colonne e grondaie per impostare la larghezza del `.container-fixed()`mixin

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 per rendere i tuoi progetti più appropriati su diversi dispositivi e risoluzioni dello schermo. Ecco cosa è incluso:

Etichetta	Larghezza del layout	Larghezza della colonna	Larghezza della grondaia
Smartphone	480px e inferiori	Colonne fluide, nessuna larghezza fissa
Compresse per ritratti	Da 480 px a 768 px	Colonne fluide, nessuna larghezza fissa
Tavolette paesaggistiche	Da 768 px a 940 px	44px	20px
Predefinito	940px e oltre	60px	20px
Ampio display	1210px e oltre	70px	30px

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

Utilizzo delle media query

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:

Utilizzare la versione reattiva compilata, bootstrap-responsive.css
Aggiungi @import "responsive.less" e ricompila Bootstrap
Modifica e ricompila responsive.less come 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 minima : 768px ) e ( larghezza massima : 940px ) { ... } _ _        
 
  // Desktop grande
  @media ( larghezza minima : 1200px ) { .. } _