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ð 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.
- <div class = "röð" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
Með kyrrstöðu (óvökva) ristkerfinu í Bootstrap er varpið auðvelt. Til að hreiðra efnið þitt skaltu bara bæta við nýjum .row
og setti af .span*
dálkum innan núverandi .span*
dálks.
Hreiður línur ættu að innihalda safn dálka sem leggja saman við fjölda dálka foreldris þess. Til dæmis .span3
ætti að setja tvo hreiðra dálka innan .span6
.
- <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>
Vökvaritakerfið notar prósentur fyrir dálkabreidd í stað fastra punkta. Það hefur einnig sömu móttækilega afbrigði og fasta netkerfi okkar, sem tryggir rétt hlutföll fyrir helstu skjáupplausnir og tæki.
Gerðu hvaða röð sem er vökva einfaldlega með því að breyta .row
í .row-fluid
. Dálkarnir haldast nákvæmlega eins, sem gerir það mjög einfalt að fletta á milli fastra og fljótandi skipulags.
- <div class = "row-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Hreiður með vökvaristum er svolítið öðruvísi: fjöldi hreiðra dálka þarf ekki að passa við foreldri. Þess í stað eru dálkarnir þínir endurstilltir á hverju stigi vegna þess að hver röð tekur 100% af yfirdálknum.
- <div class = "row-fluid" >
- <div class = "span12" >
- Stig 1 dálks
- <div class = "row-fluid" >
- <div class = "span6" > Stig 2 </div>
- <div class = "span6" > Stig 2 </div>
- </div>
- </div>
- </div>
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 |
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.
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.
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.
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>
<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>
Bootstrap styður handfylli af miðlunarfyrirspurnum í einni skrá til að hjálpa til við að gera verkefnin þín meira viðeigandi á mismunandi tækjum og skjáupplausnum. 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 979px | 42px | 20px |
Sjálfgefið | 980px og upp | 60px | 20px |
Stór skjár | 1210px og upp | 70px | 30px |
Til að tryggja að tæki birti móttækilegar síður á réttan hátt skaltu láta lýsimerki útsýnisins fylgja með.
- <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
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-width
og max-width
.
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:
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 : 980px ) { ... } _ _
- // Stórt skjáborð
- @media ( mín - breidd : 1200px ) { .. }