Leturfræðilegur mælikvarði

Allt leturfræðinetið er byggt á tveimur Less breytum í variables.less skránni okkar: @baseFontSizeog @baseLineHeight. Sú fyrri er grunnleturstærðin sem notuð er í gegn og sú seinni er grunnlínuhæðin.

Við notum þessar breytur, og smá stærðfræði, til að búa til spássíur, fyllingar og línuhæðir allra okkar tegunda og fleira.

Dæmi um meginmál

Nullam quis risus eget urna mollis ornare vel eu leo. Þegar þú ert samfélagslegur og stórkostlegur í fæðingu, verður þú að hlakka til. Nullam id dolor id nibh ultricies vehicula ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor uppboðsmaður. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

Að nota áherslur

Fusce dapibus , tellus ac cursus commodo , Tortor mauris condimentum nibh , út fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Athugið: Ekki hika við að nota <b>og <i>í HTML5, en notkun þeirra hefur breyst aðeins. <b>er ætlað að varpa ljósi á orð eða orðasambönd án þess að koma á framfæri auknu mikilvægi en <i>er aðallega fyrir rödd, tæknileg hugtök o.s.frv.

Dæmi um heimilisföng

Hér eru tvö dæmi um hvernig <address>hægt er að nota merkið:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Fullt nafn
[email protected]

Dæmi um skammstafanir

Skammstafanir með titleeigind eru með ljósum doppuðum neðri ramma og hjálparbendill á sveimi. Þetta gefur notendum aukalega vísbendingu um að eitthvað verði sýnt á sveimi.

Bættu initialismbekknum við skammstöfun til að auka leturfræðisamræmi með því að gefa honum aðeins minni textastærð.

HTML er það besta síðan sneið brauð.

Skammstöfun á orðinu eiginleiki er attr .

Til að innihalda tilvitnun skaltu vefja <blockquote>um hvaða HTML sem er sem tilvitnun. Fyrir beinar tilvitnanir mælum við með <p>.

Láttu valfrjálsan <small>þátt fylgja með til að vitna í upprunann þinn og þú færð em strik á —undan honum í stíl tilgangi.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante venenatis. </p>
  <small> Einhver frægur </small>
</blockquote>

Sjálfgefnar blokkatilvitnanir eru stílaðar sem slíkar:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante venenatis.

Einhver frægur í Body of work

Til að láta tilvitnunina þína fljóta til hægri skaltu bæta við class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante venenatis.

Einhver frægur í Body of work

Óraðað

<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Heiltala molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat kl
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Óstíll

<ul class="unstyled">

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Heiltala molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat kl
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Pantaði

<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Heiltala molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Lýsing

<dl>

Lýsingarlistar

Lýsingarlisti er fullkominn til að skilgreina hugtök.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Lárétt lýsing

<dl class="dl-horizontal">

Lýsingarlistar

Lýsingarlisti er fullkominn til að skilgreina hugtök.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Í línu

Vefjið innbyggða kóðabúta með <code>.

Til dæmis ætti <code> hluti </ code > að vera innbyggður .  

Grunnblokk

Notaðu <pre>fyrir margar línur af kóða. Vertu viss um að sleppa við allar hornklofa í kóðanum fyrir rétta flutning.

<p>Dæmi um texta hér...</p>

<pre>
  <p>Dæmi um texta hér...</p>
</pre>

Athugið: Vertu viss um að hafa kóða innan <pre>merkja eins nálægt vinstri og mögulegt er; það mun gera alla flipa.

Þú getur valfrjálst bætt við .pre-scrollablebekknum sem mun setja hámarkshæðina 350px og bjóða upp á y-ás skrunstiku.

Google Pretify

Taktu sama <pre>þáttinn og bættu við tveimur valkvæðum flokkum til að auka flutning.

<p> Dæmi um texta hér... </p>

<pre class = "prettyprint 
     línunum" >
  <p>Dæmi um texta hér...</p>
</pre>

Sæktu google-code-prettify og skoðaðu readme fyrir hvernig á að nota.

Merkja	Lýsing
<table>	Umbúðir til að sýna gögn á töfluformi
<thead>	Gámaeining fyrir töfluhauslínur ( <tr>) til að merkja töfludálka
<tbody>	Gámaeining fyrir töflulínur ( <tr>) í meginmáli töflunnar
<tr>	Gámaeining fyrir mengi töfluhólfa ( <td>eða <th>) sem birtist í einni línu
<td>	Sjálfgefin töflureitur
<th>	Sérstakur töflureitur fyrir dálka (eða röð, fer eftir umfangi og staðsetningu) merki Verður að nota innan a<thead>
<caption>	Lýsing eða samantekt á því sem taflan geymir, sérstaklega gagnleg fyrir skjálesendur

