Sistemul de grilă implicit furnizat ca parte a Bootstrap este o grilă de 940 de pixeli, cu 12 coloane .

De asemenea, are patru variante receptive pentru diferite dispozitive și rezoluții: telefon, portret tabletă, peisaj de masă și desktopuri mici și desktopuri cu ecran lat de mari dimensiuni.

<div class = "rând" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

După cum se arată aici, un aspect de bază poate fi creat cu două „coloane”, fiecare acoperind un număr dintre cele 12 coloane de bază pe care le-am definit ca parte a sistemului nostru de grilă.

Cu sistemul de grilă static (non-fluid) din Bootstrap, imbricarea este ușoară. Pentru a-ți imbrica conținutul, trebuie doar să adaugi un nou .rowși un set de .span*coloane într-o .span*coloană existentă.

Exemplu

<div class = "rând" > 
  <div class = "span12" > 
    Nivelul 1 al coloanei
    <div class = "rând" > 
      <div class = "span6" > Nivelul 2 </div> 
      <div class = "span6" > Nivelul 2 </div> 
    </div>
  </div>
</div>

Variabile în LESS

În Bootstrap sunt încorporate o mână de variabile pentru personalizarea sistemului de grilă implicit de 940px, documentat mai sus. Toate variabilele pentru grilă sunt stocate în variabile.mai puțin.

Cum să personalizezi

Modificarea grilei înseamnă schimbarea celor trei @grid*variabile și recompilarea Bootstrap. Schimbați variabilele grilei în variabile.less și utilizați una dintre cele patru moduri documentate pentru a recompila . Dacă adăugați mai multe coloane, asigurați-vă că adăugați CSS-ul pentru cele din grid.less.

Rămâi receptiv

Personalizarea grilei funcționează doar la nivelul implicit, grila de 940 px. Pentru a menține aspectele receptive ale Bootstrap, va trebui, de asemenea, să personalizați grilele în responsive.less.

Aspect fix

Aspectul prestabilit și simplu, lat de 940 px, centrat, pentru aproape orice site web sau pagină furnizată de un singur <div class="container">.

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

Dispunerea fluidului

<div class="container-fluid">oferă o structură flexibilă a paginii, lățimi minime și maxime și o bară laterală din stânga. Este grozav pentru aplicații și documente.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Conținut din bara laterală-->
    </div>
    <div class = "span10" > 
      <!--Conținutul corpului-->
    </div>
  </div>
</div>

Dispozitive acceptate

Bootstrap acceptă o serie de interogări media pentru a vă ajuta să vă faceți proiectele mai adecvate pe diferite dispozitive și rezoluții de ecran. Iată ce este inclus:

Ce fac ei

Interogările media permit CSS personalizat bazat pe o serie de condiții — rapoarte, lățimi, tip de afișare etc. — dar se concentrează de obicei în jurul min-widthși max-width.

• Modificați lățimea coloanei din grila noastră
• Stivuiți elementele în loc de plutiți oriunde este necesar
• Redimensionați titlurile și textul pentru a fi mai potrivite pentru dispozitive

Bootstrap nu include automat aceste interogări media, dar înțelegerea și adăugarea lor este foarte ușoară și necesită o configurare minimă. Aveți câteva opțiuni pentru a include funcțiile de răspuns ale Bootstrap:

1. Utilizați versiunea responsive compilată, bootstrap-responsive.css
2. Adăugați @import „responsive.less” și recompilați Bootstrap
3. Modificați și recompilați responsive.less ca separat

De ce nu o includeți? Adevărul să fie spus, nu totul trebuie să fie receptiv. În loc să încurajăm dezvoltatorii să elimine această caracteristică, considerăm că este mai bine să o activăm.

  // Peisaj telefoane și jos
  @media ( latime maxima : 480 px ) { ... }     
 
  // Telefon peisaj către tabletă portret
  @media ( latime maxima : 768 px ) { ... }     
 
  // Tabletă portret către peisaj și desktop
  @media ( lățime minimă : 768 px ) și ( lățime maximă : 940 px ) { ... }        
 
  // Desktop mare
  @media ( min - lățime : 1200px ) { .. }