Podrazumevani sistem mreže koji je obezbeđen kao deo Bootstrapa je mreža sa 12 kolona širine 940 piksela .

Takođe ima četiri varijacije sa odzivom za različite uređaje i rezolucije: telefon, portret tableta, pejzaž stola i male radne površine, i velike radne površine širokog ekrana.

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

Kao što je ovde prikazano, osnovni raspored se može kreirati sa dve "kolone", od kojih svaka obuhvata niz od 12 osnovnih kolona koje smo definisali kao deo našeg sistema mreže.

Sa statičnim (nefluidnim) grid sistemom u Bootstrapu, ugniježđenje je jednostavno. Da ugnijezdite svoj sadržaj, samo dodajte novi .rowi skup .span*kolona unutar postojeće .span*kolone.

Primjer

<div class = "red" > 
  <div class = "span12" > 
    Nivo 1 kolone
    <div class = "red" > 
      <div class = "span6" > Nivo 2 </div> 
      <div class = "span6" > Nivo 2 </div> 
    </div>
  </div>
</div>

Varijable u LESS

U Bootstrap je ugrađeno nekoliko varijabli za prilagođavanje zadanog sistema mreže od 940px, dokumentirano gore. Sve varijable za mrežu su pohranjene u varijabli.less.

Kako prilagoditi

Modifikacija mreže znači promjenu tri @grid*varijable i ponovno kompajliranje Bootstrapa. Promijenite varijable mreže u varijabli.less i koristite jedan od četiri dokumentirana načina za ponovno kompajliranje . Ako dodajete još kolona, ​​obavezno dodajte CSS za one u grid.less.

Ostanite odgovorni

Prilagođavanje mreže radi samo na zadanom nivou, mreži od 940px. Da biste zadržali responzivne aspekte Bootstrapa, također ćete morati prilagoditi mreže u responsive.less.

Fiksni raspored

Zadani i jednostavan 940px širok, centriran izgled za gotovo bilo koju web stranicu ili stranicu koju pruža jedan <div class="container">.

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

Fluidni raspored

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

<div class = "kontejner-fluid" > 
  <div class = "red-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 na različitim uređajima i rezolucijama ekrana. Evo šta je uključeno:

Ono što oni rade

Medijski upiti omogućavaju prilagođeni CSS na osnovu brojnih uslova – omjera, širine, tipa prikaza, itd. – ali se obično fokusira na min-widthi max-width.

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

Bootstrap ne uključuje automatski ove medijske upite, ali njihovo razumijevanje i dodavanje je vrlo jednostavno i zahtijeva minimalno podešavanje. Imate nekoliko opcija za uključivanje responzivnih funkcija Bootstrapa:

1. Koristite kompajliranu responzivnu verziju, bootstrap-responsive.css
2. Dodajte @import "responsive.less" i ponovo kompajlirajte Bootstrap
3. Izmijenite i ponovo kompajlirajte responsive.less kao zasebno

Zašto ga jednostavno ne uključiti? Istini za volju, ne mora sve biti odgovorno. Umjesto da ohrabrujemo programere da uklone ovu funkciju, smatramo da je najbolje da je omogućimo.

  // Landscape phones and down
  @media ( max - širina : 480px ) { ... }     
 
  // Pejzažni telefon u portret tablet
  @media ( max - širina : 768px ) { ... }     
 
  // Portret tableta na pejzaž i desktop
  @media ( min - širina : 768px ) i ( max - širina : 940 px ) { ... }        
 
  // Velika radna površina
  @media ( min - širina : 1200px ) { .. }