Base CSS

Povrh skele, osnovni HTML elementi su stilizovani i poboljšani proširivim klasama kako bi se obezbedio svež, dosledan izgled i osećaj.

Naslovi i kopija tijela

Tipografska skala

Cijela tipografska mreža je zasnovana na dvije varijable Less u našoj datoteci varijabli.less: @baseFontSizei @baseLineHeight. Prva je osnovna veličina fonta koja se koristi u cijelom, a druga je visina osnovne linije.

Koristimo te varijable, i malo matematike, da kreiramo margine, dopune i visine linija svih naših tipova i još mnogo toga.

Primjer osnovnog teksta

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.

Kopija glavnog tijela

Istaknite pasus dodavanjem .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

Naglasak, adresa i skraćenica

Element Upotreba Opciono
<strong> Za isticanje isječka teksta sa važnim Nema
<em> Za isticanje isječka teksta sa naglaskom Nema
<abbr> Omotava kratice i akronime da prikaže proširenu verziju pri lebdenju

Uključite opcijski titleatribut za prošireni tekst

Koristite .initialismklasu za velike skraćenice.
<address> Za kontakt informacije za najbližeg pretka ili cjelokupni rad Sačuvajte formatiranje završavajući sve redove sa<br>

Koristeći naglasak

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.

Napomena: Slobodno koristite <b>i <i>u HTML5, ali njihova upotreba se malo promijenila. <b>je namijenjen da istakne riječi ili fraze bez prenošenja dodatne važnosti, dok <i>je uglavnom za glas, tehničke termine itd.

Primjeri adresa

Evo dva primjera kako se <address>oznaka može koristiti:

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

Primjeri skraćenica

Skraćenice sa titleatributom imaju donji rub sa svijetlim točkama i kursor pomoći pri lebdenju. Ovo korisnicima daje dodatnu indikaciju da će se nešto prikazati kada lebde.

Dodajte initialismklasu skraćenici da povećate tipografski sklad dajući joj nešto manju veličinu teksta.

HTML je najbolja stvar od narezanog kruha.

Skraćenica riječi atribut je attr .

Blockquotes

Element Upotreba Opciono
<blockquote> Element na nivou bloka za citiranje sadržaja iz drugog izvora

Dodajte citeatribut za izvorni URL

Upotreba .pull-lefti .pull-rightklase za plutajuće opcije
<small> Opcioni element za dodavanje citata okrenutog korisniku, obično autora s naslovom rada Stavite <cite>oko naslova ili imena izvora

Da biste uključili blok citat, omotajte <blockquote>bilo koji HTML kao citat. Za direktne citate preporučujemo <p>.

Uključite neobavezni <small>element za citiranje izvora i prije njega ćete dobiti em crticu &mdash;u svrhu stiliziranja.

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

Primjer blok citata

Zadani blok citati su stilizirani ovako:

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

Neko poznat u Body of Work

Da pomaknete svoj blok citat udesno, dodajte class="pull-right":

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

Neko poznat u Body of Work

Liste

Neuređeno

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer 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 at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Unstyled

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer 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 at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Naručeno

<ol>

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

Opis

<dl>

Liste opisa
Lista opisa je savršena za definiranje pojmova.
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">

Liste opisa
Lista opisa je savršena za definiranje pojmova.
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.

Glavu gore! Horizontalne liste opisa će skratiti pojmove koji su predugački da bi stali u ispravku lijevog stupca text-overflow. U užim okvirima za prikaz, oni će se promijeniti u zadani naslagani izgled.

U redu

Zamotajte umetnute isječke koda sa <code>.

  1. Na primjer , <code> odjeljak </ code > treba biti umotan kao inline .

Osnovni blok

Koristi <pre>se za više redova koda. Obavezno izbacite sve ugaone zagrade u kodu radi pravilnog prikazivanja.

<p>Primjer teksta ovdje...</p>
  1. <pre>
  2. <p>Primjer teksta ovdje...</p>
  3. </pre>

Napomena: Obavezno držite kod unutar <pre>oznaka što je moguće bliže lijevoj strani; to će prikazati sve kartice.

Opciono možete dodati .pre-scrollableklasu koja će postaviti maksimalnu visinu od 350px i obezbediti traku za pomeranje po y osi.

Google Prettify

Uzmite isti <pre>element i dodajte dvije opcione klase za poboljšano prikazivanje.

  1. <p> Primjer teksta ovdje... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Primjer teksta ovdje...</p>
  4. </pre>

