Oinarrizko CSS

Aldamioen gainean, oinarrizko HTML elementuak estilo hedagarriekin hobetzen dira eta itxura fresko eta koherentea emateko.

Goiburuak eta gorputzaren kopia

Eskala tipografikoa

Sare tipografiko osoa gure aldagaietako bi aldagai Gutxiagotan oinarritzen da.fitxategirik gabe: @baseFontSizeeta @baseLineHeight. Lehenengoa zehar erabilitako oinarrizko letra-tamaina da eta bigarrena oinarrizko lerroaren altuera da.

Aldagai horiek eta matematika batzuk erabiltzen ditugu gure mota guztietako marjinak, betegarriak eta lerro-altuerak sortzeko.

Gorputz testuaren adibidea

Nullam quis risus eget urna mollis ornare vel eu leo. Cum is natoque penatibus eta magnis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies ibilgailua.

Gorputzaren kopia nagusia

Egin paragrafo bat nabarmenduz gehituz .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Hori bai, ez da nolanahikoa.

h1. 1. goiburua

h2. 2. goiburua

h3. 3. goiburua

h4. 4. goiburua

h5. 5. goiburua
h6. 6. goiburua

Azpimarra, helbidea eta laburdura

Elementua Erabilera Aukerakoa
<strong> Garrantzitsuarekin testu zati bat azpimarratzeko Bat ere ez
<em> Testu zati bat enfasiarekin azpimarratzeko Bat ere ez
<abbr> Laburdurak eta akronimoak biltzen ditu bertsio zabaldua pasatzean erakusteko

Sartu aukerako titleatributua testu zabaldurako

Erabili .initialismklasea maiuskulak egiteko.
<address> Hurbilen dagoen arbasoaren edo lan-talde osoaren harremanetarako informazioa lortzeko Gorde formatua lerro guztiak honekin amaituz<br>

Enfasea erabiliz

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

Oharra: lasai erabili <b>eta <i>HTML5-en, baina haien erabilera pixka bat aldatu da. <b>hitzak edo esaldiak nabarmendu nahi ditu garrantzi gehigarririk eman gabe, <i>eta batez ere ahotsa, termino teknikoak, etab.

Helbide adibideak

<address>Hona hemen etiketa nola erabil daitekeen bi adibide :

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Izen-abizenak
[email protected]

Laburdura adibideak

Atributu bat duten laburdurek titlepuntu argidun beheko ertza dute eta laguntza-kurtsorea pasatzean. Honek erabiltzaileei pasatzean zerbait erakutsiko zaiela adierazten du.

Gehitu initialismklasea laburdura bati harmonia tipografikoa areagotzeko, testuaren tamaina apur bat txikiagoa emanez.

HTML gauzarik onena da ogi xerratik.

Atributu hitzaren laburdura attr da .

Blokeko komatxoak

Elementua Erabilera Aukerakoa
<blockquote> Beste iturri bateko edukia aipatzeko bloke mailako elementua

Gehitu citeatributua iturburuko URLrako

Flotatutako aukeren erabilera .pull-lefteta klaseak.pull-right
<small> Erabiltzaileentzako aipamen bat gehitzeko aukerako elementua, normalean lanaren izenburua duen egilea Jarri <cite>izenburua edo iturriaren izenaren inguruan

Bloke-aipamen bat sartzeko, bildu <blockquote>edozein HTML aipamen gisa. Komatxo zuzenetarako <p>.

Sartu aukerako <small>elementu bat zure iturburua aipatzeko eta marratxo bat jasoko duzu &mdash;aurretik, estiloetarako.

  1. <blokeoa>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <small> Norbait ospetsua </small>
  4. </blockquote>

Bloke-adibideak

Bloke-koma lehenetsiak honela daude estiloa:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Body of work- en ospetsua den norbait

Zure blokeoa eskuinera mugitzeko, gehitu class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Body of work- en ospetsua den norbait

Zerrendak

