Vinnupallar

Bootstrap er byggt á móttækilegu 12 dálka rist. Við höfum einnig sett upp skipulag með fastri og vökvabreidd sem byggir á því kerfi.

Sjálfgefið 940px rist

Sjálfgefið töflukerfi sem er hluti af Bootstrap er 940px breitt, 12 dálka rist .

Það hefur einnig fjögur móttækileg afbrigði fyrir ýmis tæki og upplausnir: síma, spjaldtölvumynd, landslagsborð og lítil skjáborð og stór breiðskjáborð.

<div class = "röð" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Eins og sýnt er hér er hægt að búa til grunnskipulag með tveimur „dálkum“, sem hver spannar fjölda af þeim 12 grunndálkum sem við skilgreindum sem hluta af netkerfi okkar.

Á móti dálkum

4 á móti 4

3 á móti 3

8 á móti 4

<div class = "röð" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

Hreiður súlur

Með kyrrstöðu (óvökva) ristkerfinu í Bootstrap er varpið auðvelt. Til að hreiðra efnið þitt skaltu bara bæta við nýjum .rowog setti af .span*dálkum innan núverandi .span*dálks.

Dæmi

Stig 1 dálks

Stig 2

<div class = "röð" > 
  <div class = "span12" > 
    Stig 1 dálks
    <div class = "röð" > 
      <div class = "span6" > Stig 2 </div> 
      <div class = "span6" > Stig 2 </div> 
    </div>
  </div>
</div>

Aðlögun nets

Breytilegt	Sjálfgefið gildi	Lýsing
`@gridColumns`	12	Fjöldi dálka
`@gridColumnWidth`	60px	Breidd hvers dálks
`@gridGutterWidth`	20px	Neikvætt bil á milli dálka
`@siteWidth`	Reiknuð summa allra dálka og renna	Telur fjölda dálka og þakrenna til að stilla breidd `.container-fixed()`blöndunnar

Breytur í LESS

Innbyggt í Bootstrap eru handfylli af breytum til að sérsníða sjálfgefna 940px ristkerfið, skjalfest hér að ofan. Allar breytur fyrir ristina eru geymdar í variables.less.

Hvernig á að sérsníða

Breyting á rist þýðir að breyta þremur @grid*breytum og endursamsetja Bootstrap. Breyttu grid breytunum í variables.less og notaðu eina af fjórum leiðum sem skráðar eru til að setja saman aftur . Ef þú ert að bæta við fleiri dálkum, vertu viss um að bæta við CSS fyrir þá sem eru í grid.less.

Vera móttækilegur

Sérsnið á ristinni virkar aðeins á sjálfgefnu stigi, 940px ristinni. Til að viðhalda móttækilegum þáttum Bootstrap þarftu líka að sérsníða ristina í responsive.less.

Fast skipulag

Sjálfgefið og einfalt 940px-breitt, miðja skipulag fyrir nánast hvaða vefsíðu eða síðu sem er frá einni <div class="container">.

<líkami>
  <div class = "gámur" > 
    ...
  </div>
</body>

Vökvaskipulag

<div class="container-fluid">gefur sveigjanlega síðubyggingu, lágmarks- og hámarksbreidd og vinstri hliðarstiku. Það er frábært fyrir forrit og skjöl.

<div class = "ílát-vökvi" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!-- Efni hliðarstikunnar-->
    </div>
    <div class = "span10" > 
      <!--Meðal innihald-->
    </div>
  </div>
</div>

Stuðningur tæki

Bootstrap styður handfylli af miðlunarfyrirspurnum til að hjálpa til við að gera verkefnin þín viðeigandi fyrir mismunandi tæki og skjáupplausnir. Hér er það sem er innifalið:

Merki	Skipulagsbreidd	Dálkbreidd	Rennur breidd
Snjallsímar	480px og undir	Vökvasúlur, engar fastar breiddir
Portrett spjaldtölvur	480px til 768px	Vökvasúlur, engar fastar breiddir
Landslagstöflur	768px til 940px	44px	20px
Sjálfgefið	940px og upp	60px	20px
Stór skjár	1210px og upp	70px	30px

Það sem þeir gera

Fjölmiðlafyrirspurnir leyfa sérsniðið CSS byggt á fjölda skilyrða - hlutföllum, breiddum, skjágerð osfrv. - en einbeitir sér venjulega að min-widthog max-width.

Breyttu breidd dálks í ristinni okkar
Stafla þætti í stað þess að fljóta þar sem þörf krefur
Breyttu stærð fyrirsagna og texta til að henta betur fyrir tæki

Notkun fjölmiðlafyrirspurna

Bootstrap inniheldur ekki sjálfkrafa þessar fjölmiðlafyrirspurnir, en það er mjög auðvelt að skilja og bæta þeim við og krefst lágmarks uppsetningar. Þú hefur nokkra möguleika til að innihalda móttækilega eiginleika Bootstrap:

Notaðu samsettu móttækilegu útgáfuna, bootstrap-responsive.css
Bættu við @import „responsive.less“ og settu saman Bootstrap aftur
Breyta og setja saman responsive.less sem aðskilið

Af hverju ekki bara að setja það inn? Satt best að segja þarf ekki allt að vera móttækilegt. Í stað þess að hvetja forritara til að fjarlægja þennan eiginleika teljum við best að virkja hann.

  // Landslagssímar og niður
  @media ( hámarksbreidd : 480px ) { ... } _ _     
 
  // Landslagssími í andlitsmynd spjaldtölvu
  @media ( hámarksbreidd : 768px ) { ... } _ _     
 
  // Portrait spjaldtölva yfir í landslag og skjáborð
  @media ( mín - breidd : 768px ) og ( hámarksbreidd : 940px ) { ... } _ _        
 
  // Stórt skjáborð
  @media ( mín - breidd : 1200px ) { .. }