Vinnupallar

Krefst HTML5 doctype

Bootstrap notar ákveðna HTML þætti og CSS eiginleika sem krefjast notkunar á HTML5 doctype. Láttu það fylgja með í upphafi allra verkefna þinna.

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

Leturfræði og tenglar

Bootstrap setur helstu alþjóðlega skjámynd, leturfræði og tenglastíla. Nánar tiltekið, við:

Fjarlægðu marginá líkamann
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

Þessa stíla má finna innan scaffolding.less .

Endurstilla með Normalize

Með Bootstrap 2 hefur gamla endurstillingarblokkinni verið sleppt í þágu Normalize.css , verkefni Nicolas Gallagher og Jonathan Neal sem knýr einnig HTML5 Boilerplate . Þó að við notum mikið af Normalize í reset.less , höfum við fjarlægt nokkra þætti sérstaklega fyrir Bootstrap.

Dæmi um lifandi rist

Sjálfgefið Bootstrap kerfi notar 12 dálka , sem gerir 940px breiðan ílát án móttækilegra eiginleika virkt. Með móttækilegu CSS-skránni bætt við, aðlagast ristið að vera 724px og 1170px breitt, allt eftir útsýnissvæðinu þínu. Fyrir neðan 767px útsýnisgáttir verða súlurnar fljótandi og staflast lóðrétt.

Grunnnet HTML

Fyrir einfalda tveggja dálka skipulag, búðu til .rowog bættu við viðeigandi fjölda .span*dálka. Þar sem þetta er 12 dálka hnitanet .span*spannar hver og einn fjölda af þessum 12 dálkum og ætti alltaf að leggja saman allt að 12 fyrir hverja línu (eða fjölda dálka í foreldri).

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

Miðað við þetta dæmi höfum við .span4og .span8, sem gerir 12 dálka alls og heila röð.

Á móti dálkum

Færðu dálka til hægri með því að nota .offset*flokka. Hver bekkur eykur vinstri spássíu dálks um heilan dálk. Til dæmis .offset4færist .span4yfir fjóra dálka.

3 á móti 2

3 á móti 1

3 á móti 2

6 á móti 3

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

Hreiður súlur

Til að hreiðra efnið þitt með sjálfgefna hnitanetinu skaltu bæta við nýjum .rowog setti .span*dálka 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.

Stig 1 dálkur

Stig 2

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

Dæmi um lifandi vökvakerfi

Vökvaritakerfið notar prósentur í stað pixla fyrir dálkabreidd. Það hefur sömu viðbragðsgetu og fasta netkerfið okkar, sem tryggir rétt hlutföll fyrir helstu skjáupplausnir og tæki.

Basic vökva rist HTML

Gerðu hvaða línu sem er "fljótandi" með því að breyta .rowí .row-fluid. Dálkaflokkarnir haldast nákvæmlega þeir sömu, sem gerir það auðvelt að fletta á milli fastra og fljótandi rists.

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

Vökvajöfnun

Virkar á sama hátt og fasta netkerfisjöfnunin: bættu .offset*við hvaða dálk sem er til að jafna upp á móti svo mörgum dálkum.

4 á móti 4

3 á móti 3

6 á móti 6

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

Vökvavarp

Vökvatöflur nýta hreiður á annan hátt: hvert hreiðrað dálkastig ætti að bæta við allt að 12 dálkum. Þetta er vegna þess að vökvanetið notar prósentur, ekki pixla, til að stilla breidd.

Vökvi 12

Vökvi 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    Vökvi 12
    <div class = "row-fluid" > 
      <div class = "span6" > 
        Vökvi 6
        <div class = "row-fluid" > 
          <div class = "span6" > Vökvi 6 </div> 
          <div class = "span6" > Vökvi 6 </div> 
        </div>
      </div>
      <div class = "span6" > Vökvi 6 </div> 
    </div>
  </div>
</div>

Fast skipulag

Býður upp á sameiginlegt skipulag með fastri breidd (og mögulega móttækilegt) útlit með aðeins <div class="container">þörf.

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

Vökvaskipulag

Búðu til fljótandi, tveggja dálka síðu með — <div class="container-fluid">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>

Virkja móttækilega eiginleika

Kveiktu á móttækilegum CSS í verkefninu þínu með því að setja viðeigandi meta tag og viðbótarstílblað inn <head>í skjalið þitt. Ef þú hefur tekið saman Bootstrap af Customize síðunni þarftu aðeins að hafa meta tagið með.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stílblað" >

Höfuð upp!Bootstrap inniheldur ekki móttækilega eiginleika sjálfgefið á þessum tíma þar sem ekki þarf allt að vera móttækilegt. Í stað þess að hvetja forritara til að fjarlægja þennan eiginleika teljum við best að virkja hann eftir þörfum.

Um móttækilega Bootstrap

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

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

Móttækilegur gagnsemi flokkar

Fyrir hraðari farsímavænni þróun, notaðu þessa tólaflokka til að sýna og fela efni eftir tæki. Hér að neðan er tafla yfir tiltæka flokka og áhrif þeirra á tiltekið útlit fjölmiðlafyrirspurna (merkt eftir tæki). Þær má finna í responsive.less.

bekk	Símar767px og undir	Spjaldtölvur979px til 768px	SkrifborðSjálfgefið
`.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ð

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. Móttækileg tól ætti ekki að nota með töflum og eru sem slík ekki studd.

Móttækilegt prófunartilvik fyrir veitur

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ð

Alþjóðlegar stillingar