Preuzmite google-code-prettify i pogledajte readme za korištenje.

Markup tabele

Tag Opis
<table> Element omotača za prikaz podataka u tabelarnom formatu
<thead> Element kontejnera za redove zaglavlja tabele ( <tr>) za označavanje kolona tabele
<tbody> Element kontejnera za redove tabele ( <tr>) u telu tabele
<tr> Element kontejnera za skup ćelija tabele ( <td>ili <th>) koji se pojavljuje u jednom redu
<td> Zadana ćelija tabele
<th> Posebna ćelija tabele za oznake kolone (ili reda, u zavisnosti od opsega i položaja)
Mora se koristiti unutar a<thead>
<caption> Opis ili sažetak onoga što tabela sadrži, posebno korisno za čitače ekrana
  1. <tablica>
  2. <glava>
  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>

Opcije tabele

Ime Klasa Opis
Default Nema Nema stilova, samo kolone i redovi
Basic .table Samo horizontalne linije između redova
Bordered .table-bordered Zaokružuje uglove i dodaje vanjsku ivicu
Zebra-pruga .table-striped Dodaje svijetlo sivu boju pozadine neparnim redovima (1, 3, 5, itd.)
Kondenzirano .table-condensed Presječe vertikalni padding na pola, od 8px do 4px, unutar svih tdi thelemenata

Primjeri tablica

1. Zadani stilovi tablice

Tabele se automatski stiliziraju sa samo nekoliko ivica kako bi se osigurala čitljivost i zadržala struktura. Sa 2.0, .tableklasa je obavezna.

  1. <table class = "table" >
  2. </table>
# Ime Prezime Korisničko ime
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry ptica @twitter

2. Prugasti sto

Zamislite se malo sa svojim stolovima dodavanjem zebrastih pruga—samo dodajte .table-stripedklasu.

Napomena: prugaste tabele koriste :nth-childCSS selektor i nisu dostupne u IE7-IE8.

  1. <table class = "table table-striped" >
  2. </table>
# Ime Prezime Korisničko ime
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry ptica @twitter

3. Obrubljena tablica

Dodajte obrube oko cijelog stola i zaobljene uglove u estetske svrhe.

  1. <table class = "table table-bordered" >
  2. </table>
# Ime Prezime Korisničko ime
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Jacob Thornton @debeo
3 Larry the Bird @twitter

4. Sažeta tabela

Učinite svoje tabele kompaktnijim dodavanjem .table-condensedklase da biste prepolovili dopunu ćelija tabele (sa 8px na 4px).

  1. <tablica class = "tabela tablica-kondenzirana" >
  2. </table>
# Ime Prezime Korisničko ime
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry the Bird @twitter

5. Kombinirajte ih sve!

Slobodno kombinirajte bilo koju od klasa tablica kako biste postigli drugačiji izgled korištenjem bilo koje od dostupnih klasa.

  1. <table class = "tabela sa prugastim tablicama sa obrubljenom tablicom sa kondenziranom tablicom" >
  2. ...
  3. </table>
Puno ime
# Ime Prezime Korisničko ime
1 Mark Otto @mdo
2 Jacob Thornton @debeo
3 Larry the Bird @twitter

Fleksibilni HTML i CSS

Najbolji dio obrazaca u Bootstrapu je to što svi vaši ulazi i kontrole izgledaju sjajno bez obzira na to kako ih gradite u svojoj oznaci. Nije potreban nikakav suvišan HTML, ali pružamo obrasce za one kojima je potreban.

Komplikovaniji izgledi dolaze sa sažetim i skalabilnim klasama za jednostavno oblikovanje i povezivanje događaja, tako da ste pokriveni na svakom koraku.

Uključena četiri rasporeda

Bootstrap dolazi s podrškom za četiri vrste izgleda obrazaca:

  • Vertikalno (zadano)
  • Traži
  • U redu
  • Horizontalno

Različiti tipovi izgleda obrazaca zahtijevaju neke promjene u označavanju, ali same kontrole ostaju i ponašaju se isto.

Kontrolna stanja i još mnogo toga

Obrasci Bootstrapa uključuju stilove za sve osnovne kontrole obrasca kao što su unos, tekstualno područje i odabir koji očekujete. Ali takođe dolazi sa brojnim prilagođenim komponentama kao što su dodani i predodati ulazi i podrška za liste polja za potvrdu.

