Osnovni CSS

Na vrhu odra so osnovni elementi HTML oblikovani in izboljšani z razširljivimi razredi, da zagotovijo svež, dosleden videz in občutek.

Naslovi in ​​telo besedila

Tipografsko merilo

Celotna tipografska mreža temelji na dveh spremenljivkah Less v naši datoteki variables.less: @baseFontSizein @baseLineHeight. Prva je osnovna velikost pisave, ki se uporablja povsod, druga pa je osnovna višina vrstice.

Te spremenljivke in nekaj matematike uporabljamo za ustvarjanje robov, oblazinjenj in višin vrstic vseh naših vrst in še več.

Primer besedila telesa

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Glavna kopija telesa

Naj odstavek izstopa z dodajanjem .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

h1. Naslov 1

h2. Naslov 2

h3. Naslov 3

h4. Naslov 4

h5. Naslov 5
h6. Naslov 6

Poudarek, naslov in okrajšava

Element Uporaba Neobvezno
<strong> Za poudarjanje delčka besedila s pomembnim Noben
<em> Za poudarjanje delčka besedila s poudarkom Noben
<abbr> Prelomi okrajšave in akronime za prikaz razširjene različice ob lebdenju

Vključi izbirni titleatribut za razširjeno besedilo

.initialismZa okrajšave z velikimi črkami uporabite razred.
<address> Za kontaktne podatke za najbližjega prednika ali celotno delo Ohranite oblikovanje tako, da končate vse vrstice z<br>

Uporaba poudarka

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

Opomba: lahko uporabite <b>in <i>v HTML5, vendar se je njihova uporaba nekoliko spremenila. <b>je namenjeno poudarjanju besed ali besednih zvez brez izražanja dodatnega pomena, medtem ko <i>je večinoma za glas, tehnične izraze itd.

Primeri naslovov

Tu sta dva primera uporabe <address>oznake:

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

Primeri okrajšav

Okrajšave z titleatributom imajo svetlo pikčasto spodnjo obrobo in kazalec pomoči ob lebdenju. To daje uporabnikom dodatno navedbo, da bo nekaj prikazano ob premikanju miške.

Okrajšavi dodajte initialismrazred, da povečate tipografsko harmonijo, tako da ji dodelite nekoliko manjšo velikost besedila.

HTML je najboljša stvar od narezanega kruha.

Okrajšava besede atribut je attr .

Blockquotes

Element Uporaba Neobvezno
<blockquote> Element na ravni bloka za citiranje vsebine iz drugega vira

Dodajte citeatribut za izvorni URL

Uporaba .pull-leftin .pull-rightrazredi za plavajoče možnosti
<small> Izbirni element za dodajanje citata, ki ga vidi uporabnik, običajno avtorja z naslovom dela Postavite <cite>okrog naslova ali imena vira

Če želite vključiti narekovaj bloka, zavijte <blockquote>kateri koli HTML kot narekovaj. Za neposredne ponudbe priporočamo <p>.

Vključite izbirni <small>element za navedbo vira in pred njim boste dobili pomišljaj em &mdash;za stilske namene.

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

Primer blokovnih citatov

Privzeti narekovaji so oblikovani tako:

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

Nekdo znan v svojem delu

Če želite svoj blok citat premakniti na desno, dodajte class="pull-right":

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

Nekdo znan v svojem delu

Seznami

Neurejeno

<ul>

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

Brez sloga

<ul class="unstyled">

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

Naročeno

<ol>

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

Opis

<dl>

Seznami opisov
Opisni seznam je kot nalašč za definiranje izrazov.
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.

Horizontalni opis

<dl class="dl-horizontal">

Seznami opisov
Opisni seznam je kot nalašč za definiranje izrazov.
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, ut fermentum massa justo sit amet risus.

Glavo pokonci! Horizontalni opisni seznami bodo skrajšali izraze, ki so predolgi, da bi se prilegali popravku v levem stolpcu text-overflow. V ožjih pogledih se bodo spremenili v privzeto naloženo postavitev.

V vrsti

Zavijte vstavljene delčke kode z <code>.

  1. Na primer , razdelek < code> </ code > bi moral biti zavit kot vstavljeni .

Osnovni blok

Uporabite <pre>za več vrstic kode. Prepričajte se, da ste izognili morebitnim oglatim oklepajem v kodi za pravilno upodabljanje.

<p>Tukaj je primer besedila ...</p>
  1. <pred>
  2. <p>Tukaj je primer besedila ...</p>
  3. </pre>

Opomba: poskrbite, da bo koda znotraj <pre>oznak čim bližje levi; upodobil bo vse zavihke.

