Osnovni CSS

Na vrhu skele, osnovni HTML elementi stilizirani su i poboljšani proširivim klasama kako bi pružili svjež, dosljedan izgled i dojam.

Naslovi i kopija tijela

Tipografsko mjerilo

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

Koristimo te varijable i nešto matematike za stvaranje margina, ispuna i visina redaka svih naših tipova i više.

Primjer teksta u tijelu

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 tijela

Istaknite odlomak 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, obraćanje i kratica

Element Korištenje Neobavezno
<strong> Za naglašavanje isječka teksta s važnim Nijedan
<em> Za naglašavanje isječka teksta s naglaskom Nijedan
<abbr> Prelama kratice i akronime za prikaz proširene verzije pri lebdenju

Uključi izborni titleatribut za prošireni tekst

Koristite .initialismclass za kratice velikim slovima.
<address> Za kontakt informacije za svog najbližeg pretka ili cjelokupno djelo Sačuvajte oblikovanje završavajući sve retke sa<br>

Korištenje naglaska

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.

Napomena: Slobodno koristite <b>i <i>u HTML5, ali njihova se upotreba malo promijenila. <b>namijenjen je isticanju riječi ili fraza bez prenošenja dodatne važnosti, dok <i>je uglavnom za glas, tehničke izraze 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
Ime
i [email protected]

Primjeri kratica

Kratice s titleatributom imaju svijetlu točkastu donju granicu i pokazivač pomoći pri lebdenju. To korisnicima daje dodatnu naznaku da će nešto biti prikazano dok lebdite.

Dodajte initialismklasu kratici kako biste povećali tipografski sklad dajući joj malo manju veličinu teksta.

HTML je najbolja stvar od rezanog kruha.

Skraćenica riječi atribut je attr .

Blok citati

Element Korištenje Neobavezno
<blockquote> Element na razini bloka za citiranje sadržaja iz drugog izvora

Dodajte citeatribut za izvorni URL

Upotreba .pull-lefti .pull-rightklase za plutajuće opcije
<small> Neobavezni element za dodavanje navoda usmjerenog prema korisniku, obično autora s naslovom djela Stavite <cite>oko naslova ili imena izvora

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

Uključite izborni <small>element za citiranje izvora i dobit ćete crticu em &mdash;ispred njega radi stiliziranja.

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

Primjer blok citata

Zadani blok citati stilizirani su ovako:

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

Netko poznat u radu

Za pomicanje blok citata na desnu stranu dodajte class="pull-right":

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

Netko poznat u radu

Popisi

Neuređeno

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Cijeli broj 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

Nestilizirano

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Cijeli broj 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. Cijeli broj 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
Popis opisa savršen je 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
Popis opisa savršen je 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! Horizontalni popisi opisa skratit će pojmove koji su predugački da stanu u popravak lijevog stupca text-overflow. U užim prikazima, oni će se promijeniti u zadani naslagani raspored.

U redu

Zamotajte ugrađene isječke koda s <code>.

  1. Na primjer , <code> odjeljak </ code > trebao bi biti omotan kao inline .

Osnovni blok

Koristite <pre>za više redaka koda. Obavezno izbjegnite sve uglaste zagrade u kodu radi ispravnog prikazivanja.

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

Napomena: Vodite računa da kod unutar <pre>oznaka bude što bliže lijevoj strani; prikazat će sve kartice.

Po izboru možete dodati .pre-scrollableklasu koja će postaviti maksimalnu visinu od 350 px i dati traku za pomicanje osi y.

Google Prettify

Uzmite isti <pre>element i dodajte dvije izborne klase za poboljšano iscrtavanje.

  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.

Označavanje tablice

Označiti Opis
<table> Element omotača za prikaz podataka u tabelarnom obliku
<thead> Element spremnika za retke zaglavlja tablice ( <tr>) za označavanje stupaca tablice
<tbody> Element spremnika za retke tablice ( <tr>) u tijelu tablice
<tr> Element spremnika za skup ćelija tablice ( <td>ili <th>) koji se pojavljuje u jednom retku
<td> Zadana ćelija tablice
<th> Posebna ćelija tablice za oznake stupca (ili retka, ovisno o opsegu i položaju)
Mora se koristiti unutar a<thead>
<caption> Opis ili sažetak onoga što tablica sadrži, posebno korisno za čitače zaslona
  1. <stol>
  2. <head>
  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>

Mogućnosti tablice

Ime Klasa Opis
Zadano Nijedan Nema stilova, samo stupci i redovi
Osnovni, temeljni .table Samo vodoravne linije između redaka
Obrubljena .table-bordered Zaokružuje kutove i dodaje vanjski rub
Zebra-pruga .table-striped Dodaje svijetlo sivu boju pozadine neparnim redovima (1, 3, 5 itd.)
Kondenzovan .table-condensed Reže okomito ispunjavanje na pola, od 8 px do 4 px, unutar svih elemenata tdith