Ordenatu gabe

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem eta masa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ak tristique libre voltpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Estilorik gabekoa

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem eta masa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ak tristique libre voltpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Agindua

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem eta masa
  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

Deskribapena

<dl>

Deskribapen zerrendak
Deskribapen zerrenda ezin hobea da terminoak definitzeko.
Euismod
Vestibulum id ligula porta felis euismod sempre 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.

Deskribapen horizontala

<dl class="dl-horizontal">

Deskribapen zerrendak
Deskribapen zerrenda ezin hobea da terminoak definitzeko.
Euismod
Vestibulum id ligula porta felis euismod sempre 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 sempre eget lacinia
Fusce dapibus, tellus ac cursus commodo, Tortor Mauris condimentum nibh, ut fermentum massa justo eseri amet risus.

Buruak gora! Azalpen zerrenda horizontalek ezkerreko zutabeko konponketan sartzeko luzeegiak diren terminoak moztuko dituzte text-overflow. Ikuspegi estuagoetan, pilatutako diseinu lehenetsira aldatuko dira.

Sarean

Itzulbiratu lerroko kode zatiak <code>.

  1. Adibidez , <code> atala </ code > lerroan sartuta egon behar da .

Oinarrizko blokea

Erabili <pre>kode-lerro anitzetarako. Ziurtatu kodean angelu-kortxeteetatik ihes egiten duzula errendatze egokia lortzeko.

<p>Hemen testua...</p>
  1. <aurre>
  2. <p>Hemen testua...</p>
  3. </pre>

Oharra: Ziurtatu kodea <pre>etiketen barruan ahalik eta ezkerretik gertuen mantentzea; fitxa guztiak errendatuko ditu.

Aukeran gehi dezakezu .pre-scrollable350 px-ko gehienezko altuera ezarriko duen klasea eta y ardatzeko korritze-barra emango duena.

Google Prettify

Hartu <pre>elementu bera eta gehitu aukerako bi klase errendatze hobetu ahal izateko.

  1. <p> Testuaren adibidea hemen... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Hemen testua...</p>
  4. </pre>

Deskargatu google-code-prettify eta ikusi irakurme-a nola erabili jakiteko.

Taulen markaketa

Etiketa Deskribapena
<table> Datuak taula formatuan bistaratzeko bilgarri-elementua
<thead> Taularen goiburuko errenkadetarako edukiontzi-elementua ( <tr>) taula-zutabeak etiketatzeko
<tbody> Taularen errenkadetarako edukiontzi-elementua ( <tr>) taularen gorputzean
<tr> Errenkada bakarrean agertzen den taulako gelaxken ( <td>edo ) multzo baterako edukiontzi-elementua<th>
<td> Taularen gelaxka lehenetsia
<th> Zutabeen (edo errenkadaren, esparruaren eta kokapenaren arabera) etiketen taulako gelaxka bereziak
Erabili behar dira.<thead>
<caption> Taulak jasotzen duenaren deskribapena edo laburpena, bereziki erabilgarria pantaila-irakurleentzat
  1. <taula>
  2. <burua>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

Taularen aukerak

Izena Klasea Deskribapena
Lehenetsia Bat ere ez Estilorik ez, zutabeak eta errenkadak soilik
Oinarrizkoa .table Lerroen arteko lerro horizontalak bakarrik
Mugatuta .table-bordered Ertzak biribildu eta kanpoko ertza gehitzen du
Zebra-marra .table-striped Atzeko plano gris argia gehitzen du errenkada bakoitietan (1, 3, 5, etab.)
Kondentsatua .table-condensed Betegarri bertikala erditik mozten du, 8px-tik 4px-ra, guztien tdeta thelementuen barruan

Taulen adibide

1. Taula-estilo lehenetsiak

Taulak automatikoki moldatzen dira ertz gutxi batzuekin, irakurgarritasuna bermatzeko eta egitura mantentzeko. 2.0rekin, .tableklasea beharrezkoa da.

  1. <table class = "taula" >
  2. </table>