Stanja poput greške, upozorenja i uspjeha uključena su za svaki tip kontrole obrasca. Takođe su uključeni stilovi za onemogućene kontrole.

Četiri vrste obrazaca

Bootstrap pruža jednostavne oznake i stilove za četiri stila uobičajenih web obrazaca.

Ime Klasa Opis
Vertikalno (zadano) .form-vertical (nije potrebno) Naslagane, lijevo poravnate oznake preko kontrola
U redu .form-inline Lijevo poravnate oznake i kontrole u obliku bloka za kompaktan stil
Traži .form-search Ekstra zaokružen unos teksta za tipičnu estetiku pretraživanja
Horizontalno .form-horizontal Plutajući lijevo, desno poravnate oznake na istoj liniji kao i kontrole

Primjeri obrazaca koji koriste samo kontrole obrasca, bez dodatnih oznaka

Osnovni oblik

Pametne i lagane zadane postavke bez dodatnih oznaka.

Primjer teksta pomoći na nivou bloka ovdje.

  1. <form class = "well" >
  2. <label> Ime oznake </label>
  3. <input type = "text" class = "span3" placeholder = "Unesite nešto..." >
  4. <span class = "help-block" > Primjer teksta pomoći na nivou bloka ovdje. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > Provjerite me
  7. </label>
  8. <button type = "submit" class = "btn" > Pošalji </button>
  9. </form>

Obrazac za pretragu

Dodajte .form-searchu obrazac i .search-queryu input.

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

Inline formular

Dodajte .form-inlineza finoću vertikalno poravnanje i razmak kontrola obrasca.

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

Horizontalni oblici

Na desnoj strani su prikazane sve zadane kontrole obrasca koje podržavamo. Evo liste sa nabrajanjem:

  • unos teksta (tekst, lozinka, email, itd.)
  • polje za potvrdu
  • radio
  • izaberite
  • višestruki odabir
  • unos datoteke
  • textarea

Pored teksta slobodnog oblika, svaki unos teksta zasnovan na HTML5 izgleda tako.

Primjer označavanja

S obzirom na gornji primjer izgleda obrasca, ovdje je oznaka povezana s prvom ulaznom i kontrolnom grupom. Klase .control-group, .control-labeli .controlssve su potrebne za stiliziranje.

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> Tekst legende </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > Unos teksta </label>
  6. <div class = "controls" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Podržani tekst pomoći </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Kontrolna stanja obrasca

Bootstrap sadrži stilove za fokusirane i disabledstanja podržane pretraživačem. Uklanjamo podrazumevani Webkit outlinei primenjujemo a box-shadowna njegovo mesto za :focus.


Validacija obrasca

Takođe uključuje stilove validacije za greške, upozorenja i uspeh. Da biste koristili, dodajte klasu greške okolnom .control-group.

  1. <fieldset
  2. class = "greška kontrolne grupe" >
  3. </fieldset>
Neka vrijednost ovdje
Možda je nešto pošlo po zlu
Ispravite grešku
Woohoo!
Woohoo!

Proširivanje kontrola obrasca

Dodaj i dodaj ulaze

Grupe unosa—sa dodatkom ili dodatkom teksta—pružaju jednostavan način da date više konteksta za svoje unose. Sjajni primjeri uključuju znak @ za Twitter korisnička imena ili $ za finansije.


Polje za potvrdu i radio

Do v1.4, Bootstrap je zahtijevao dodatne oznake oko okvira za potvrdu i radija da bi ih slagao. Sada je jednostavno ponoviti ono <label class="checkbox">što obmotava <input type="checkbox">.

Podržani su i inline okviri za potvrdu i radio. Samo dodajte .inlineu bilo koji .checkboxili .radioi gotovi ste.


Umetnuti obrasci i dodavati/pretpolagati

Da biste koristili unose za predočenje ili dodavanje u inline formu, obavezno postavite .add-oni inputna isti red, bez razmaka.


Tekst pomoći za obrazac

Da biste dodali tekst pomoći za unose obrasca, uključite tekst pomoći sa <span class="help-inline">ili blok teksta pomoći <p class="help-block">nakon elementa unosa.

Koristite iste .span*klase iz sistema mreže za ulazne veličine.

Takođe možete koristiti statičke klase koje se ne mapiraju na mrežu, prilagođavaju se prilagodljivim CSS stilovima ili uzimaju u obzir različite tipove kontrola (npr. inputvs. select).