Po želji lahko dodate .pre-scrollablerazred, ki bo nastavil največjo višino 350 slikovnih pik in zagotovil drsni trak na osi y.

Google Prettify

Vzemite isti <pre>element in dodajte dva izbirna razreda za izboljšano upodabljanje.

  1. <p> Vzorčno besedilo tukaj... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Tukaj je primer besedila ...</p>
  4. </pre>

Prenesite google-code-prettify in si oglejte readme za uporabo.

Oznaka tabele

Oznaka Opis
<table> Ovojni element za prikaz podatkov v obliki tabele
<thead> Element vsebnika za vrstice glave tabele ( <tr>) za označevanje stolpcev tabele
<tbody> Vsebniški element za vrstice tabele ( <tr>) v telesu tabele
<tr> Vsebniški element za niz celic tabele ( <td>ali <th>), ki se pojavi v eni vrstici
<td> Privzeta celica tabele
<th> Posebna celica tabele za oznake stolpcev (ali vrstic, odvisno od obsega in umestitve)
Mora biti uporabljena znotraj a<thead>
<caption> Opis ali povzetek tega, kar tabela vsebuje, še posebej uporabno za bralnike zaslona
  1. <tabela>
  2. <thead>
  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>

Možnosti tabele

Ime Razred Opis
Privzeto Noben Brez slogov, samo stolpci in vrstice
Osnovno .table Samo vodoravne črte med vrsticami
Obrobljen .table-bordered Zaokroži vogale in doda zunanji rob
Zebra-trak .table-striped Lihim vrsticam (1, 3, 5 itd.) doda svetlo sivo barvo ozadja.
Zgoščeno .table-condensed Razpolovi navpični odmik, z 8 slikovnih pik na 4 slikovne pike, znotraj vseh elementov tdinth

Primeri tabel

1. Privzeti slogi tabel

Tabele so samodejno oblikovane z le nekaj robovi, da se zagotovi berljivost in ohrani struktura. Pri 2.0 je .tablerazred obvezen.

  1. <table class = "table" >
  2. </table>
# Ime Priimek Uporabniško ime
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Larry ptica @twitter

2. Črtasta miza

Bodite malo navdušeni nad svojimi mizami, tako da dodate zebraste črte – samo dodajte .table-stripedrazred.

Opomba: črtaste tabele uporabljajo :nth-childizbirnik CSS in ni na voljo v IE7-IE8.

  1. <table class = "table table-striped" >
  2. </table>
# Ime Priimek Uporabniško ime
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Larry ptica @twitter

3. Obrobljena miza

Dodajte obrobe okoli celotne mize in zaobljene vogale za estetske namene.

  1. <table class = "table table-bordered" >
  2. </table>
# Ime Priimek Uporabniško ime
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Jacob Thornton @debela
3 Ptica Larry @twitter

4. Zgoščena tabela

Naredite svoje tabele bolj kompaktne tako, da dodate .table-condensedrazred za prepolovitev oblazinjenja celic tabele (z 8 slikovnih pik na 4 slikovne pike).

  1. <table class = "table table-condensed" >
  2. </table>
# Ime Priimek Uporabniško ime
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Ptica Larry @twitter

5. Združite vse!

Prosto kombinirajte kateri koli razred tabel, da dosežete različne videze z uporabo katerega koli od razpoložljivih razredov.

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </table>
Polno ime
# Ime Priimek Uporabniško ime
1 Mark Otto @mdo
2 Jacob Thornton @debela
3 Ptica Larry @twitter

Prilagodljiv HTML in CSS

Najboljši del obrazcev v Bootstrapu je, da so vsi vaši vnosi in kontrolniki videti odlično, ne glede na to, kako jih zgradite v svojem označevanju. Odvečen HTML ni potreben, vendar nudimo vzorce za tiste, ki ga potrebujejo.

Bolj zapletene postavitve imajo jedrnate in razširljive razrede za preprosto oblikovanje in povezovanje dogodkov, tako da ste pokriti na vsakem koraku.

Vključene so štiri postavitve

Bootstrap ima podporo za štiri vrste postavitev obrazcev:

  • Navpično (privzeto)
  • Iskanje
  • V vrsti
  • Vodoravno

Različne vrste postavitev obrazcev zahtevajo nekaj sprememb v označevanju, vendar sami kontrolniki ostajajo in se obnašajo enako.

Kontrolna stanja in več

Bootstrapovi obrazci vključujejo sloge za vse osnovne kontrolnike obrazcev, kot so vnos, besedilno polje in izbira, ki bi jo pričakovali. Prihaja pa tudi s številnimi komponentami po meri, kot so priloženi in predpridani vnosi ter podporo za sezname potrditvenih polj.