Primjeri tablica

1. Zadani stilovi tablica

Tablice se automatski stiliziraju sa samo nekoliko rubova kako bi se osigurala čitljivost i zadržala struktura. Uz 2.0, .tableklasa je obavezna.

  1. <table class = "table" >
  2. </table>
# Ime Prezime Korisničko ime
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Larry ptica @cvrkut

2. Prugasti stol

Budite malo fensi sa svojim stolovima dodavanjem zebrastih pruga—samo dodajte .table-stripedklasu.

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

  1. <table class = "table table-striped" >
  2. </table>
# Ime Prezime Korisničko ime
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Larry ptica @cvrkut

3. Obrubljeni stol

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

  1. <table class = "table table-bordered" >
  2. </table>
# Ime Prezime Korisničko ime
1 Ocjena Otto @mdo
Ocjena Otto @getbootstrap
2 Jakovu Thornton @mast
3 Ptica Larry @cvrkut

4. Sažeta tablica

Učinite svoje tablice kompaktnijima dodavanjem .table-condensedklase za rezanje razmaka ćelija tablice na pola (s 8px na 4px).

  1. <table class = "table table-condensed" >
  2. </table>
# Ime Prezime Korisničko ime
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Ptica Larry @cvrkut

5. Kombinirajte ih sve!

Slobodno kombinirajte bilo koju od klasa tablice kako biste postigli različite izglede koristeći bilo koju od dostupnih klasa.

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </table>
Puno ime
# Ime Prezime Korisničko ime
1 Ocjena Otto @mdo
2 Jakovu Thornton @mast
3 Ptica Larry @cvrkut

Fleksibilni HTML i CSS

Najbolji dio obrazaca u Bootstrapu je taj što svi vaši unosi i kontrole izgledaju sjajno bez obzira na to kako ih izgradite u svom označavanju. Nije potreban suvišan HTML, ali mi nudimo uzorke za one kojima je to potrebno.

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

Uključena su četiri izgleda

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

  • Okomito (zadano)
  • traži
  • U redu
  • Horizontalno

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

Kontrolna stanja i više

Obrasci Bootstrapa uključuju stilove za sve osnovne kontrole obrasca kao što su unos, tekstualno područje i odabir koji biste očekivali. Ali također dolazi s nizom prilagođenih komponenti kao što su pridodani i pridodani ulazi i podrška za popise potvrdnih okvira.

Stanja poput pogreške, upozorenja i uspjeha uključena su za svaku vrstu kontrole obrasca. Također su uključeni stilovi za onemogućene kontrole.

Četiri vrste obrazaca

Bootstrap pruža jednostavno označavanje i stilove za četiri stila uobičajenih web obrazaca.

Ime Klasa Opis
Okomito (zadano) .form-vertical (nije obavezno) Naslagane, lijevo poravnate oznake preko kontrola
U redu .form-inline Lijevo poravnata oznaka i kontrole umetnutih blokova za kompaktni stil
traži .form-search Ekstra zaobljeni unos teksta za tipičnu estetiku pretraživanja
Horizontalno .form-horizontal Plutajuće oznake ulijevo, desno poravnate u istom retku kao i kontrole

Primjeri obrazaca koji koriste samo kontrole obrasca, bez dodatnog označavanja

Osnovni oblik

Pametne i lagane zadane postavke bez dodatnih oznaka.

Primjer teksta pomoći na razini bloka ovdje.

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

Obrazac za pretraživanje

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" > Traži </button>
  4. </form>

Inline obrazac

Dodajte .form-inlinefinoći okomito poravnanje i razmak kontrola obrazaca.

  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" > Zapamti me
  6. </label>
  7. <button type = "submit" class = "btn" > Prijavite se </button>
  8. </form>

Horizontalne forme

Desno su prikazane sve zadane kontrole obrazaca koje podržavamo. Evo popisa s grafičkim oznakama:

  • unos teksta (tekst, lozinka, e-pošta itd.)
  • potvrdni okvir
  • radio
  • Odaberi
  • višestruki odabir
  • unos datoteke
  • tekstualno područje

Osim slobodnog teksta, svaki HTML5 unos temeljen na tekstu 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-label, i .controlspotrebne su za stiliziranje.

  1. <form class = "form-horizontal" >
  2. <set polja>
  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žavajući tekst pomoći </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Kontrolna stanja obrazaca

