Zadani sustav rešetki koji je dio Bootstrapa je rešetka širine 940 piksela s 12 stupaca .

Također ima četiri responzivne varijante za različite uređaje i razlučivosti: telefon, tablet portret, stolni krajolik i male stolne površine te velike široke radne površine.

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

Kao što je ovdje prikazano, osnovni izgled može se stvoriti s dva "stupca", od kojih svaki obuhvaća određeni broj od 12 temeljnih stupaca koje smo definirali kao dio našeg mrežnog sustava.

Sa statičnim (nefluidnim) grid sustavom u Bootstrapu, gniježđenje je jednostavno. Da biste ugniježdili svoj sadržaj, samo dodajte novi .rowi skup .span*stupaca unutar postojećeg .span*stupca.

Primjer

<div class = "row" > 
  <div class = "span12" > 
    Razina 1 stupca
    <div class = "row" > 
      <div class = "span6" > Razina 2 </div> 
      <div class = "span6" > Razina 2 </div> 
    </div>
  </div>
</div>

Varijable u LESS

U Bootstrap je ugrađeno nekoliko varijabli za prilagodbu zadanog sustava rešetki od 940 piksela, dokumentiranih gore. Sve varijable za grid su pohranjene u variables.less.

Kako prilagoditi

Modificiranje mreže znači promjenu triju @grid*varijabli i ponovno kompajliranje Bootstrapa. Promijenite varijable rešetke u variables.less i upotrijebite jedan od četiri dokumentirana načina za ponovno prevođenje . Ako dodajete više stupaca, svakako dodajte CSS za one u grid.less.

Ostati osjetljiv

Prilagodba mreže radi samo na zadanoj razini, mreži od 940 piksela. Da biste zadržali responzivne aspekte Bootstrapa, također ćete morati prilagoditi rešetke u responsive.less.

Fiksni raspored

Zadani i jednostavni raspored širine 940 piksela, centriran za bilo koje web mjesto ili stranicu koju pruža jedan <div class="container">.

<tijelo>
  <div class = "container" > 
    ...
  </div>
</body>

Fluidni raspored

<div class="container-fluid">daje fleksibilnu strukturu stranice, minimalnu i maksimalnu širinu i bočnu traku s lijeve strane. Izvrstan je za aplikacije i dokumente.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Sadržaj bočne trake-->
    </div>
    <div class = "span10" > 
      <!--Sadržaj tijela-->
    </div>
  </div>
</div>

Podržani uređaji

Bootstrap podržava pregršt medijskih upita kako bi vaši projekti bili prikladniji za različite uređaje i razlučivosti zaslona. Evo što je uključeno:

Što oni rade

Medijski upiti dopuštaju prilagođeni CSS na temelju niza uvjeta—omjera, širine, vrste prikaza itd.—ali obično se fokusiraju na min-widthi max-width.

• Promijenite širinu stupca u našoj mreži
• Složite elemente umjesto da plutaju gdje god je to potrebno
• Promijenite veličinu naslova i teksta kako bi bili prikladniji za uređaje

Bootstrap ne uključuje automatski te medijske upite, ali njihovo razumijevanje i dodavanje vrlo je jednostavno i zahtijeva minimalno postavljanje. Imate nekoliko opcija za uključivanje responzivnih značajki Bootstrapa:

1. Koristite kompiliranu responzivnu verziju, bootstrap-responsive.css
2. Dodajte @import "responsive.less" i ponovno kompajlirajte Bootstrap
3. Izmijenite i ponovno kompajlirajte responsive.less kao zasebni

Zašto ga jednostavno ne uključiti? Istini za volju, ne mora sve biti osjetljivo. Umjesto da potičemo programere da uklone ovu značajku, smatramo da je najbolje omogućiti je.

  // Vodoravni telefoni i dolje
  @media ( max - width : 480px ) { ... }     
 
  // Vodoravni telefon u portretni tablet
  @media ( max - width : 768px ) { ... }     
 
  // Portret tableta u pejzaž i radnu površinu
  @media ( min . širina : 768px ) i ( maks . širina : 940px ) { ... }        
 
  // Velika radna površina
  @media ( min - širina : 1200px ) { .. }