@

Evo malo teksta pomoći

.00
Evo još teksta pomoći
$ .00

Napomena: Oznake okružuju sve opcije za mnogo veće površine klikova i upotrebljiviju formu.

Dugme class="" Opis
btn Standardno sivo dugme sa gradijentom
btn btn-primary Pruža dodatnu vizualnu težinu i identificira primarnu radnju u setu dugmadi
btn btn-info Koristi se kao alternativa zadanim stilovima
btn btn-success Označava uspješnu ili pozitivnu akciju
btn btn-warning Označava da treba biti oprezan s ovom radnjom
btn btn-danger Ukazuje na opasnu ili potencijalno negativnu radnju
btn btn-inverse Alternativno tamno sivo dugme, nije vezano za semantičku radnju ili upotrebu

Dugmad za radnje

Kao konvencija, dugmad bi trebalo da se koriste samo za radnje, dok se hiperveze koriste za objekte. Na primjer, "Preuzmi" treba da bude dugme, dok "nedavna aktivnost" treba da bude veza.

Stilovi dugmeta se mogu primeniti na bilo šta sa .btnprimenjenom klasom. Međutim, obično ćete ih željeti primijeniti samo na <a>elemente i <button>.

Kompatibilnost među pretraživačima

IE9 ne obrezuje pozadinske gradijente na zaobljenim uglovima, pa ga uklanjamo. S tim u vezi, IE9 jankifikuje onemogućene buttonelemente, čineći tekst sivim sa gadnom senkom teksta koju ne možemo popraviti.

Više veličina

Želite veće ili manje dugmad? Dodajte .btn-large, .btn-small, ili .btn-miniza dvije dodatne veličine.


Disabled state

Za onemogućene dugmad, dodajte .disabledklasu vezama i disabledatribut za <button>elemente.

Primarna veza Veza

Glavu gore! Ovdje koristimo .disabledkao uslužnu klasu, slično uobičajenoj .activeklasi, tako da prefiks nije potreban.

Jedna klasa, više oznaka

Koristite .btnklasu na elementu <a>, <button>ili .<input>

Veza
  1. <a class = "btn" href = "" > Veza </a>
  2. <button class = "btn" type = "submit" >
  3. Dugme
  4. </button>
  5. <input class = "btn" type = "dugme"
  6. vrijednost = "Unos" >
  7. <input class = "btn" type = "submit"
  8. vrijednost = "Pošalji" >