Stanja, kot so napaka, opozorilo in uspeh, so vključena za vsako vrsto nadzora obrazca. Vključeni so tudi slogi za onemogočene kontrole.

Štiri vrste obrazcev

Bootstrap ponuja preproste oznake in sloge za štiri sloge običajnih spletnih obrazcev.

Ime Razred Opis
Navpično (privzeto) .form-vertical (ni zahtevano) Zložene, levo poravnane oznake nad kontrolniki
V vrsti .form-inline Levo poravnana oznaka in kontrolniki blokov v vrstici za kompakten slog
Iskanje .form-search Izredno zaobljen vnos besedila za tipično estetiko iskanja
Vodoravno .form-horizontal Lebdeče levo, desno poravnane oznake v isti vrstici kot kontrolniki

Primeri obrazcev , ki uporabljajo samo kontrolnike obrazcev, brez dodatnih oznak

Osnovna oblika

Pametne in lahke privzete nastavitve brez dodatnih oznak.

Tukaj je primer besedila pomoči na ravni bloka.

  1. <form class = "well" >
  2. <label> Ime oznake </label>
  3. <input type = "text" class = "span3" placeholder = "Vnesite nekaj ..." >
  4. <span class = "help-block" > Tukaj je primer besedila pomoči na ravni bloka. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > Preverite me
  7. </label>
  8. <button type = "submit" class = "btn" > Pošlji </button>
  9. </form>

Iskalni obrazec

Dodaj .form-searchv obrazec in .search-queryv input.

  1. <form class = "well form-search" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > Iskanje </button>
  4. </form>

Inline oblika

Za prefinjenost dodajte .form-inlinenavpično poravnavo in razmik kontrolnikov obrazca.

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Email" >
  3. <input type = "password" class = "input-small" placeholder = "Password" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > Zapomni si me
  6. </label>
  7. <button type = "submit" class = "btn" > Prijavite se </button>
  8. </form>

Horizontalne oblike

Na desni so prikazani vsi privzeti kontrolniki obrazcev, ki jih podpiramo. Tukaj je seznam z oznakami:

  • vnos besedila (besedilo, geslo, e-pošta itd.)
  • potrditveno polje
  • radio
  • izberite
  • večkratna izbira
  • vnos datoteke
  • textarea

Poleg besedila v prosti obliki je vsak vnos besedila HTML5 videti tako.

Primer oznake

Glede na zgornji primer postavitve obrazca je tukaj oznaka, povezana s prvo vnosno in nadzorno skupino. Vsi razredi .control-group, .control-label, in .controlsso potrebni za oblikovanje.

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> Besedilo legende </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > Vnos besedila </label>
  6. <div class = "controls" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Podporno besedilo pomoči </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Nadzorna stanja obrazca

disabledBootstrap vsebuje sloge za osredotočena in stanja , ki jih podpira brskalnik . Odstranimo privzeti Webkit outlinein namesto njega uporabimo a box-shadowza :focus.


Preverjanje obrazca

Vključuje tudi sloge preverjanja napak, opozoril in uspeha. Za uporabo dodajte razred napak v okolico .control-group.

  1. <fieldset
  2. class = "napaka kontrolne skupine" >
  3. </fieldset>
Tukaj je nekaj vrednosti
Morda je šlo kaj narobe
Popravite napako
Juhu!
Juhu!

Razširitev kontrol obrazca

Dodajanje in dodajanje vnosov

Skupine vnosov – z dodanim ali predpridanim besedilom – nudijo preprost način za zagotavljanje več konteksta za vaše vnose. Odlični primeri vključujejo znak @ za uporabniška imena za Twitter ali $ za finance.


Potrditvena polja in radijski sprejemniki

Do različice 1.4 je Bootstrap zahteval dodatno oznako okoli potrditvenih polj in radijskih postaj, da jih je zložil. Zdaj je preprosto ponavljanje, <label class="checkbox">ki ovije <input type="checkbox">.

Podprta so tudi vgrajena potrditvena polja in radijski sprejemniki. Samo dodajte .inlinekateremu koli .checkboxali .radioin končali ste.


Vstavljeni obrazci in dodajanje/pripenjanje

Če želite uporabiti vnose za dodajanje ali dodajanje v obliki v vrstici, ne pozabite postaviti .add-onin inputv isto vrstico, brez presledkov.


Besedilo pomoči obrazca