# Izena Abizena Erabiltzaile izena
1 Markatu Otto @mdo
2 Jakob Thornton @potolo
3 Larry txoria @twitter

2. Marradun mahaia

Sortu pixka bat zure mahaiekin zebra-marra gehituz, gehitu .table-stripedklasea.

Oharra: marradun taulek :nth-childCSS hautatzailea erabiltzen dute eta ez dago eskuragarri IE7-IE8-n.

  1. <table class = "taula-marradun mahaia" >
  2. </table>
# Izena Abizena Erabiltzaile izena
1 Markatu Otto @mdo
2 Jakob Thornton @potolo
3 Larry txoria @twitter

3. Mugadun mahaia

Gehitu ertzak mahai osoaren inguruan eta ertz biribilduak helburu estetikoetarako.

  1. <table class = "taularen ertzetan" >
  2. </table>
# Izena Abizena Erabiltzaile izena
1 Markatu Otto @mdo
Markatu Otto @getbootstrap
2 Jakob Thornton @potolo
3 Larry Txoria @twitter

4. Taula kondentsatua

Egin zure taulak trinkoagoak .table-condensedklasea gehituta mahaiko gelaxken betegarria erditik mozteko (8px-tik 4px-ra).

  1. <table class = "taula-kondentsatua" >
  2. </table>
# Izena Abizena Erabiltzaile izena
1 Markatu Otto @mdo
2 Jakob Thornton @potolo
3 Larry Txoria @twitter

5. Konbinatu denak!

Anima zaitez mahaiko edozein klase konbinatu itxura desberdinak lortzeko, eskuragarri dauden klaseetako edozein erabiliz.

  1. <table class = "taula mahai-marradun mahai-ertzadun mahai-kondentsatua" >
  2. ...
  3. </table>
Izen osoa
# Izena Abizena Erabiltzaile izena
1 Markatu Otto @mdo
2 Jakob Thornton @potolo
3 Larry Txoria @twitter

HTML eta CSS malguak

Bootstrap-eko inprimakiei buruzko zatirik onena zure sarrera eta kontrol guztiek itxura bikaina dutela da, markaketa nola eraikitzen dituzun ere. Ez da soberako HTMLrik behar, baina eskatzen dutenei ereduak ematen dizkiegu.

Diseinu korapilatsuagoak klase labur eta eskalagarriekin datoz estilismoa eta gertaerak lotzeko erraztasuna lortzeko, pauso bakoitzean estalita zaude.

Lau diseinu barne

Bootstrap-ek lau inprimakien diseinu motaren laguntzarekin dator:

  • Bertikala (lehenetsia)
  • Bilatu
  • Sarean
  • Horizontala

Inprimaki-diseinu mota ezberdinek aldaketa batzuk behar dituzte markatzailean, baina kontrolak berek mantentzen dira eta berdin jokatzen dute.

Kontrol-egoerak eta gehiago

Bootstrap-en inprimakiek oinarrizko inprimaki-kontrol guztietarako estiloak barne hartzen dituzte, hala nola, sarrera, testu-eremua eta espero zenukeen hautaketa. Baina osagai pertsonalizatu batzuk ere badakartza, hala nola, sarrera erantsiak eta aurretik erantsiak eta kontrol-laukien zerrendetarako laguntza.

Errorea, abisua eta arrakasta bezalako estatuak sartzen dira inprimaki-kontrol mota bakoitzerako. Desgaitutako kontroletarako estiloak ere sartzen dira.

Lau forma mota

Bootstrap-ek markaketa eta estilo sinpleak eskaintzen ditu web-inprimaki arrunten lau estiloetarako.

