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

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>

Comu mostra quì, un layout basicu 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, nidificazione hè faciule. Per nidificà u vostru cuntenutu, basta aghjunghje un novu .rowè un set di .span*colonne in una colonna esistente .span*.

Esempiu

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

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

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 per aiutà à fà i vostri prughjetti più apprupriati in diversi dispositi è risoluzioni di schermu. Eccu ciò chì hè inclusu:

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 and text to be more appropriate for devices

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 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 ) { ... }     
 
  // Paisaghju telefonu à tavuletta ritrattu
  @media ( max - larghezza : 768px ) { ... }     
 
  // Tavuletta di ritrattu à u paisaghju è u desktop
  @media ( larghezza minima : 768px ) è ( larghezza massima : 940px ) { ... } _ _        
 
  // Grande desktop
  @media ( min - larghezza : 1200px ) { .. }