<borð>
  <haus>
    <tr>
      <þ> … </th>
      <þ> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

Töflur eru sjálfkrafa stílaðar með aðeins nokkrum ramma til að tryggja læsileika og viðhalda uppbyggingu. Með 2.0 er .tableflokkurinn nauðsynlegur.

<table class = "tafla" > 
  …
</table>

#	Fyrsta nafn	Eftirnafn	Notendanafn
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry	fuglinn	@twitter

Vertu smá flottur með borðin þín með því að bæta við sebra-röndum - bættu bara við .table-stripedbekknum.

Athugið: Röndóttar töflur nota :nth-childCSS veljarann ​​og eru ekki fáanlegar í IE7-IE8.

<table class = "borð borðröndótt" > 
  …
</table>

#	Fyrsta nafn	Eftirnafn	Notendanafn
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry	fuglinn	@twitter

Bættu við ramma um allt borðið og ávölum hornum í fagurfræðilegum tilgangi.

<table class = "borð með borði" > 
  …
</table>

#	Fyrsta nafn	Eftirnafn	Notendanafn
1	Mark	Ottó	@mdo
	Mark	Ottó	@getbootstrap
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@twitter

Gerðu borðin þín þéttari með því að bæta .table-condensedbekknum við til að skera töflufrumufyllingu í tvennt (frá 8px til 4px).

<table class = "table table-condensed" > 
  …
</table>

#	Fyrsta nafn	Eftirnafn	Notendanafn
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@twitter

Ekki hika við að sameina hvaða borðflokka sem er til að ná fram mismunandi útliti með því að nota hvaða flokka sem er í boði.

<table class = "borðröndóttar borðröndóttar borðþéttar" > 
  ...
</table>

	Fullt nafn
#	Fyrsta nafn	Eftirnafn	Notendanafn
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@twitter

Sveigjanlegt HTML og CSS

Það besta við eyðublöð í Bootstrap er að öll inntak þín og stýringar líta vel út, sama hvernig þú byggir þau upp í merkingunni þinni. Enginn óþarfur HTML er krafist, en við útvegum mynstrin fyrir þá sem þurfa það.

Flóknari skipulag koma með hnitmiðuðum og skalanlegum flokkum til að auðvelda stíl og viðburðabindingu, svo þú ert þakinn í hverju skrefi.

Fjögur skipulag fylgir

Bootstrap kemur með stuðningi fyrir fjórar tegundir eyðublaða:

• Lóðrétt (sjálfgefið)
• Leita
• Í línu
• Lárétt

Mismunandi gerðir eyðublaðaútlita krefjast nokkurra breytinga á merkingu, en stýringarnar sjálfar eru áfram og hegða sér eins.

Stjórna ríki og fleira

Eyðublöð Bootstrap innihalda stíla fyrir allar grunnformstýringar eins og inntak, textasvæði og val sem þú vilt búast við. En það kemur líka með fjölda sérsniðinna íhluta eins og viðbætta og áfyllta inntak og stuðning fyrir lista yfir gátreiti.

Ríki eins og villa, viðvörun og árangur eru innifalin fyrir hverja tegund eyðublaðastýringar. Einnig fylgja stíll fyrir óvirka stjórntæki.

Grunnform

Með v2.0 höfum við léttari og snjallari sjálfgefnar stillingar fyrir formstíla. Engin auka álagning, bara formstýringar.

Nafn merkimiða Tengdur hjálpartexti!

Dæmi um hjálpartexta á blokkarstigi hér.

Sjáðu mig Sendu inn

<form class = "jæja" > 
  <label> Heiti merkimiða </label>
  <input type = "text" class = "span3" placeholder = "Sláðu inn eitthvað…" >   
  <span class = "help-inline" > Tengdur hjálpartexti! </span> 
  <label class = "checkbox" > 
    <input type = "checkbox" > Skoðaðu mig 
  </label>
  <button type = "submit" class = "btn" > Senda </button>  
</form>

Leitarform

Endurspeglar sjálfgefna WebKit stíl, bættu bara við .form-searchfyrir auka ávöl leitarsvið.

Leita

<form class = "vel form-leit" > 
  <input type = "text" class = "inntak-miðils leitarfyrirspurn" >  
  <button type = "submit" class = "btn" > Leita </button>  