Izena Klasea Deskribapena
Bertikala (lehenetsia) .form-vertical (ez da beharrezkoa) Ezkerretara lerrokatuta dauden etiketak kontrolen gainean
Sarean .form-inline Ezkerrean lerrokatuta dagoen etiketa eta lerro-blokearen kontrolak estilo trinkorako
Bilatu .form-search Testu-sarrera oso biribildua bilaketa-estetika tipiko baterako
Horizontala .form-horizontal Mugitu ezkerrera, eskuinera lerrokatuta dauden etiketak kontrolen lerro berean

Adibide inprimakiak inprimaki-kontrolak soilik erabiliz, marka gehigarririk gabe

Oinarrizko forma

Lehenetsi adimentsuak eta arinak marka gehigarririk gabe.

Bloke-mailako laguntza testuaren adibidea hemen.

  1. <form class = "ondo" >
  2. <label> Etiketa izena </label>
  3. <input type = "text" class = "span3" placeholder = "Idatzi zerbait..." >
  4. <span class = "help-block" > Bloke-mailako laguntza testuaren adibidea hemen. </span>
  5. <label class = "marka-laukia" >
  6. <input type = "checkbox" > Begira nazazu
  7. </label>
  8. <button type = "submit" class = "btn" > Bidali </button>
  9. </form>

Bilaketa formularioa

Gehitu .form-searchformulariora .search-queryeta input.

  1. <form class = "inprimaki-bilaketa ondo" >
  2. <input type = "text" class = "sarrera-erdiko bilaketa-kontsulta" >
  3. <button type = "submit" class = "btn" > Bilatu </button>
  4. </form>

Lineako formularioa

Gehitu .form-inlineinprimaki-kontrolen lerrokadura bertikala eta tartea fintzeko.

  1. <form class = "ondo inprimakia lerroan" >
  2. <input type = "text" class = "input-small" placeholder = "E-posta" >
  3. <input type = "password" class = "input-small" placeholder = "Pasahitza" >
  4. <label class = "marka-laukia" >
  5. <input type = "checkbox" > Gogoratu nirekin
  6. </label>
  7. <button type = "submit" class = "btn" > Hasi saioa </button>
  8. </form>

Forma horizontalak

Eskuinean erakusten dira onartzen ditugun inprimaki-kontrol lehenetsi guztiak. Hona hemen buleten zerrenda:

  • testu-sarrerak (testua, pasahitza, posta elektronikoa, etab.)
  • kontrol-laukia
  • irratia
  • hautatu
  • aukera anitz
  • fitxategiaren sarrera
  • testu eremua

Forma libreko testuaz gain, HTML5 testuan oinarritutako edozein sarrera horrela agertzen da.

Adibide markaketa

Goiko inprimakiaren diseinuaren adibidea ikusita, hona hemen lehen sarrera eta kontrol taldearekin lotutako marka. Estiloa egiteko .control-group, .control-label, eta .controlsklaseak beharrezkoak dira.

  1. <form class = "forma-horizontal" >
  2. <eremu multzoa>
  3. <legend> Kondaira testua </legend>
  4. <div class = "kontrol-taldea" >
  5. <label class = "control-label" for = "input01" > Testu-sarrera </label>
  6. <div class = "kontrolak" >
  7. <input type = "text" class = "input-xlarge" id = "sarrera01" >
  8. <p class = "help-block" > Laguntza- testua lagungarria </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Inprimakien kontrol-egoerak

Bootstrap-ek arakatzaileak onartzen dituen fokatutako eta disabledestatuetarako estiloak ditu. Webkit lehenetsia kentzen dugu eta bere lekuan outlinea aplikatzen dugu .box-shadow:focus


Formularioaren baliozkotzea

Akatsak, abisuak eta arrakastaren baliozkotze estiloak ere biltzen ditu. Erabiltzeko, gehitu errore-klasea ingurukoari .control-group.

  1. <eremu multzoa
  2. class = "kontrol-taldearen errorea" >
  3. </fieldset>
Hemen balio batzuk
Baliteke zerbait gaizki ateratzea
Mesedez, zuzendu errorea
Aupa!
Aupa!

