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

Ugniježđeni redovi trebaju uključivati ​​skup stupaca koji zbrajaju broj stupaca svog roditelja. Na primjer, dva ugniježđena .span3stupca trebaju biti postavljena unutar .span6.

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

Postoci, ne pikseli

Sustav fluidne mreže koristi postotke za širine stupaca umjesto fiksnih piksela. Također ima iste responzivne varijacije kao naš sustav fiksne mreže, osiguravajući odgovarajuće proporcije za ključne rezolucije zaslona i uređaje.

Tekući redovi

Učinite bilo koji red tekućim jednostavnom promjenom .rowu .row-fluid. Stupci ostaju potpuno isti, što čini vrlo jednostavnim prebacivanje između fiksnih i fluidnih izgleda.

Markup

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

Gniježđenje s fluidnim mrežama malo je drugačije: broj ugniježđenih stupaca ne mora odgovarati roditelju. Umjesto toga, vaši se stupci poništavaju na svakoj razini jer svaki redak zauzima 100% nadređenog stupca.

<div class = "row-fluid" > 
  <div class = "span12" > 
    Razina 1 stupca
    <div class = "row-fluid" > 
      <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 izgled

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 u jednoj datoteci kako bi vaši projekti bili prikladniji za različite uređaje i razlučivosti zaslona. Evo što je uključeno:

Zahtijeva meta oznaku

Kako biste osigurali da uređaji pravilno prikazuju responzivne stranice, uključite meta oznaku okvira prikaza.

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

Š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 zasebnu datoteku

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 : 980px ) { ... }        
 
  // Velika radna površina
  @media ( min - širina : 1200px ) { .. }