disabledBootstrap ima stilove za fokusirana i stanja podržana preglednikom . Uklanjamo zadani Webkit outlinei box-shadowna njegovo mjesto primjenjujemo za :focus.


Provjera valjanosti obrasca

Također uključuje stilove provjere valjanosti za pogreške, upozorenja i uspjeh. Za korištenje dodajte klasu pogreške u okruženje .control-group.

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

Proširivanje kontrola obrasca

Unosi ispred i dodavanja

Grupe unosa—s pridodanim ili pridodanim tekstom—omogućuju jednostavan način za davanje više konteksta vašim unosima. Sjajni primjeri uključuju znak @ za korisnička imena na Twitteru ili $ za financije.


Polje za potvrdu i radio

Sve do v1.4, Bootstrap je zahtijevao dodatno označavanje oko potvrdnih okvira i radija za njihovo slaganje. Sada, to je jednostavna stvar ponavljanja <label class="checkbox">koji prekriva <input type="checkbox">.

Podržani su i ugrađeni potvrdni okviri i radio stanice. Samo dodajte .inlinebilo kojem .checkboxili .radioi gotovi ste.


Umetnuti obrasci i dodavanje/priključivanje

Da biste koristili unose ispred ili dodavanja u inline obliku, obavezno stavite .add-oni inputu isti redak, bez razmaka.


Tekst pomoći obrasca

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

Za veličine unosa koristite iste .span*klase iz sustava rešetki.

Također možete koristiti statičke klase koje se ne preslikavaju na rešetku, prilagođavaju se responzivnim CSS stilovima ili uzimaju u obzir različite vrste kontrola (npr. u inputodnosu na select).

@

Evo teksta za pomoć

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

Napomena: Oznake okružuju sve opcije za mnogo veća područja klika i upotrebljiviji obrazac.

Dugme klasa="" Opis
btn Standardni sivi gumb s gradijentom
btn btn-primary Pruža dodatnu vizualnu težinu i identificira primarnu radnju u nizu gumba
btn btn-info Koristi se kao alternativa zadanim stilovima
btn btn-success Označava uspješnu ili pozitivnu radnju
btn btn-warning Označava da treba biti oprezan s ovom radnjom
btn btn-danger Označava opasnu ili potencijalno negativnu radnju
btn btn-inverse Alternativni tamnosivi gumb, nije vezan uz semantičku radnju ili upotrebu

Gumbi za akcije

Kao konvencija, gumbi se trebaju koristiti samo za akcije, dok se hiperveze trebaju koristiti za objekte. Na primjer, "Preuzimanje" bi trebao biti gumb dok bi "nedavna aktivnost" trebala biti poveznica.

Stilovi gumba mogu se primijeniti na bilo što s .btnprimijenjenom klasom. Međutim, obično ćete to željeti primijeniti samo na elemente <a>i .<button>

Kompatibilnost s više preglednika

IE9 ne obrezuje pozadinske gradijente na zaobljenim kutovima, pa ga uklanjamo. S tim u vezi, IE9 jankifies onemogućene buttonelemente, pretvarajući tekst u siv s gadnom sjenkom teksta koju ne možemo popraviti.

Više veličina

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


Onesposobljeno stanje

Za onemogućene gumbe dodajte .disabledklasu vezama i disabledatribut <button>elementima.

Primarna veza Veza

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

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 = "button"
  6. vrijednost = "Ulaz" >
  7. <input class = "btn" type = "submit"
  8. vrijednost = "Pošalji" >