Inprimaki-kontrolak zabaltzea

Sarrerak aurretik jarri eta erantsi

Sarrera-taldeek (testua erantsia edo aurretik jarrita) zure sarrerak testuinguru gehiago emateko modu erraz bat eskaintzen dute. Adibide bikainak dira @ ikurra Twitterren erabiltzaile-izenetarako edo $ finantzaketarako.


Koadroak eta irratiak

1.4 bertsiora arte, Bootstrap-ek markaketa gehigarria behar zuen kontrol-lauki eta irratien inguruan pilatzeko. Orain, gauza sinplea da itzultzen duen <label class="checkbox">hori errepikatzea <input type="checkbox">.

Sareko kontrol-laukiak eta irratiak ere onartzen dira. Gehitu .inlineedozein .checkboxedo .radioeta listo.


Sartu inprimakiak eta erantsi/aurrez

Aurrez aurreko edo eransteko sarrerak lerro-forma batean erabiltzeko, ziurtatu .add-oneta inputlerro berean jartzen duzula, zuriunerik gabe.


Inprimakiaren laguntza-testua

Inprimaki-sarrerak egiteko laguntza-testua gehitzeko, sartu lerroko laguntza-testua <span class="help-inline">edo laguntza-testu-bloke bat <p class="help-block">sarrerako elementuaren ondoren.

Erabili .span*sare-sistemako klase berdinak sarrera-tamainetarako.

Sarearekin mapatzen ez diren klase estatikoak ere erabil ditzakezu, CSS estilo sentikorretara egokitzen ez direnak edo kontrol mota desberdinak kontuan hartzen dituztenak (adibidez, inputvs. select).

@

Hona hemen laguntza-testu batzuk

.00
Hona hemen laguntza-testu gehiago
$ .00

Oharra: etiketak aukera guztiak inguratzen ditu klik eremu askoz handiagoak eta forma erabilgarriagoa lortzeko.

Botoia klase="" Deskribapena
btn Botoi gris estandarra gradientearekin
btn btn-primary Pisu bisual gehigarria ematen du eta ekintza nagusia identifikatzen du botoi multzo batean
btn btn-info Estilo lehenetsien alternatiba gisa erabiltzen da
btn btn-success Ekintza arrakastatsua edo positiboa adierazten du
btn btn-warning Ekintza honekin kontuz ibili behar dela adierazten du
btn btn-danger Ekintza arriskutsua edo negatiboa izan daitekeen bat adierazten du
btn btn-inverse Ordezko botoi gris iluna, ekintza edo erabilera semantiko bati lotuta ez dagoena

Ekintzak egiteko botoiak

Konbentzio gisa, botoiak ekintzetarako soilik erabili behar dira hiperestekak objektuetarako erabili behar diren bitartean. Esate baterako, "Deskargatu" botoi bat izan behar da eta "azken jarduerak" esteka izan behar du.

Botoien estiloak .btnklasea aplikatuta dagoen edozertan aplika daitezke. <a>Hala ere, normalean hauek eta <button>elementuei soilik aplikatu nahi dituzu .

Arakatzaileen arteko bateragarritasuna

IE9-k ez ditu atzeko planoko gradienteak mozten ertz biribilduetan, beraz, kentzen dugu. Erlazionatuta, IE9-k desgaitutako elementuak jankifies buttonditu, testua grisa bihurtuz konpondu ezin dugun testu-itzal gaizto batekin.

Tamaina anitz

Botoi handiagoak edo txikiagoak nahi dituzu? Gehitu .btn-large, .btn-small, edo .btn-minibeste bi tamainatarako.


Ezindu egoera

Desgaitutako botoietarako, gehitu .disabledklasea esteketan eta elementuen disabledatributua .<button>

Lotura nagusia Esteka

Buruak gora! Hemen erabilgarritasun-klase gisa erabiltzen dugu .disabled, klase arruntaren antzekoa .active, beraz, ez da aurrizkirik behar.