Če želite dodati besedilo pomoči za vnose v obrazec, vključite besedilo pomoči v vrstici z <span class="help-inline">ali blok besedila pomoči z <p class="help-block">za elementom vnosa.

Za vnosne velikosti uporabite iste .span*razrede iz mrežnega sistema.

Uporabite lahko tudi statične razrede, ki se ne preslikavajo v mrežo, se prilagajajo odzivnim slogom CSS ali upoštevajo različne vrste kontrolnikov (npr. inputproti select).

@

Tukaj je nekaj besedila pomoči

0,00
Tukaj je še besedilo pomoči
$ 0,00

Opomba: Oznake obdajajo vse možnosti za veliko večja področja klikanja in bolj uporaben obrazec.

Gumb razred="" Opis
btn Standardni sivi gumb s prelivom
btn btn-primary Zagotavlja dodatno vizualno težo in identificira primarno dejanje v nizu gumbov
btn btn-info Uporablja se kot alternativa privzetim slogom
btn btn-success Označuje uspešno ali pozitivno dejanje
btn btn-warning Označuje, da je pri tem dejanju potrebna previdnost
btn btn-danger Označuje nevarno ali potencialno negativno dejanje
btn btn-inverse Nadomestni temno sivi gumb, ki ni vezan na semantično dejanje ali uporabo

Gumbi za dejanja

Po dogovoru naj se gumbi uporabljajo samo za dejanja, medtem ko se hiperpovezave uporabljajo za predmete. Na primer, »Prenos« bi moral biti gumb, medtem ko bi morala biti »nedavna dejavnost« povezava.

Sloge gumbov je mogoče uporabiti za karkoli z uporabljenim .btnrazredom. Vendar pa jih boste običajno želeli uporabiti samo za <a>elemente in <button>.

Združljivost med brskalniki

IE9 ne obreže prelivov ozadja na zaobljenih vogalih, zato ga odstranimo. Povezano, IE9 onemogočene buttonelemente spremeni v jankifikacijo, tako da besedilo postane sivo z neprijetno senco besedila, ki je ne moremo popraviti.

Več velikosti

Ste všeč večji ali manjši gumbi? Dodajte .btn-large, .btn-small, ali .btn-miniza dve dodatni velikosti.


Onemogočeno stanje

Za onemogočene gumbe dodajte .disabledrazred povezavam in disabledatribut <button>elementom.

Primarna povezava Povezava

Glavo pokonci! Tu uporabljamo .disabledkot pomožni razred, podoben običajnemu .activerazredu, zato predpona ni potrebna.

En razred, več oznak

Uporabite .btnrazred na elementu <a>, <button>ali .<input>

Povezava
  1. <a class = "btn" href = "" > Povezava </a>
  2. <button class = "btn" type = "submit" >
  3. Gumb
  4. </button>
  5. <input class = "btn" type = "button"
  6. vrednost = "Vnos" >
  7. <input class = "btn" type = "submit"
  8. vrednost = "Pošlji" >

