Bootstrap

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.

Alþjóðlegir stílar fyrir CSS endurstillingu, leturfræði og tengla

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.

  1. <!DOCTYPE html>
  2. <html lang = "is" > 
  3.   ...
  4. </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ð ristkerfi 12 dálkar með móttækilegu ívafi

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

  1. <div class = "röð" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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
4 á móti 4
3 á móti 3
3 á móti 3
8 á móti 4 
  1. <div class = "röð" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </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
Stig 2 
  1. <div class = "röð" > 
  2.   <div class = "span12" > 
  3.     Stig 1 dálks
  4.     <div class = "röð" > 
  5.       <div class = "span6" > Stig 2 </div> 
  6.       <div class = "span6" > Stig 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Vökvakerfi 12 móttækilegir, prósentutengdir dálkar

Vökvasúlur

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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
Vökvi 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Stig 1 dálks
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Stig 2 </div> 
  6.       <div class = "span6" > Stig 2 </div> 
  7.     </div>
  8.   </div>
  9. </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.

Útlit Grunnsniðmát til að búa til vefsíður

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

  1. <líkami>
  2.   <div class = "gámur" > 
  3.     ...
  4.   </div>
  5. </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.

  1. <div class = "ílát-vökvi" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!-- Efni hliðarstikunnar-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Meðal innihald-->
  8.     </div>
  9.   </div>
  10. </div>

Móttækileg hönnun Fjölmiðlafyrirspurnir fyrir ýmis tæki og upplausnir

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

  1. <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:

  1. Notaðu samsettu móttækilegu útgáfuna, bootstrap-responsive.css
  2. Bættu við @import „responsive.less“ og settu saman Bootstrap aftur
  3. 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.

  1.   // Landslagssímar og niður
  2.   @media ( hámarksbreidd : 480px ) { ... } _ _     
  3.  
  4.   // Landslagssími í andlitsmynd spjaldtölvu
  5.   @media ( hámarksbreidd : 768px ) { ... } _ _     
  6.  
  7.   // Portrait spjaldtölva yfir í landslag og skjáborð
  8.   @media ( mín - breidd : 768px ) og ( hámarksbreidd : 980px ) { ... } _ _        
  9.  
  10.   // Stórt skjáborð
  11.   @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
.visible-tablet Sýnilegt
.visible-desktop Sýnilegt
.hidden-phone Sýnilegt Sýnilegt
.hidden-tablet Sýnilegt Sýnilegt
.hidden-desktop Sýnilegt Sýnilegt

Prófunarmál

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

Sýnist á...

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

Falinn á...

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