</form>

Innbyggt form

Inntak er blokkarstig til að byrja. Fyrir .form-inlineog .form-horizontalnotum við inline-blokk.

Mundu eftir mér Skráðu þig inn

<form class = "well form-inline" > 
  <input type = "text" class = "input-small" staðgengill = "Tölvupóstur" >   
  <input type = "password" class = "input-small" staðgengill = "Lykilorð" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > Mundu eftir mér 
  </label>
  <button type = "submit" class = "btn" > Skráðu þig inn </button>  
</form>

Stýrir Bootstrap styður

Textainnsláttur

Til viðbótar við texta í frjálsu formi, birtast hvaða HTML5 textainnsláttur sem er.

Gátreitur

Valkostur eitt er þetta og hitt - vertu viss um að láta fylgja með hvers vegna það er frábært

Veldu lista

Eitthvað 2 3 4 5

Multicon-select

1 2 3 4 5

Skrá inntak

Textasvæði

Vista breytingar Hætta við

Dæmi um álagningu

Miðað við eyðublaðaútlitið hér að ofan, hér er álagningin sem tengist fyrsta inntaks- og stýrihópnum. , .control-group, .control-labelog .controlsflokkarnir eru allir nauðsynlegir fyrir stíl.

<form class = "form-horisontal" > 
  <fieldset>
    <legend> Legend texti </legend>
    <div class = "stjórnhópur" > 
      <label class = "control-label" for = "input01" > Textainnsláttur </label>  
      <div class = "stýrir" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Stuðningstexti </p> 
      </div>
    </div>
  </fieldset>
</form>

Hvað er innifalið

Sýnd til vinstri eru allar sjálfgefnu formstýringar sem við styðjum. Hér er punktalisti:

• textainnsláttur (texti, lykilorð, tölvupóstur osfrv.)
• gátreit
• útvarp
• velja
• margval
• skrá inntak
• textasvæði

---

Ný sjálfgefna stilling með v2.0

Allt að v1.4 notuðu sjálfgefin formstíll Bootstrap lárétta útlitið. Með Bootstrap 2 fjarlægðum við þá þvingun til að hafa snjallari, stigstærðari sjálfgefna stillingar fyrir hvaða form sem er.

Formstýringarríki

Einbeitt inntak

Óbreytanleg inntak

Eitthvað verðmæti hér

Óvirkt inntak

Óvirkur gátreitur

Þetta er óvirkur gátreitur

Inntak með viðvörun

Eitthvað gæti hafa farið úrskeiðis

Inntak með villu

Vinsamlegast leiðréttu villuna

Inntak með góðum árangri

Úff!

Veldu með góðum árangri

1 2 3 4 5 Úff!

Vista breytingar Hætta við

Endurhannað vafraríki

Bootstrap býður upp á stíla fyrir vafra-studd fókus og disabledástand. Við fjarlægjum sjálfgefna Webkit outlineog notum a box-shadowí staðinn fyrir :focus.

---

Löggilding eyðublaða

Það inniheldur einnig staðfestingarstíl fyrir villur, viðvaranir og árangur. Til að nota skaltu bæta villuflokknum við umhverfið .control-group.

<fieldset
  class = "stýrihópsvilla" >
  …
</fieldset>

Útvíkkun formstýringar

Myndaðu ristastærðir

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

Notaðu sömu .span*flokka úr ristkerfinu fyrir inntaksstærðir.

Aðrar stærðir

Þú getur líka notað kyrrstöðuflokka sem passa ekki við ristina, laga sig að móttækilegum CSS stílum eða gera grein fyrir mismunandi gerðum stýringa (td á inputmóti select).

Áfram texti

@

Hér er smá hjálpartexti

Meðfylgjandi texti

.00

Hér er meiri hjálpartexti

Bæta við og undirbúa

$ .00

Bæta við með hnappi

Farðu!

Innbyggðir gátreiti

1 2 3

Gátreitir

Valkostur eitt er þetta og hitt - vertu viss um að láta fylgja með hvers vegna það er frábært Einnig er hægt að haka við valmöguleika tvö og vera með í eyðublaðsniðurstöðum Valkostur þrjú er líka hægt að athuga - já, þú giskaðir á það - og vera með í eyðublaðsniðurstöðum

Athugið: Merkingar umlykja alla valkosti fyrir miklu stærri smellisvæði og nothæfara form.

Útvarpshnappar