Najboljša praksa je, da poskusite element uskladiti s svojim kontekstom, da zagotovite ujemajoče se upodabljanje med brskalniki. Če imate input, uporabite <input type="submit">za gumb.

  • ikona-steklo
  • ikona-glasba
  • ikona-iskanje
  • ikona-ovojnica
  • ikona-srce
  • ikona-zvezda
  • ikona-zvezda-prazna
  • uporabnik ikone
  • ikona-film
  • ikona-th-velika
  • ikona-th
  • ikona-th-seznam
  • ikona-ok
  • ikona-odstrani
  • icon-zoom-in
  • icon-zoom-out
  • ikona izklopljena
  • ikona-signal
  • ikona-zobnik
  • ikona-smetnjak
  • ikona-dom
  • ikona-datoteka
  • ikona-čas
  • ikona-cesta
  • ikona-prenos-alt
  • ikona za prenos
  • nalaganje ikon
  • ikona-prejeto
  • ikona-igra-krog
  • ikona-ponovitev
  • ikona-osvežitev
  • ikona-seznam-alt
  • ikona-ključavnica
  • ikona-zastavica
  • ikona-slušalke
  • ikona-izklop glasnosti
  • ikona-zmanjšanje glasnosti
  • ikona za povečanje glasnosti
  • ikona-qrcode
  • ikona-črtna koda
  • oznaka ikone
  • oznake ikon
  • knjiga ikon
  • ikona-zaznamek
  • tisk ikon
  • ikona-kamera
  • ikona-pisava
  • ikona-krepko
  • ikona-ležeče
  • višina-besedila ikone
  • icon-text-width
  • ikona-poravnaj-levo
  • icon-align-center
  • ikona-poravnaj-desno
  • icon-align-justify
  • seznam ikon
  • icon-indent-left
  • icon-indent-desno
  • icon-facetime-video
  • ikona-slika
  • ikona-svinčnik
  • ikona-zemljevid-marker
  • prilagoditev ikon
  • odtenek ikon
  • urejanje ikon
  • delitev ikon
  • preverjanje ikon
  • ikona-premik
  • ikona-korak-nazaj
  • ikona-hitro-nazaj
  • ikona-nazaj
  • igranje ikon
  • ikona-pavza
  • ikona-stop
  • ikona-naprej
  • ikona-hitro naprej
  • ikona-korak-naprej
  • ikona-izmet
  • ikona-ševron-levo
  • ikona-ševron-desno
  • ikona-plus-znak
  • ikona-znak-minus
  • ikona-odstrani-znak
  • ikona-ok-znak
  • ikona-vprašanje-znak
  • ikona-info-znak
  • ikona-posnetek zaslona
  • ikona-odstrani-krog
  • ikona-ok-krog
  • ikona-prepoved-krog
  • ikona-puščica-levo
  • ikona-puščica-desno
  • ikona-puščica-gor
  • ikona-puščica-dol
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • ikona-plus
  • ikona-minus
  • ikona-zvezdica
  • ikona-klicaj-znak
  • ikona-darilo
  • ikona-list
  • ikona-ogenj
  • ikona-odprto oko
  • ikona-zapiranje oči
  • ikona-opozorilni-znak
  • ikona-ravnina
  • ikona-koledar
  • ikona-naključno
  • ikona-komentar
  • ikona-magnet
  • icon-chevron-up
  • ikona-ševron-dol
  • icon-retweet
  • ikona nakupovalnega vozička
  • ikona-mapa-zapiranje
  • ikona-mapa-odprta
  • icon-resize-vertical
  • icon-resize-horizontal
  • ikona-hdd
  • ikona megafon
  • ikona-zvon
  • ikona-certifikat
  • ikona-palec gor
  • ikona-palec-dol
  • ikona-desna-roka
  • ikona-leva-roka
  • ikona-roka navzgor
  • ikona-roka-dol
  • ikona-krog-puščica-desno
  • ikona-krog-puščica-levo
  • ikona-krog-puščica-gor
  • ikona-krog-puščica-dol
  • ikona-globus
  • ikona-ključ
  • ikona-naloge
  • ikona-filter
  • ikona-aktovka
  • ikona-celozaslonski

Zgrajen kot sprite

Namesto da bi bila vsaka ikona dodatna zahteva, smo jih sestavili v sprite – kup slik v eni datoteki, ki uporablja CSS za pozicioniranje slik z background-position. To je ista metoda, ki jo uporabljamo na Twitter.com in se nam je dobro obnesla.

Vsi razredi ikon imajo predpono .icon-za pravilen imenski prostor in obseg, podobno kot naše druge komponente. To bo pomagalo preprečiti konflikte z drugimi orodji.

Glyphicons nam je odobril uporabo nabora Halflings v našem odprtokodnem naboru orodij, če zagotovimo povezavo in kredit tukaj v dokumentih. Prosimo, razmislite o tem, da bi v svojih projektih storili enako.

Kako uporabiti

Bootstrap uporablja <i>oznako za vse ikone, vendar nimajo razreda velikih in malih črk – samo skupno predpono. Za uporabo postavite naslednjo kodo skoraj kamor koli:

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

Na voljo so tudi slogi za obrnjene (bele) ikone, ki so pripravljeni z enim dodatnim razredom:

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

Za svoje ikone lahko izbirate med 140 razredi. Samo dodajte <i>oznako s pravimi razredi in pripravljeni ste. Celoten seznam najdete v sprites.less ali kar tukaj v tem dokumentu.

Glavo pokonci! Pri uporabi poleg nizov besedila, na primer pri gumbih ali navigacijskih povezavah, ne pozabite pustiti presledka za <i>oznako za pravilen razmik.

Primeri uporabe

Ikone so super, ampak kje bi jih človek uporabil? Tukaj je nekaj idej:

  • Kot vizualni elementi za vašo stransko navigacijo
  • Za navigacijo, ki temelji izključno na ikonah
  • Za gumbe, ki pomagajo prenesti pomen dejanja
  • S povezavami za skupno rabo konteksta na uporabnikovem cilju

V bistvu, kamor koli lahko postavite <i>oznako, lahko postavite ikono.

Primeri

Uporabite jih v gumbih, skupinah gumbov za orodno vrstico, navigacijo ali predpriložene vnose obrazcev.