U sistema di griglia predeterminatu furnitu cum'è parte di Bootstrap hè una griglia di 940 px-wide, 12-colonna .

Hà ancu quattru variazioni responsive per diversi dispositi è risoluzioni: telefuninu, ritratti di tavuletta, paisaghji di tavulinu è picculi desktop, è grandi desktop widescreen.

<div class = "fila" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Cum'è mostratu quì, un layout di basa pò esse creatu cù duie "columne", ognuna spanning un numeru di e 12 culonni fundamentali chì avemu definitu cum'è parte di u nostru sistema di griglia.

Cù u sistema di griglia statica (non fluida) in Bootstrap, a nidificazione hè faciule. Per nidificà u vostru cuntenutu, basta aghjunghje un novu .rowè un set di .span*colonne in una colonna esistente .span*.

Esempiu

E fila nidificate duveranu include un inseme di colonne chì aghjunghjenu à u numeru di colonne di u so parente. Per esempiu, duie .span3colonne nidificate deve esse piazzate in un .span6.

<div class = "fila" > 
  <div class = "span12" > 
    Livellu 1 di a colonna
    <div class = "fila" > 
      <div class = "span6" > Livellu 2 </div> 
      <div class = "span6" > Livellu 2 </div> 
    </div>
  </div>
</div>

Per centu, micca pixel

U sistema di griglia fluida usa percentuali per a larghezza di colonna invece di pixel fissi. Havi ancu e stesse variazioni rispunsevuli cum'è u nostru sistema di griglia fissa, assicurendu proporzioni adatte per e risoluzioni chjave di u screnu è i dispositi.

Righe fluide

Fate un fluidu di fila solu cambiendu .rowà .row-fluid. I culonni restanu esattamente u listessu, facendu super semplice per cambià trà layout fissi è fluidi.

Marcatura

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

A nidificazione cù griglie fluide hè un pocu sfarente: u nùmeru di colonne nidificate ùn hà micca bisognu di currisponde à u genitore. Invece, e vostre colonne sò resettate à ogni livellu perchè ogni fila occupa u 100% di a colonna parente.

<div class = "row-fluid" > 
  <div class = "span12" > 
    Livellu 1 di a colonna
    <div class = "row-fluid" > 
      <div class = "span6" > Livellu 2 </div> 
      <div class = "span6" > Livellu 2 </div> 
    </div>
  </div>
</div>

Variabili in LESS

Custruitu in Bootstrap sò una manciata di variabili per persunalizà u sistema di griglia 940px predeterminatu, documentatu sopra. Tutte e variàbili per a griglia sò guardati in variables.less.

Cumu persunalizà

Mudificà a griglia significa cambià e trè @grid*variàbili è recompilà Bootstrap. Cambiate e variàbili di griglia in variables.less è utilizate una di e quattru manere documentate per recompilà . Sè aghjunghje più colonne, assicuratevi di aghjunghje u CSS per quelli in grid.less.

Stà rispunsevuli

A persunalizazione di a griglia funziona solu à u livellu predeterminatu, a griglia 940px. Per mantene l'aspettu responsive di Bootstrap, avete ancu persunalizà e griglie in responsive.less.

Disposizione fissa

U layout predeterminatu è simplice 940px-wide, centratu per quasi ogni situ web o pagina furnita da un unicu <div class="container">.

<corpu>
  <div class = "container" > 
    ...
  </div>
</corpu>

Disposizione fluida

<div class="container-fluid">dà una struttura di pagina flessibile, larghezza minima è massima, è una barra laterale di manca. Hè grande per app è documenti.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Cuntinutu di a barra laterale-->
    </div>
    <div class = "span10" > 
      <!--Cuntinutu corpu-->
    </div>
  </div>
</div>

Dispositivi supportati

Bootstrap supporta una manciata di dumande di media in un unicu schedariu per aiutà à fà i vostri prughjetti più apprupriati in diversi dispositi è risoluzioni di schermu. Eccu ciò chì hè inclusu:

Richiede meta tag

Per assicurà chì i dispositi mostranu e pagine responsive currettamente, include u meta tag viewport.

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

Chì facenu

E dumande di media permettenu un CSS persunalizatu basatu annantu à una quantità di cundizioni - rapporti, larghezze, tippu di visualizazione, etc. - ma di solitu si focalizeghja intornu min-widthè max-width.

• Mudificà a larghezza di a colonna in a nostra griglia
• Stack elementi invece di float induve necessariu
• Resize headings è testu per esse più apprupriati per i dispositi

Bootstrap ùn include micca automaticamente queste dumande di media, ma capisce è aghjunghje hè assai faciule è richiede una configurazione minima. Avete uni pochi d'opzioni per cumprendi e funzioni responsive di Bootstrap:

1. Aduprate a versione responsive compilata, bootstrap-responsive.css
2. Aghjunghjite @import "responsive.less" è ricompilate Bootstrap
3. Mudificà è recompilà responsive.less cum'è un schedariu separatu

Perchè micca solu include? A verità à dì, micca tuttu deve esse responsive. Invece di incuragisce i sviluppatori à caccià sta funzione, ci hè megliu per attivà.

  // Telefoni di paisaghju è giù
  @media ( max - larghezza : 480px ) { ... }     
 
  // Landscape phone to portrait tablet
  @media ( max - larghezza : 768px ) { ... }     
 
  // Tavuletta di ritrattu à u paisaghju è u desktop
  @media ( larghezza minima : 768px ) è ( larghezza massima : 980px ) { ... } _ _        
 
  // Grande desktop
  @media ( min - larghezza : 1200px ) { .. }