Valkostur eitt er þetta og hitt - vertu viss um að láta fylgja með hvers vegna það er frábært Valkostur tvö dós er eitthvað annað og ef það er valið verður valkostur einn afmerktur

Vista breytingar Hætta við

Settu inn og bættu við inntak

Innsláttarhópar—með viðbættum eða áfylltum texta—veita auðveld leið til að gefa meira samhengi fyrir inntakið þitt. Frábær dæmi eru @ táknið fyrir Twitter notendanöfn eða $ fyrir fjármál.

---

Gátreitir og útvarp

Allt að v1.4 þurfti Bootstrap aukalega merkingu í kringum gátreiti og útvarp til að stafla þeim. Nú, það er einfalt mál að endurtaka það <label class="checkbox">sem umlykur <input type="checkbox">.

Innbyggðir gátreitir og útvarp eru einnig studd. Bættu bara við .inlinehvaða .checkboxeða .radioog þú ert búinn.

---

Innbyggð eyðublöð og bæta við/undirbúa

Til að nota prepend eða add-inntak á innbyggðu formi, vertu viss um að setja .add-onog inputá sömu línu, án bils.

---

Myndaðu hjálpartexta

Til að bæta við hjálpartexta fyrir innslátt eyðublaðsins skaltu hafa innbyggðan hjálpartexta með <span class="help-inline">eða hjálpartextablokk með <p class="help-block">á eftir innsláttareiningunni.

Hnappar fyrir aðgerðir

Samkvæmt venju ætti aðeins að nota hnappa fyrir aðgerðir á meðan tengla á að nota fyrir hluti. Til dæmis ætti „Hlaða niður“ að vera hnappur á meðan „nýleg virkni“ ætti að vera hlekkur.

Hægt er að nota hnappastíla á hvað sem er með .btnbekknum beitt. Hins vegar, venjulega, þú vilt nota þetta aðeins á <a>og <button>þætti.

Samhæfni í gegnum vafra

IE9 klippir ekki bakgrunnshalla á ávöl horn, svo við fjarlægjum það. Tengt, IE9 eyðir óvirkum buttonþáttum, gerir texta gráan með viðbjóðslegum textaskugga sem við getum ekki lagað.

Margar stærðir

Langar þig í stærri eða minni hnappa? Bættu við .btn-large, .btn-small, eða .btn-minifyrir tvær stærðir til viðbótar.

Aðalaðgerð Aðgerð

Aðalaðgerð Aðgerð

Aðalaðgerð Aðgerð

Óvirkt ástand

Fyrir óvirka hnappa skaltu bæta .disabledbekknum við tengla og disabledeigindinni fyrir <button>þætti.

Aðal hlekkur Tengill

Aðalhnappur Takki

Höfuð upp! Við notum .disabledsem gagnaflokk hér, svipað og almenni .activeflokkurinn, þannig að ekki er krafist forskeyti.

Einn flokkur, mörg merki

Notaðu .btnbekkinn á <a>, <button>, eða <input>frumefni.

Tengill Takki

<a class = "btn" href = "" > Tengill </a>  
<button class = "btn" type = "senda" >  
  Takki
</hnappur>
<inntaksflokkur = "btn" type = " hnappur"  
         value = "Inntak" >
<inntaksflokkur = "btn" type = " senda"  
         value = "Senda" >

Sem besta starfsvenjan, reyndu að passa þáttinn í samhengi þínu til að tryggja samsvarandi flutning í gegnum vafra. Ef þú ert með input, notaðu þá <input type="submit">fyrir hnappinn þinn.

• tákn-gler
• tákn-tónlist
• tákn-leit
• tákn-umslag
• tákn-hjarta
• tákn-stjarna
• tákn-stjörnu-tóm
• tákn-notandi
• táknmynd
• tákn-þ-stór
• tákn-þ
• tákn-lista
• tákn-ok
• tákn-fjarlægja
• tákn-aðdráttur
• tákn-aðdráttur út
• slökkt á tákni
• táknmerki
• tákn-kóg
• tákn-rusl
• tákn-heimili
• tákn-skrá
• tákn-tími
• tákn-vegur
• tákn-niðurhal-alt
• tákn-niðurhal
• tákn-upphleðslu
• tákn-innhólf
• tákn-spila-hring
• tákn-endurtaka