Klase bat, etiketa anitz

Erabili .btnklasea <a>, <button>, edo <input>elementu batean.

Esteka
  1. <a class = "btn" href = "" > Esteka </a>
  2. <button class = "btn" type = "bidali" >
  3. Botoia
  4. </button>
  5. <sarrera klasea = "btn" type = "botoia"
  6. balioa = "Sarrera" >
  7. <sarrera klasea = "btn" type = "bidali"
  8. balioa = "Bidali" >

Praktika onena gisa, saiatu elementua zure testuingururako bat etortzen arakatzaileen arteko errendatzea ziurtatzeko. Bat baduzu input, erabili <input type="submit">botoi bat.

  • ikono-beira
  • ikono-musika
  • ikono-bilaketa
  • ikono-kartazala
  • ikono-bihotza
  • ikono-izar
  • ikono-izar-hutsik
  • ikono-erabiltzailea
  • ikono-filma
  • ikono-th-handi
  • ikono-th
  • ikono-garren zerrenda
  • ikonoa-ok
  • ikonoa kendu
  • ikonoa handitu
  • ikonoa txikiagotu
  • ikonoa desaktibatuta
  • ikono-seinalea
  • ikono-kog
  • ikono-zaborrontzia
  • ikono-etxea
  • ikono-fitxategia
  • ikono-denbora
  • ikono-bide
  • ikonoa-deskargatu-alt
  • ikonoa-deskarga
  • ikono-kargatu
  • ikono-sarrera-ontzia
  • ikono-jolas-zirkulu
  • ikono-errepikatu
  • ikonoa-freskatu
  • ikono-zerrenda-alt
  • ikono-blokeoa
  • ikono-bandera
  • ikono-aurikularra
  • ikono-bolumena-desaktibatu
  • ikonoa-bolumena-behera
  • ikono-bolumena igo
  • ikono-qrcode
  • ikono-barra kodea
  • ikono-etiketa
  • ikono-etiketak
  • ikono-liburua
  • ikono-laster-marka
  • ikono-inprimaketa
  • ikono-kamera
  • ikono-letra-tipoa
  • ikono-lodia
  • ikono-etenkaria
  • ikono-testu-altuera
  • ikono-testua-zabalera
  • ikonoa-lerrokatu-ezkerrera
  • ikono-lerrokatu-zentroa
  • ikonoa-lerrokatu-eskuinean
  • ikonoa-lerrokatu-justifikatu
  • ikono-zerrenda
  • ikono-koska-ezkerrera
  • ikono-koska-eskuin
  • ikono-facetime-bideoa
  • ikono-irudia
  • ikono-arkatza
  • ikono-mapa-markatzailea
  • ikono-doitu
  • ikono-tinta
  • ikono-editatu
  • ikono-partekatzea
  • ikono-egiaztapena
  • ikono-mugimendua
  • ikono-pauso-atzera
  • ikonoa-azkar-atzera
  • ikono-atzera
  • ikono-jolasa
  • ikono-pausa
  • ikono-stop
  • ikonoa-aurrera
  • ikonoa-azkar-aurrera
  • ikono-pauso-aurrera
  • ikonoa kanporatzea
  • ikono-chevron-ezkerrera
  • ikonoa-chevron-eskuinekoa
  • ikono-plus-seinalea
  • ikono-minus-ikurra
  • ikonoa-kendu-seinalea
  • ikono-ok-seinalea
  • ikono-galdera-seinalea
  • ikono-info-seinalea
  • ikono-pantaila-argazkia
  • ikonoa-kendu-zirkulua
  • ikono-ok-zirkulu
  • ikono-debeku-zirkulu
  • ikonoa-gezia-ezkerrera
  • ikonoa-gezia-eskuinera
  • ikono-gezia-gora
  • ikonoa-gezia-behera
  • ikono-partekatu-alt
  • ikono-tamaina aldatzea-osoa
  • ikonoa-tamaina aldatzea-txikia
  • ikono-plus
  • ikono-minus
  • ikono-asterisko
  • ikono-harridura-seinalea
  • ikono-opari
  • ikono-hostoa
  • ikono-sua
  • ikono-begi-zabalik
  • ikono-begi-itxi
  • ikono-abisu-seinalea
  • ikono-hegazkina
  • ikono-egutegia
  • ikonoa-ausazkoa
  • ikono-iruzkina
  • ikono-imana
  • ikono-chevron-gora
  • ikonoa-chevron-behera
  • ikonoa-retweet
  • ikono-erosketa-saskia
  • ikono-karpeta-itxi
  • ikono-karpeta-ireki
  • ikonoa-tamaina aldatzea-bertikala
  • ikono-tamaina aldatzea-horizontal
  • ikono-hdd
  • ikono-zezena
  • ikono-kanpaia
  • ikono-ziurtagiria
  • ikono-erpurua-gora
  • ikonoa-erpurua-behera
  • ikono-esku-eskuin
  • ikonoa-eskua-ezkerrera
  • ikono-eskua gora
  • ikono-eskutik behera
  • ikono-zirkulu-gezia-eskuinera
  • ikono-zirkulu-gezia-ezkerrera
  • ikono-zirkulu-gezia-gora
  • ikonoa-zirkulua-gezia-behera
  • ikono-globoa
  • ikono-giltza
  • ikono-zereginak
  • ikono-iragazkia
  • ikono-maletina
  • ikono-pantaila osoa

