Privzeti mrežni sistem, ki je del Bootstrapa, je mreža z 12 stolpci širine 940 slikovnih pik .

Ima tudi štiri odzivne različice za različne naprave in ločljivosti: telefon, tablični računalnik pokončno, namizno ležeče in majhna namizja ter velika širokozaslonska namizja.

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

Kot je prikazano tukaj, je mogoče ustvariti osnovno postavitev z dvema "stolpcema", od katerih vsak zajema več od 12 temeljnih stolpcev, ki smo jih definirali kot del našega mrežnega sistema.

S statičnim (nefluidnim) mrežnim sistemom v Bootstrapu je gnezdenje preprosto. Če želite ugnezditi svojo vsebino, samo dodajte nov .rowin nabor .span*stolpcev znotraj obstoječega .span*stolpca.

Primer

<div class = "row" > 
  <div class = "span12" > 
    1. raven stolpca
    <div class = "row" > 
      <div class = "span6" > 2. stopnja </div> 
      <div class = "span6" > 2. stopnja </div> 
    </div>
  </div>
</div>

Spremenljivke v LESS

V Bootstrap je vgrajena peščica spremenljivk za prilagoditev privzetega sistema mreže 940 slikovnih pik, ki je dokumentiran zgoraj. Vse spremenljivke za mrežo so shranjene v variables.less.

Kako prilagoditi

Spreminjanje mreže pomeni spreminjanje treh @grid*spremenljivk in ponovno prevajanje Bootstrapa. Spremenite spremenljivke mreže v variables.less in uporabite enega od štirih dokumentiranih načinov za ponovno prevajanje . Če dodajate več stolpcev, ne pozabite dodati CSS za tiste v grid.less.

Ostati odziven

Prilagoditev mreže deluje samo na privzeti ravni, mreži 940 slikovnih pik. Če želite ohraniti odzivne vidike Bootstrapa, boste morali prilagoditi tudi mreže v responsive.less.

Fiksna postavitev

Privzeta in preprosta 940 slikovnih pik široka, sredinska postavitev za skoraj vsako spletno mesto ali stran, ki jo ponuja en sam <div class="container">.

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

Tekoča postavitev

<div class="container-fluid">ponuja prilagodljivo strukturo strani, najmanjšo in največjo širino ter levo stransko vrstico. Odličen je za aplikacije in dokumente.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Vsebina stranske vrstice-->
    </div>
    <div class = "span10" > 
      <!--Vsebina telesa-->
    </div>
  </div>
</div>

Podprte naprave

Bootstrap podpira peščico medijskih poizvedb, ki pomagajo narediti vaše projekte primernejše za različne naprave in ločljivosti zaslona. Tukaj je vključeno:

Kaj počnejo

Medijske poizvedbe omogočajo CSS po meri na podlagi številnih pogojev – razmerij, širin, vrste prikaza itd. – vendar se običajno osredotočajo na min-widthin max-width.

• Spremenite širino stolpca v naši mreži
• Zložite elemente namesto lebdenja, kjer koli je to potrebno
• Spremenite velikost naslovov in besedila, da bodo bolj primerni za naprave

Bootstrap teh medijskih poizvedb ne vključi samodejno, vendar je njihovo razumevanje in dodajanje zelo enostavno in zahteva minimalno nastavitev. Na voljo imate nekaj možnosti za vključitev odzivnih funkcij programa Bootstrap:

1. Uporabite prevedeno odzivno različico, bootstrap-responsive.css
2. Dodajte @import "responsive.less" in znova prevedite Bootstrap
3. Spremenite in znova prevedite responsive.less kot ločeno

Zakaj ga preprosto ne bi vključili? Resnici na ljubo ni treba, da je vse odzivno. Namesto da razvijalce spodbujamo k odstranitvi te funkcije, se nam zdi najbolje, da jo omogočimo.

  // Ležeči telefoni in navzdol
  @media ( max - width : 480px ) { ... }     
 
  // Ležeči telefon v pokončni tablični računalnik
  @media ( max - širina : 768px ) { ... }     
 
  // Pokončna tablica v ležečo in namizje
  @media ( najmanjša širina : 768 slikovnih pik ) in ( največja širina : 940 slikovnih pik ) { ... }        
 
  // Veliko namizje
  @media ( najmanjša širina : 1200 slikovnih pik ) { .. }