• tákn-hressa
• icon-list-alt
• tákn-lás
• tákn-fáni
• tákn-heyrnartól
• icon-volume-off
• tákn-hljóðstyrk
• tákn-hljóðstyrkur
• tákn-qrcode
• tákn-strikamerkja
• táknmerki
• tákn-merki
• tákn-bók
• tákn-bókamerki
• tákn-prentun
• táknmyndavél
• tákn-leturgerð
• tákn-feitletrað
• táknmynd-skáletrað
• tákn-texta-hæð
• tákn-texta-breidd
• icon-align-left
• icon-align-center
• icon-align-right
• icon-align-justify
• tákna-listi
• tákn-inndráttur-vinstri
• tákn-inndrátt-hægri
• icon-facetime-video
• táknmynd

• tákn-blýantur
• tákn-kortamerki
• tákn-stilla
• tákn-litur
• icon-edit
• tákn-deila
• tákn-athugun
• tákn-hreyfa
• tákn-skref-aftur
• tákn-hrað-aftur
• táknið afturábak
• tákn-spilun
• tákn-hlé
• tákn-stopp
• tákn-áfram
• tákn-spóla áfram
• tákn-skref-áfram
• icon-eject
• icon-chevron-vinstri
• icon-chevron-hægri
• tákn-plús-merki
• tákn-mínus-merki
• tákn-fjarlægja-merki
• tákn-ok-merki
• tákn-spurningar-merki
• tákn-upplýsingamerki
• tákn-skjámynd
• tákn-fjarlægja-hring
• tákn-ok-hringur
• tákn-bann-hringur

• tákn-ör-vinstri
• tákn-ör-hægri
• tákn-ör upp
• tákn-ör-niður
• icon-share-alt
• tákn-breyta stærð-full
• tákn-breyta stærð-lítil
• tákn-plús
• tákn-mínus
• tákn-stjörnu
• tákn-upphrópunarmerki
• tákn-gjöf
• táknblað
• tákn-eldur
• tákn-auga-opið
• tákn-auga-loka
• tákn-viðvörunarmerki
• tákn-flugvél
• tákn-dagatal
• tákn-handahófi
• tákn-ummæli
• tákn-segul
• icon-chevron-up
• icon-chevron-down
• icon-retweet
• tákn-innkaupakörfu
• tákn-möppu-loka
• tákn-möppu-opin
• tákn-breyta stærð-lóðrétt
• tákn-breyta stærð-lárétt

Byggt sem sprite

Í stað þess að gera hvert tákn að aukabeiðni, höfum við safnað þeim saman í sprite - fullt af myndum í einni skrá sem notar CSS til að staðsetja myndirnar með background-position. Þetta er sama aðferð og við notum á Twitter.com og hefur reynst okkur vel.

Allir táknflokkar eru með forskeyti .icon-fyrir rétt nafnabil og umfang, líkt og aðrir hlutir okkar. Þetta mun hjálpa til við að forðast árekstra við önnur tæki.

Glyphicons hefur leyft okkur að nota Halflings settið í opnum tækjabúnaði okkar svo framarlega sem við gefum upp hlekk og kredit hér í skjölunum. Vinsamlegast íhugaðu að gera slíkt hið sama í verkefnum þínum.

Hvernig skal nota

Bootstrap notar <i>merki fyrir öll tákn, en þau hafa engan tilviksflokk - aðeins sameiginlegt forskeyti. Til að nota skaltu setja eftirfarandi kóða nánast hvar sem er:

<i class = "icon-search" ></i> 

Það eru líka stíll í boði fyrir öfug (hvít) tákn, gerð tilbúin með einum aukaflokki:

<i class = "icon-search icon-white" ></i> 

Það eru 120 flokkar til að velja úr fyrir táknin þín. Bættu bara við <i>merki með réttum flokkum og þú ert tilbúinn. Þú getur fundið allan listann í sprites.less eða hér í þessu skjali.

Höfuð upp! Þegar þú notar við hliðina á textastrengjum, eins og í hnöppum eða nav-tenglum, vertu viss um að skilja eftir bil á eftir <i>merkinu fyrir rétt bil.

Notkunartilvik

Tákn eru frábær, en hvar myndi maður nota þau? Hér eru nokkrar hugmyndir:

• Sem myndefni fyrir hliðarstikuna þína
• Fyrir eingöngu tákndrifna leiðsögn
• Fyrir hnappa til að koma á framfæri merkingu aðgerða
• Með tenglum til að deila samhengi á áfangastað notanda

Í meginatriðum, hvar sem þú getur sett <i>merki, geturðu sett tákn.

Endurnýja Athuga Eyða

Athugasemd Stillingar Meiri upplýsingar

Netfang