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.

Krefst HTML5 doctype

Bootstrap notar HTML þætti og CSS eiginleika sem krefjast notkunar á HTML5 doctype. Vertu viss um að hafa það með í upphafi hverrar Bootstraped síðu í verkefninu þínu.

<!DOCTYPE html>
<html lang = "is" > 
  ...
</html>

Leturfræði og tenglar

Innan scaffolding.less skráarinnar setjum við grunn alþjóðlega birtingarmynd, leturfræði og tenglastíla. Nánar tiltekið, við:

Fjarlægðu brúnina á líkamanum
Sett background-color: white;ábody
Notaðu eiginleikana @baseFontFamily, @baseFontSize, og @baseLineHeightsem leturfræðigrunn okkar
Stilltu alþjóðlega tengilitinn í gegnum @linkColorog notaðu aðeins undirstrikun tengla á:hover

Endurstilla með Normalize

Frá og með Bootstrap 2 hefur hefðbundin CSS endurstilling þróast til að nýta þætti frá Normalize.css , verkefni eftir Nicolas Gallagher sem knýr einnig HTML5 Boilerplate .

Nýju endurstillinguna er enn að finna í reset.less , en með mörgum þáttum fjarlægðir til styttingar og nákvæmni.

Sjálfgefið netkerfi sem er í Bootstrap notar 12 dálka sem birtast á breiddum 724px, 940px (sjálfgefið án móttækilegs CSS innifalinn) og 1170px. Fyrir neðan 767px útsýnisgáttir verða súlurnar fljótandi og staflast lóðrétt.

<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

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.

Stig 1 dálks

Stig 2

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

Vökvasúlur

Prósentur, ekki pixlar

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.

Vökva raðir

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.

Markup

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

Vökvavarp

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.

Vökvi 12

Vökvi 6

<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

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>

Móttækileg tæki

Þ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

Notaðu fjölmiðlafyrirspurnir á ábyrgan hátt og aðeins sem byrjun á farsímaáhorfendum þínum. Fyrir stærri verkefni skaltu íhuga sérstaka kóðagrunna en ekki lög af fjölmiðlafyrirspurnum.

Stuðningur tæki

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
Snjallsímar í spjaldtölvur	767px og undir	Vökvasúlur, engar fastar breiddir
Portrett spjaldtölvur	768px og yfir	42px	20px
Sjálfgefið	980px og upp	60px	20px
Stór skjár	1200px og upp	70px	30px

Krefst meta tags

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

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
Breyttu og endursettu responsive.less sem aðskilin skrá

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 til spjaldtölvu í andlitsmynd */
  @media ( hámarksbreidd : 767px ) { ... } _ _     
 
  /* Portrait spjaldtölvu yfir í landslag og skjáborð */
  @media ( mín - breidd : 768px ) og ( hámarksbreidd : 979px ) { ... } _ _        
 
  /* Stórt skjáborð */
  @media ( mín - breidd : 1200px ) { ... }

Móttækilegur gagnsemi flokkar

Hvað eru þeir

Til að fá hraðari farsímavænni þróun, notaðu þessa grunnbúnaðarflokka til að sýna og fela efni eftir tæki.

Hvenær á að nota

Notaðu takmarkað og forðastu að búa til gjörólíkar útgáfur af sömu síðu. Notaðu þær í staðinn til að bæta við kynningu hvers tækis.

Til dæmis gætirðu sýnt <select>þátt fyrir nav á farsímaútliti, en ekki á spjaldtölvum eða borðtölvum.

Stuðningsnámskeið

Hér er sýnd tafla yfir flokka sem við styðjum og áhrif þeirra á tiltekið útlit fjölmiðlafyrirspurna (merkt eftir tæki). Þær má finna í responsive.less.

bekk	Símar480px og undir	Spjaldtölvur767px og undir	Skrifborð768px og yfir
`.visible-phone`	Sýnilegt	Falið	Falið
`.visible-tablet`	Falið	Sýnilegt	Falið
`.visible-desktop`	Falið	Falið	Sýnilegt
`.hidden-phone`	Falið	Sýnilegt	Sýnilegt
`.hidden-tablet`	Sýnilegt	Falið	Sýnilegt
`.hidden-desktop`	Sýnilegt	Sýnilegt	Falið

Prófunarmál

Breyttu stærð vafrans þíns eða hlaðið á mismunandi tæki til að prófa ofangreinda flokka.

Sýnist á...

Grænir hakmerki gefa til kynna að bekkurinn sé sýnilegur í núverandi útsýnisglugga.

Sími✔ Sími
Spjaldtölva✔ Spjaldtölva
Skrifborð✔ Skrifborð

Falinn á...

Hér gefa grænt hak til kynna að flokkurinn sé falinn í núverandi útsýnisglugga.

Sími✔ Sími
Spjaldtölva✔ Spjaldtölva
Skrifborð✔ Skrifborð