Kao najbolju praksu, pokušajte uskladiti element sa svojim kontekstom kako biste osigurali odgovarajuće prikazivanje u više preglednika. Ako imate input, upotrijebite <input type="submit">za gumb.

  • ikona-čaša
  • ikona-glazba
  • pretraživanje ikona
  • ikona-omotnica
  • ikona-srce
  • ikona-zvijezda
  • ikona-zvijezda-prazna
  • ikona-korisnik
  • ikona-film
  • ikona-th-velika
  • ikona-th
  • ikona-th-list
  • ikona-ok
  • ikona-ukloni
  • ikona-zoom-in
  • ikona-umanjivanje
  • ikona isključena
  • ikona-signal
  • ikona-zupčanik
  • ikona-smeće
  • ikona-dom
  • ikona-datoteka
  • ikona-vrijeme
  • ikona-put
  • ikona-preuzimanje-alt
  • ikona za preuzimanje
  • slanje ikona
  • ikona-inbox
  • ikona-igranje-krug
  • ikona-ponoviti
  • ikona-osvježi
  • ikona-popis-alt
  • ikona-brava
  • ikona-barjak
  • ikona-slušalice
  • ikona-isključena glasnoća
  • ikona-smanjenje glasnoće
  • ikona za povećanje glasnoće
  • ikona-qrcode
  • ikona-crtični kod
  • ikona-oznaka
  • oznake ikona
  • knjiga ikona
  • ikona-oznaka
  • ispis ikona
  • ikona-kamera
  • ikona-font
  • ikona-podebljano
  • ikona-kurziv
  • ikona-tekst-visina
  • širina-teksta-ikone
  • ikona-poravnaj-lijevo
  • središte poravnanja ikona
  • ikona-poravnaj-desno
  • icon-align-justify
  • popis ikona
  • ikona-uvlaka-lijevo
  • ikona-uvlaka-desno
  • icon-facetime-video
  • ikona-slika
  • ikona-olovka
  • ikona-karta-oznaka
  • podešavanje ikone
  • ikona-boja
  • uređivanje ikona
  • dijeljenje ikona
  • ikona-provjera
  • ikona-kretanje
  • ikona-korak-natrag
  • ikona-brzo-natrag
  • ikona-natrag
  • ikona-igra
  • ikona-pauza
  • ikona-stop
  • ikona-naprijed
  • ikona-brzo-unaprijed
  • ikona-korak-naprijed
  • ikona-izbacivanje
  • ikona-ševron-lijevo
  • ikona-ševron-desno
  • ikona-plus-znak
  • ikona-znak-minus
  • ikona-ukloni-znak
  • ikona-ok-znak
  • ikona-upitnik-znak
  • ikona-info-znak
  • ikona-snimka zaslona
  • ikona-ukloni-krug
  • ikona-ok-krug
  • ikona-zabrana-krug
  • ikona-strelica-lijevo
  • ikona-strelica-desno
  • ikona-strelica-gore
  • ikona-strelica-dolje
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • ikona-plus
  • ikona-minus
  • ikona-zvjezdica
  • ikona-uzvičnik-znak
  • ikona-dar
  • ikona-list
  • ikona-vatra
  • ikona-oko-otvoreno
  • ikona-zatvaranje očiju
  • ikona-znak-upozorenje
  • ikona-ravnina
  • ikona-kalendar
  • ikona-nasumična
  • ikona-komentar
  • ikona-magnet
  • ikona-ševron-gore
  • ikona-ševron-dolje
  • ikona-retweet
  • ikona-kolica-kolica
  • ikona-mapa-zatvaranje
  • ikona-mapa-otvorena
  • icon-resize-vertical
  • icon-resize-horizontal
  • ikona-hdd
  • ikona-megafon
  • ikona-zvono
  • ikona-certifikat
  • ikona-palac gore
  • ikona-palac-dolje
  • ikona-ruka-desna
  • ikona-ruka-lijeva
  • ikona-ruka gore
  • ikona-ruka-dolje
  • ikona-krug-strelica-desno
  • ikona-krug-strelica-lijevo
  • ikona-krug-strelica-gore
  • ikona-krug-strelica-dolje
  • ikona-globus
  • ikona-ključ
  • ikone-zadaci
  • ikona-filtar
  • ikona-aktovka
  • ikona-puni zaslon

Izgrađen kao sprite

Umjesto da svaka ikona bude dodatni zahtjev, sastavili smo ih u sprite — hrpu slika u jednoj datoteci koja koristi CSS za pozicioniranje slika s background-position. Ovo je ista metoda koju koristimo na Twitter.com i dobro nam je uspjela.

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

Glyphicons nam je odobrio korištenje seta Halflings u našem alatu otvorenog koda sve dok ovdje u dokumentima pružimo vezu i kredit. Razmislite o tome da učinite isto u svojim projektima.

Kako koristiti

Bootstrap koristi <i>oznaku za sve ikone, ali 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>

Za svoje ikone možete birati između 140 klasa. Samo dodajte <i>oznaku s pravim klasama i gotovi ste. Potpuni popis možete pronaći u sprites.less ili upravo ovdje u ovom dokumentu.

Glavu gore! Kada koristite tekstualne nizove pored, kao u gumbima ili navigacijskim vezama, svakako ostavite razmak nakon <i>oznake radi pravilnog razmaka.

Slučajevi upotrebe

Ikone su sjajne, ali gdje bi ih netko koristio? Evo nekoliko ideja:

  • Kao vizualni elementi za navigaciju na bočnoj traci
  • Za navigaciju isključivo pomoću ikona
  • Za gumbe koji pomažu prenijeti značenje radnje
  • S vezama za dijeljenje konteksta na odredištu korisnika

U biti, gdje god možete staviti <i>oznaku, možete staviti i ikonu.

Primjeri

Upotrijebite ih u gumbima, grupama gumba za alatnu traku, navigaciju ili unose obrazaca ispred.