Sprite gisa eraikia

Ikono bakoitza eskaera gehigarri bat egin beharrean, sprite batean bildu ditugu, irudiak fitxategi batean CSS erabiltzen dituen irudi mordoa background-position. Twitter.com-en erabiltzen dugun metodo bera da eta ondo funtzionatu digu.

Ikono-klase guztiek aurrizkia .icon-dute izen-tarte eta esparru egokirako, gure gainerako osagaien antzera. Horrek beste tresna batzuekiko gatazkak saihesten lagunduko du.

Glyphicons -ek gure kode irekiko tresna-kutxako Halflings multzoa erabiltzeko baimena eman digu, dokumentuetan esteka eta kreditu bat ematen badugu hemen. Mesedez, kontuan hartu gauza bera egitea zure proiektuetan.

Nola erabili

Bootstrap -ek <i>etiketa bat erabiltzen du ikono guztientzat, baina ez dute kasu-klaserik, partekatutako aurrizki bat baizik. Erabiltzeko, jarri kode hau ia edozein lekutan:

  1. <i class = "ikono-bilaketa" ></i>

Alderantzizko (zuriak) ikonoentzako estiloak ere eskuragarri daude, klase gehigarri batekin prestatuta:

  1. <i class = "ikono-bilaketa ikono-zuria" ></i>

Zure ikonoetarako 140 klase daude aukeran. Gehitu <i>etiketa bat klase egokiekin eta listo. Zerrenda osoa sprites.less -en aurki dezakezu edo hementxe dokumentu honetan.

Buruak gora! Testu-kateen ondoan erabiltzen duzunean, botoietan edo nabigazio-esteketan bezala, ziurtatu <i>etiketaren ondoren tarte bat uzten duzula tarte egokia izateko.

Erabilera kasuak

Ikonoak bikainak dira, baina non erabiliko lirateke? Hona hemen ideia batzuk:

  • Zure alboko barran nabigaziorako bisual gisa
  • Ikonoek gidatutako nabigazio huts baterako
  • Ekintza baten esanahia transmititzen laguntzeko botoietarako
  • Erabiltzaile baten helmugan testuingurua partekatzeko estekekin

Funtsean, <i>etiketa bat jarri dezakezun lekuan, ikono bat jar dezakezu.

Adibideak

Erabili itzazu botoietan, botoi-taldeetan tresna-barran, nabigazioan edo inprimaki-sarreran.