Grunn CSS

Ofan á vinnupallana eru helstu HTML þættir stílaðir og endurbættir með stækkanlegum flokkum til að veita ferskt, stöðugt útlit og tilfinningu.

Fyrirsagnir og meginmál

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.

Afrit af blýlíkam

Láttu málsgrein skera sig úr með því að bæta við .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor uppboðsmaður. Duis mollis, est non commodo luctus.

h1. Fyrirsögn 1

h2. Fyrirsögn 2

h3. Fyrirsögn 3

h4. Fyrirsögn 4

h5. Fyrirsögn 5
h6. Fyrirsögn 6

Áherslur, heimilisfang og skammstöfun

Frumefni Notkun Valfrjálst
<strong> Til að leggja áherslu á textabrot með mikilvægum Enginn
<em> Fyrir að leggja áherslu á textabrot með streitu Enginn
<abbr> Umlykur skammstafanir og skammstafanir til að sýna stækkaða útgáfuna á sveimi

Láttu valfrjálsa titleeigind fylgja með fyrir stækkaðan texta

Notaðu .initialismflokk fyrir hástafi skammstafanir.
<address> Fyrir tengiliðaupplýsingar fyrir næsta forföður hans eða allt verkið Varðveittu sniðið með því að enda allar línur með<br>

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 .

Blockquotes

Frumefni Notkun Valfrjálst
<blockquote> Eining á blokkarstigi til að vitna í efni frá öðrum uppruna

Bættu við citeeigind fyrir upprunaslóð

Notkun .pull-leftog .pull-rightflokkar fyrir fljótandi valkosti
<small> Valfrjáls þáttur til að bæta við tilvitnun sem snýr að notanda, venjulega höfundur með titil verks Settu <cite>utan um titil eða nafn heimildar

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 á &mdash;undan honum í stíl tilgangi.

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

Dæmi um blokkatilvitnanir

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

Listar

Ó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.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, Tortor mauris condimentum nibh, út fermentum massa justo sit amet risus.

Höfuð upp! Láréttir lýsingarlistar munu stytta hugtök sem eru of löng til að passa inn í vinstri dálkleiðréttingu text-overflow. Í þrengri útsýnisgluggum munu þær breytast í sjálfgefið staflað útlit.

Í línu

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

  1. Til dæmis ætti <code> hluti </ code > 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>
  1. <pre>
  2. <p>Dæmi um texta hér...</p>
  3. </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.

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

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

Álagning töflu

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
  1. <borð>
  2. <haus>
  3. <tr>
  4. <þ> </th>
  5. <þ> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

Borðvalkostir

Nafn bekk Lýsing
Sjálfgefið Enginn Engir stílar, bara dálkar og raðir
Basic .table Aðeins láréttar línur á milli raða
Á mörkum .table-bordered Rúnar horn og bætir við ytri ramma
Zebra-rönd .table-striped Bætir ljósgráum bakgrunnslit við stakar línur (1, 3, 5, osfrv.)
Þéttur .table-condensed Klippir lóðrétta bólstrun í tvennt, frá 8px til 4px, innan allra tdog thþátta

Dæmi um töflur

1. Sjálfgefin töflustíll

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.

  1. <table class = "tafla" >
  2. </table>
# Fyrsta nafn Eftirnafn Notendanafn
1 Mark Ottó @mdo
2 Jakob Thornton @feiti
3 Larry fuglinn @twitter

2. Röndótt borð

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.

  1. <table class = "borð borðröndótt" >
  2. </table>
# Fyrsta nafn Eftirnafn Notendanafn
1 Mark Ottó @mdo
2 Jakob Thornton @feiti
3 Larry fuglinn @twitter

3. Bordered borð

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

  1. <table class = "borð með borði" >
  2. </table>
# Fyrsta nafn Eftirnafn Notendanafn
1 Mark Ottó @mdo
Mark Ottó @getbootstrap
2 Jakob Thornton @feiti
3 Larry fuglinn @twitter

4. Þétt borð

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

  1. <table class = "table table-condensed" >
  2. </table>
# Fyrsta nafn Eftirnafn Notendanafn
1 Mark Ottó @mdo
2 Jakob Thornton @feiti
3 Larry fuglinn @twitter

