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

Ugnezdene vrstice morajo vsebovati nabor stolpcev, ki se seštejejo s številom stolpcev nadrejenega. Na primer, dva ugnezdena .span3stolpca je treba postaviti znotraj .span6.

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

Odstotki, ne piksli

Sistem tekoče mreže uporablja odstotke za širine stolpcev namesto fiksnih slikovnih pik. Ima tudi enake odzivne različice kot naš sistem s fiksno mrežo, kar zagotavlja ustrezna razmerja za ključne ločljivosti zaslona in naprave.

Tekoče vrstice

Naredite katero koli vrsto tekočo preprosto tako, da jo spremenite .rowv .row-fluid. Stolpci ostanejo popolnoma enaki, zaradi česar je preklapljanje med fiksno in tekočo postavitvijo zelo preprosto.

Markup

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

Gnezdenje s tekočimi mrežami je nekoliko drugačno: ni treba, da se število ugnezdenih stolpcev ujema z nadrejenim. Namesto tega so vaši stolpci ponastavljeni na vsaki ravni, ker vsaka vrstica zaseda 100 % nadrejenega stolpca.

<div class = "row-fluid" > 
  <div class = "span12" > 
    1. raven stolpca
    <div class = "row-fluid" > 
      <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 v eni datoteki, s čimer pomaga narediti vaše projekte primernejše za različne naprave in ločljivosti zaslona. Tukaj je vključeno:

Zahteva meta oznako

Če želite zagotoviti, da naprave pravilno prikazujejo odzivne strani, vključite metaoznako vidnega polja.

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

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 datoteko

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 : 980 slikovnih pik ) { ... }        
 
  // Veliko namizje
  @media ( najmanjša širina : 1200 slikovnih pik ) { .. }