Kao najbolju praksu, pokušajte uskladiti element za svoj kontekst kako biste osigurali podudaranje prikazivanja u više pretraživača. Ako imate input, koristite <input type="submit">za svoje dugme.

  • staklo za ikone
  • ikona-muzika
  • ikona-pretraga
  • ikona-koverta
  • ikona-srce
  • ikona-zvezda
  • ikona-zvjezdica-prazna
  • ikona-korisnik
  • ikona-film
  • ikona-th-large
  • ikona-th
  • icon-th-list
  • ikona-ok
  • ikona-ukloni
  • ikona-zum-in
  • ikona-zum-out
  • ikona isključena
  • ikona-signal
  • icon-cog
  • ikona-smeće
  • ikona-dom
  • icon-file
  • ikona-vrijeme
  • ikona-put
  • ikona-preuzimanje-alt
  • preuzimanje ikona
  • ikona-upload
  • ikona-inbox
  • ikona-igra-krug
  • ikona-ponavljanje
  • icon-refresh
  • ikona-list-alt
  • icon-lock
  • ikona-zastava
  • ikona-slušalice
  • ikona-isključena jačina zvuka
  • ikona-smanjivanje jačine zvuka
  • ikona-pojačavanje jačine zvuka
  • ikona-qrcode
  • ikona-barkod
  • ikona-oznaka
  • ikone oznake
  • knjiga ikona
  • icon-bookmark
  • icon-print
  • ikona-kamera
  • ikona-font
  • ikona podebljano
  • ikona-kurziv
  • ikona-tekst-visina
  • ikona-tekst-širina
  • ikona-poravnaj-lijevo
  • ikona-poravnanje-centar
  • ikona-poravnati-desno
  • ikona-poravnati-justify
  • lista ikona
  • ikona-uvlaka-lijevo
  • ikona-uvlaka-desno
  • ikona-facetime-video
  • ikona-slika
  • ikona-olovka
  • ikona-mapa-marker
  • ikona-podesite
  • ikona boja
  • icon-edit
  • icon-share
  • ikona-provjera
  • icon-move
  • ikona-korak-nazad
  • ikona-brzo-nazad
  • ikona unazad
  • ikona igra
  • ikona-pauza
  • ikona-stop
  • icon-forward
  • ikona-premotavanje unaprijed
  • ikona-korak-napred
  • ikona-izbaci
  • ikona-ševron-lijevo
  • ikona-ševron-desno
  • ikona-plus-znak
  • ikona-minus-znak
  • ikona-ukloni-znak
  • ikona-ok-znak
  • ikona-pitanje-znak
  • ikona-info-znak
  • ikona-screenshot
  • ikona-ukloni-krug
  • ikona-ok-krug
  • ikona-zabrana-krug
  • ikona-strelica-levo
  • ikona-strelica-desno
  • ikona-strelica-gore
  • ikona-strelica-dole
  • ikona-dijeli-alt
  • icon-resize-full
  • ikona-promena veličine-mala
  • ikona-plus
  • ikona-minus
  • ikona-zvjezdica
  • ikona-znak uzvika
  • ikona-poklon
  • ikona-list
  • ikona-vatra
  • ikona-oko-otvoreno
  • ikona-oko-zatvori
  • ikona-znak-upozorenje
  • ikona-plan
  • ikona-kalendar
  • ikona-slučajna
  • ikona-komentar
  • ikona-magnet
  • ikona-ševron-gore
  • ikona-ševron-dole
  • ikona-retweet
  • ikona-kolica
  • ikona-folder-close
  • ikona-fascikla-otvorena
  • icon-resize-vertical
  • icon-resize-horizontal
  • ikona-hdd
  • ikona-bulhorn
  • ikona-zvono
  • ikona-sertifikat
  • ikona-palac gore
  • ikona-palac-dolje
  • ikona-ruka-desno
  • ikona-ruka-lijevo
  • ikona-ruka gore
  • ikona-dolje
  • ikona-krug-strelica-desno
  • ikona-krug-strelica-levo
  • ikona-krug-strelica-gore
  • ikona-krug-strelica-dole
  • ikona-globus
  • icon-wrench
  • ikona-zadaci
  • ikona-filter
  • ikona aktovka
  • ikona preko celog ekrana

Napravljen kao duh

Umjesto da svaku ikonu učinimo dodatnim zahtjevom, mi smo ih sastavili u sprite – gomilu slika u jednoj datoteci koja koristi CSS za pozicioniranje slika sa background-position. Ovo je isti metod koji koristimo na Twitter.com i dobro nam je funkcionisao.

Sve klase ikona imaju prefiks .icon-za pravilan razmak imena i opseg, slično kao i naše druge komponente. Ovo će pomoći u izbjegavanju sukoba s drugim alatima.

Glyphicons nam je omogućio korištenje Halflings skupa u našem kompletu alata otvorenog koda sve dok pružamo vezu i kredit ovdje u dokumentima. Razmislite o tome da učinite isto u svojim projektima.

Kako koristiti

Bootstrap koristi <i>oznaku za sve ikone, ali one nemaju klasu velikih i malih slova – samo zajednički prefiks. Za korištenje, postavite sljedeći kod bilo gdje:

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

Dostupni su i stilovi za obrnute (bijele) ikone, pripremljene s jednom dodatnom klasom:

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

Postoji 140 klasa koje možete izabrati za svoje ikone. Samo dodajte <i>oznaku sa pravim klasama i spremni ste. Kompletnu listu možete pronaći u sprites.less ili ovdje u ovom dokumentu.

Glavu gore! Kada koristite pored nizova teksta, kao u dugmadima ili navigacijskim vezama, ostavite razmak iza <i>oznake za pravilan razmak.

Slučajevi upotrebe

Ikone su odlične, ali gdje bi ih koristili? Evo nekoliko ideja:

  • Kao vizualni elementi za navigaciju na bočnoj traci
  • Za isključivo navigaciju vođenu ikonama
  • Za dugmad koja pomažu u prenošenju značenja radnje
  • Sa vezama za dijeljenje konteksta na odredištu korisnika

U suštini, gdje god možete staviti <i>oznaku, možete staviti ikonu.

Primjeri

Koristite ih u dugmadima, grupama dugmadi za traku sa alatkama, navigaciju ili unose u prethodnom obrascu.