5. Sameina þá alla!

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.

  1. <table class = "borðröndóttar borðröndóttar borðþéttar" >
  2. ...
  3. </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.

Fjórar tegundir af formum

Bootstrap veitir einfalda merkingu og stíla fyrir fjóra stíla af algengum vefformum.

Nafn bekk Lýsing
Lóðrétt (sjálfgefið) .form-vertical (ekki krafist) Staflaðir, vinstrijafnaðir merkimiðar yfir stýringar
Í línu .form-inline Vinstri stillt merkimiða og innbyggður blokkastýringar fyrir þéttan stíl
Leita .form-search Extra ávalur textainnsláttur fyrir dæmigerða leitarfagurfræði
Lárétt .form-horizontal Fleygðu vinstri, hægri stilltum merkimiðum á sömu línu og stýringar

Dæmi um eyðublöð sem nota bara formstýringar, engin auka álagning

Grunnform

Snjöll og létt sjálfgefna stilling án auka álagningar.

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

  1. <form class = "jæja" >
  2. <label> Heiti merkimiða </label>
  3. <input type = "text" class = "span3" placeholder = "Sláðu inn eitthvað…" >
  4. <span class = "help-block" > Dæmi um hjálpartexta á blokkarstigi hér. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > Skoðaðu mig
  7. </label>
  8. <button type = "submit" class = "btn" > Senda </button>
  9. </form>

Leitarform

Bættu .form-searchvið eyðublaðið og .search-queryvið input.

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

Innbyggt form

Bættu við .form-inlinetil að fíngera lóðrétta jöfnun og bil á formstýringum.

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

Lárétt form

Sýnd til hægri 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

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

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.

  1. <form class = "form-horisontal" >
  2. <fieldset>
  3. <legend> Legend texti </legend>
  4. <div class = "stjórnhópur" >
  5. <label class = "control-label" for = "input01" > Textainnsláttur </label>
  6. <div class = "stýrir" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Stuðningstexti </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Formstýringarrí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.

  1. <fieldset
  2. class = "stjórnhópsvilla" >
  3. </fieldset>
Eitthvað verðmæti hér
Eitthvað gæti hafa farið úrskeiðis
Vinsamlegast leiðréttu villuna
Úff!
Úff!

Útvíkkun formstýringar

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.

Notaðu sömu .span*flokka úr ristkerfinu fyrir inntaksstæ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).

@

Hér er smá hjálpartexti

.00
Hér er meiri hjálpartexti
$ .00

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

Takki class="" Lýsing
btn Venjulegur grár hnappur með halla
btn btn-primary Veitir aukna sjónræna þyngd og auðkennir aðalaðgerðina í setti af hnöppum
btn btn-info Notað sem valkostur við sjálfgefna stíla
btn btn-success Gefur til kynna árangursríka eða jákvæða aðgerð
btn btn-warning Gefur til kynna að fara ætti varlega með þessa aðgerð
btn btn-danger Gefur til kynna hættulega eða hugsanlega neikvæða aðgerð
btn btn-inverse Dökkgrár hnappur til vara, ekki tengdur merkingaraðgerð eða notkun

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.


Óvirkt ástand

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

Aðal hlekkur Tengill

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
  1. <a class = "btn" href = "" > Tengill </a>
  2. <button class = "btn" type = "senda" >
  3. Takki
  4. </hnappur>
  5. <inntaksflokkur = "btn" type = " hnappur"
  6. value = "Inntak" >
  7. <inntaksflokkur = "btn" type = " senda"
  8. 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
  • tákn-hdd
  • tákn-nautahorn
  • tákn-bjalla
  • tákn-vottorð
  • icon-thumbs-up
  • icon-thumbs-down
  • tákn-hönd-hægri
  • tákn-hönd-vinstri
  • tákn-hönd upp
  • tákn-hand-down
  • tákn-hring-ör-hægri
  • tákn-hring-ör-vinstri
  • tákn-hring-ör-upp
  • tákn-hring-ör-niður
  • icon-globe
  • tákn- skiptilykill
  • tákn-verkefni
  • táknsía
  • tákn-skjalataska
  • táknmynd á öllum skjánum

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:

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

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

Það eru 140 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.

Dæmi

Notaðu þá í hnöppum, hnappahópum fyrir tækjastiku, flakk eða innsláttarform.