Baas-CSS

Lisaks tellingutele on HTML-i põhielemendid kujundatud ja täiustatud laiendatavate klassidega, et pakkuda värsket ja ühtlast välimust.

Pealkirjad ja keha koopia

Tüpograafiline skaala

Kogu tüpograafiline ruudustik põhineb failis variables.less kahel Less muutujal: @baseFontSizeja @baseLineHeight. Esimene on läbivalt kasutatav põhifondi suurus ja teine ​​on baasjoone kõrgus.

Kasutame neid muutujaid ja mõningast matemaatikat kõigi meie tüüpide veeriste, polsterduste ja joonte kõrguste loomiseks ja palju muud.

Põhiteksti näide

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.

Põhiteksti koopia

Muutke lõik silmapaistvaks, lisades .lead.

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

h1. Pealkiri 1

h2. 2. pealkiri

h3. 3. pealkiri

h4. 4. pealkiri

h5. 5. pealkiri
h6. 6. pealkiri

Rõhuasetus, aadress ja lühend

Element Kasutamine Valikuline
<strong> Tekstijupi rõhutamiseks olulisega Mitte ühtegi
<em> Tekstijupi rõhutamiseks rõhuga Mitte ühtegi
<abbr> Murrab lühendeid ja akronüüme, et näidata laiendatud versiooni hõljutamisel

titleKaasake laiendatud teksti valikuline atribuut

Kasutage .initialismsuurtähtlühendite jaoks klassi.
<address> Selle lähima esivanema või kogu töö kontaktteabe saamiseks Säilitage vorming, lõpetades kõik read tähega<br>

Rõhuasetuse kasutamine

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.

Märkus. Kasutage julgelt <b>ja <i>HTML5-s, kuid nende kasutus on veidi muutunud. <b>on mõeldud sõnade või fraaside esiletõstmiseks ilma täiendavat tähtsust andmata, samas kui <i>see on enamasti mõeldud hääle, tehniliste terminite jms jaoks.

Näidisaadressid

Siin on kaks näidet selle kohta, kuidas <address>märgendit saab kasutada.

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

Näidislühendid

Atribuudiga lühenditel titleon hele punktiirjoonega alumine ääris ja abikursor hõljutaval kohal. See annab kasutajatele lisamärguande, et midagi näidatakse kursoril.

Lisage initialismlühendile klass, et suurendada tüpograafilist harmooniat, andes sellele veidi väiksema teksti suuruse.

HTML on parim asi pärast viilutatud leiba.

Sõna atribuut lühend on attr .

Plokktsitaadid

Element Kasutamine Valikuline
<blockquote> Plokitaseme element sisu tsiteerimiseks teisest allikast

Lisage citelähte-URL-i atribuut

Ujuvate valikute kasutamine .pull-leftja klassid.pull-right
<small> Valikuline element kasutajale suunatud tsitaadi lisamiseks, tavaliselt autor koos teose pealkirjaga Asetage <cite>allika pealkirja või nime ümber

Plokktsitaadi lisamiseks mähkige tsitaadina <blockquote>ümber mis tahes HTML -i. Sirgete hinnapakkumiste jaoks soovitame <p>.

Lisage oma allikale viitamiseks valikuline <small>element ja saate &mdash;selle ette stiilimise eesmärgil kriipsu.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante venenatis. </p>
  3. <small> Keegi kuulus </small>
  4. </blockquote>

Plokitsitaatide näited

Vaikimisi plokitsitaadid on kujundatud järgmiselt:

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante venenatis.

Keegi kuulus Body of Workis

Tsitaadi paremale ujumiseks lisage class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante venenatis.

Keegi kuulus Body of Workis

Loendid

Tellimata

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Täisarv molestie lorem ja mass
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat juures
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Stiilita

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Täisarv molestie lorem ja mass
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat juures
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Tellitud

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Täisarv molestie lorem ja mass
  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

Kirjeldus

<dl>

Kirjeldusloendid
Kirjeldusloend sobib suurepäraselt terminite määratlemiseks.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida ja eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Horisontaalne kirjeldus

<dl class="dl-horizontal">

Kirjeldusloendid
Kirjeldusloend sobib suurepäraselt terminite määratlemiseks.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida ja 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.

Pea püsti! Horisontaalsed kirjeldusloendid kärbivad termineid, mis on liiga pikad, et mahutada vasakpoolse veeru parandusse text-overflow. Kitsamates vaateavades muutuvad need virnastatud vaikepaigutuseks.

Järjekorras

Mähi tekstisisesed koodilõigud märgiga <code>.

  1. Näiteks < code > jaotis < / code > tuleks ümbritseda tekstisisesena .

Põhiplokk

Kasutage <pre>mitme koodirea jaoks. Korralikuks renderdamiseks jätke koodis kindlasti kõik nurksulud.

<p>Näidistekst siin...</p>
  1. <pre>
  2. <p>Näidistekst siin...</p>
  3. </pre>

Märkus. Hoidke koodi <pre>siltide sees nii vasakule kui võimalik; see renderdab kõik vahelehed.

Soovi korral saate lisada .pre-scrollableklassi, mis määrab maksimaalseks kõrguseks 350 pikslit ja pakub y-telje kerimisriba.

Google Prettify

Võtke sama <pre>element ja lisage täiustatud renderdamiseks kaks valikulist klassi.

  1. <p> Näidistekst siin... </p>
  1. <pre class = "ilusprint
  2. linenums" >
  3. <p>Näidistekst siin...</p>
  4. </pre>

Laadige alla google-code-prettify ja vaadake lugemist, kuidas seda kasutada.

Tabeli märgistus

Tag Kirjeldus
<table> Mähkimiselement andmete kuvamiseks tabelivormingus
<thead> Tabeli päise ridade ( <tr>) konteinerelement tabeli veergude märgistamiseks
<tbody> <tr>Tabeli põhiosas tabeli ridade ( ) konteinerelement
<tr> Tabeli lahtrite komplekti ( <td>või <th>) konteinerelement, mis kuvatakse ühel real
<td> Tabeli vaikelahter
<th> Spetsiaalne tabelilahter veeru (või rea, olenevalt ulatusest ja paigutusest) siltide jaoks
Tuleb kasutada a<thead>
<caption> Tabeli kirjeldus või kokkuvõte, eriti kasulik ekraanilugejatele
  1. <tabel>
  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>

Tabelivalikud

Nimi Klass Kirjeldus
Vaikimisi Mitte ühtegi Ei mingeid stiile, ainult veerud ja read
Põhiline .table Ainult horisontaalsed jooned ridade vahel
Piiritud .table-bordered Ümardab nurki ja lisab välisäärise
Sebra-triip .table-striped Lisab paaritutele ridadele (1, 3, 5 jne) helehalli taustavärvi
Kondenseeritud .table-condensed Lõikab vertikaalse polstri pooleks, 8 kuni 4 pikslit, kõigis tdja thelementides

Näitetabelid

1. Vaikimisi tabelistiilid

Tabelid kujundatakse automaatselt vaid mõne äärisega, et tagada loetavus ja säilitada struktuur. 2.0 puhul on .tableklass kohustuslik.

  1. < tabeliklass = "tabel" >
  2. </table>
# Eesnimi Perekonnanimi Kasutajanimi
1 Mark Otto @mdo
2 Jacob Thornton @paks
3 Larry lind @twitter

2. Triibuline laud

Lisage sebraribad, lisades oma laudadele pisut elegantsi – lisage lihtsalt .table-stripedklass.

Märkus. Triibulised tabelid kasutavad :nth-childCSS-i valijat ja pole IE7-IE8 puhul saadaval.

  1. <table class = "tabel tabelitriibuline" >
  2. </table>
# Eesnimi Perekonnanimi Kasutajanimi
1 Mark Otto @mdo
2 Jacob Thornton @paks
3 Larry lind @twitter

3. Ääristega tabel

Lisage esteetilistel eesmärkidel äärised ümber kogu laua ja ümarad nurgad.

  1. < tabeliklass = "tabeli äärisega tabel" >
  2. </table>
# Eesnimi Perekonnanimi Kasutajanimi
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Jacob Thornton @paks
3 Lind Larry @twitter

4. Tihendatud laud

Muutke oma tabelid kompaktsemaks, lisades .table-condensedklassi, et tabelilahtri polsterdus pooleks lõigata (8 pikslist 4 pikslile).

  1. <table class = "tabel-kondenseeritud" >
  2. </table>
# Eesnimi Perekonnanimi Kasutajanimi
1 Mark Otto @mdo
2 Jacob Thornton @paks
3 Lind Larry @twitter

5. Kombineeri need kõik!

Võite vabalt kombineerida mis tahes tabeliklasse, et saavutada erineva välimuse, kasutades mõnda olemasolevat klassi.

  1. <table class = "tabel tabel-triibuline tabel-ääristatud tabel-kondenseeritud" >
  2. ...
  3. </table>
Täisnimi
# Eesnimi Perekonnanimi Kasutajanimi
1 Mark Otto @mdo
2 Jacob Thornton @paks
3 Lind Larry @twitter

Paindlik HTML ja CSS

Bootstrapi vormide parim osa on see, et kõik teie sisendid ja juhtelemendid näevad suurepärased välja, olenemata sellest, kuidas te neid märgistuses koostate. Üleliigset HTML-i pole vaja, kuid pakume mustreid neile, kes seda vajavad.

Keerulisemate paigutustega on kaasas kokkuvõtlikud ja skaleeritavad klassid lihtsaks kujundamiseks ja sündmuste sidumiseks, nii et olete igal sammul kaetud.

Kaasas neli paigutust

Bootstrap toetab nelja tüüpi vormipaigutusi:

  • Vertikaalne (vaikimisi)
  • Otsing
  • Järjekorras
  • Horisontaalne

Erinevat tüüpi vormipaigutused nõuavad märgistuses mõningaid muudatusi, kuid juhtelemendid ise jäävad samaks ja käituvad samaks.

Kontrolli olekuid ja palju muud

Bootstrapi vormid sisaldavad stiile kõigi põhivormi juhtelementide jaoks, nagu sisend, tekstiala ja valik. Kuid see sisaldab ka mitmeid kohandatud komponente, nagu lisatud ja lisatud sisendid ning märkeruutude loendite tugi.

Olekud, nagu viga, hoiatus ja edu, on kaasatud igat tüüpi vormikontrolli jaoks. Kaasas on ka puudega juhtnuppude stiilid.

Neli tüüpi vorme

Bootstrap pakub lihtsat märgistust ja stiile nelja levinud veebivormi stiili jaoks.

Nimi Klass Kirjeldus
Vertikaalne (vaikimisi) .form-vertical (pole nõutud) Virnastatud, vasakule joondatud sildid juhtelementide kohal
Järjekorras .form-inline Vasakule joondatud sildi ja plokisisesed juhtnupud kompaktse stiili jaoks
Otsing .form-search Eriti ümar tekstisisestus tüüpilise otsingu esteetika jaoks
Horisontaalne .form-horizontal Hõljutage vasakule, paremale joondatud silte juhtelementidega samal real

Näidisvormid, mis kasutavad ainult vormi juhtelemente, ilma täiendava märgistuseta

Põhivorm

Nutikad ja kerged vaikeseaded ilma täiendava märgistuseta.

Plokitaseme abiteksti näide siin.

  1. <form class = "hästi" >
  2. <label> Sildi nimi </label>
  3. <input type = "text" class = "span3" placeholder = "Tippige midagi..." >
  4. <span class = "help-block" > Siin on plokitaseme abiteksti näide. </span>
  5. <label class = "märkeruut" >
  6. <input type = "checkbox" > Kontrollige mind
  7. </label>
  8. <button type = "submit" class = "btn" > Esita </button>
  9. </form>

Otsinguvorm

Lisa .form-searchvormile .search-queryja input.

  1. <form class = "kaevu vormiotsing" >
  2. <input type = "text" class = "sisendkandja otsingupäring" >
  3. <button type = "submit" class = "btn" > Otsi </button>
  4. </form>

Tekstisisene vorm

Lisage .form-inlinevormi juhtelementide vertikaalne joondus ja vahed, et täpsustada.

  1. <form class = "kaev vorm-inline" >
  2. <input type = "text" class = "input-small" placeholder = "E-post" >
  3. <input type = "password" class = "input-small" placeholder = "Parool" >
  4. <label class = "märkeruut" >
  5. <input type = "checkbox" > Jäta mind meelde
  6. </label>
  7. <button type = "submit" class = "btn" > Logi sisse </button>
  8. </form>

Horisontaalsed vormid

Paremal on näidatud kõik vormide vaikejuhtelemendid, mida me toetame. Siin on täppide loend:

  • tekstisisestus (tekst, parool, e-post jne)
  • märkeruut
  • raadio
  • vali
  • mitu valikut
  • faili sisend
  • tekstiala

Lisaks vabas vormis olevale tekstile kuvatakse iga HTML5 tekstipõhine sisend sellisena.

Märgistuse näide

Arvestades ülaltoodud vormipaigutuse näidet, on siin esimese sisend- ja juhtrühmaga seotud märgistus. .control-groupKlassid , .control-label, ja kõik .controlson kujundamiseks vajalikud.

  1. <form class = "vorm-horisontaalne" >
  2. <väljakomplekt>
  3. <legend> Legendi tekst </legend>
  4. <div class = "kontrollrühm" >
  5. <label class = "control-label" for = "input01" > Tekstisisestus </label>
  6. <div class = "juhtelemendid" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Abiteksti tugi </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Vormi juhtolekud

Bootstrap sisaldab stiile brauseri toetatud fokuseeritud ja disabledolekute jaoks. Eemaldame vaikeveebikomplekti outlineja rakendame box-shadowselle asemele :focus.


Vormi kinnitamine

See sisaldab ka vigade, hoiatuste ja edu kinnitamise stiile. Kasutamiseks lisage veaklass ümbritsevale .control-group.

  1. <väljakomplekt
  2. class = "kontrollrühma viga" >
  3. </fieldset>
Mingi väärtus siin
Midagi võis valesti minna
Parandage viga
Woohoo!
Woohoo!

Vormi juhtelementide laiendamine

Sisendite ette ja lisamine

Sisestusrühmad – lisatud või lisatud tekstiga – pakuvad lihtsat viisi sisenditele rohkem konteksti andmiseks. Suurepärased näited hõlmavad @-märki Twitteri kasutajanimede jaoks või $ rahanduse jaoks.


Märkeruudud ja raadiod

Kuni versioonini 1.4 nõudis Bootstrap märkeruutude ja raadiote ümber lisamärke, et neid virnastada. Nüüd on lihtne korrata seda <label class="checkbox">, mis ümbritseb <input type="checkbox">.

Toetatud on ka tekstisisesed märkeruudud ja raadiod. Lisage lihtsalt .inlinemis tahes .checkboxvõi .radioja oletegi valmis.


Tekstisisesed vormid ja lisamine/eelliitmine

Reasiseses vormis ette- või lisamissisendite kasutamiseks asetage kindlasti .add-onja inputsamale reale ilma tühikuteta.


Vormi abitekst

Vormisisendite abiteksti lisamiseks lisage sisestuselemendile tekstisisene abitekst <span class="help-inline">või abiteksti plokk koos <p class="help-block">sisestuselemendiga.

.span*Kasutage sisendsuuruste jaoks samu klasse ruudustikusüsteemist.

Võite kasutada ka staatilisi klasse, mis ei sobitu ruudustikuga, ei kohandu reageerivate CSS-stiilidega ega võta arvesse erinevat tüüpi juhtelemente (nt inputvs. select).

@

Siin on abitekst

.00
Siin on rohkem abiteksti
$ .00

Märkus. Sildid ümbritsevad kõiki võimalusi palju suuremate klõpsamisalade ja kasutatavama vormi jaoks.

Nupp class="" Kirjeldus
btn Standardne hall gradiendiga nupp
btn btn-primary Annab visuaalset lisaraskust ja tuvastab nuppude komplektis peamise toimingu
btn btn-info Kasutatakse alternatiivina vaikestiilidele
btn btn-success Tähistab edukat või positiivset tegevust
btn btn-warning Näitab, et selle toiminguga tuleb olla ettevaatlik
btn btn-danger Tähistab ohtlikku või potentsiaalselt negatiivset tegevust
btn btn-inverse Alternatiivne tumehall nupp, mis pole semantilise toimingu või kasutusega seotud

Toimingute nupud

Tavapäraselt tuleks nuppe kasutada ainult toimingute jaoks, hüperlinke aga objektide jaoks. Näiteks "Laadi alla" peaks olema nupp, samas kui "hiljutine tegevus" peaks olema link.

.btnKlassi rakendamisel saab nuppude stiile rakendada kõigele . Kuid tavaliselt soovite neid rakendada ainult <a>ja <button>elementidele.

Brauseriülene ühilduvus

IE9 ei kärbi ümarate nurkade tausta gradiente, seega eemaldame selle. Seotud, IE9 jankkib keelatud buttonelemente, muutes teksti halliks ja vastiku tekstivarjuga, mida me ei saa parandada.

Mitu suurust

Kas soovite suuremaid või väiksemaid nuppe? Lisage .btn-large, .btn-small, või .btn-minikahe lisasuuruse jaoks.


Puudega olek

Keelatud nuppude puhul lisage .disabledlinkidele klass ja elementide disabledatribuut .<button>

Peamine link Link

Pea püsti! Kasutame .disabledsiin sarnaselt tavalisele klassile kasuliku klassina .active, seega pole eesliidet vaja.

Üks klass, mitu silti

Kasutage .btnklassi elemendil <a>, <button>, või <input>elemendil.

Link
  1. <a class = "btn" href = "" > Link </a>
  2. <button class = "btn" type = "esita" >
  3. Nupp
  4. </button>
  5. <input class = "btn" type = "button"
  6. väärtus = "Sisend" >
  7. <input class = "btn" type = "submit"
  8. value = "Esita" >

Parima tavana proovige elementi oma konteksti järgi sobitada, et tagada sobiv brauseriülene renderdamine. Kui teil on input, kasutage <input type="submit">nuppu.

  • ikoon-klaas
  • ikoon-muusika
  • ikooniotsing
  • ikoon-ümbrik
  • ikoon-süda
  • ikoon-täht
  • ikoon-täht-tühi
  • ikoon-kasutaja
  • ikoon-film
  • ikoon-th-suur
  • ikoon-th
  • ikoon-nimekiri
  • ikoon-ok
  • ikoon-eemalda
  • ikoon-suumimine
  • ikoon-väljasuumimine
  • ikoon välja lülitatud
  • ikoon-signaal
  • ikoon-hammasratas
  • ikoon-prügikast
  • ikoon-kodu
  • ikoon-fail
  • ikoon-aeg
  • ikoon-tee
  • icon-download-alt
  • ikoon-allalaadimine
  • ikooni üleslaadimine
  • ikoon-postkast
  • ikoon-mäng-ring
  • ikoon-kordus
  • ikoon-värskenda
  • icon-list-alt
  • ikoon-lukk
  • ikoon-lipp
  • ikoon-kõrvaklapid
  • icon-volume-off
  • ikoon-helitugevuse vähendamine
  • ikooni helitugevuse suurendamine
  • ikoon-qrcode
  • ikoon-vöötkood
  • ikoon-silt
  • ikoon-sildid
  • ikoon-raamat
  • ikoon-järjehoidja
  • ikoon-print
  • ikoon-kaamera
  • ikoon-font
  • ikoon-paks
  • ikoon-kaldkiri
  • ikoon-tekst-kõrgus
  • ikoon-tekst-laius
  • icon-align-left
  • icon-align-center
  • ikoon-joonda-paremale
  • ikoon-joonda-joonda
  • ikoonide loend
  • ikoon-taane-vasak
  • ikoon-taane-parem
  • ikoon-facetime-video
  • ikoon-pilt
  • ikoon-pliiats
  • ikoon-kaart-marker
  • ikooni reguleerimine
  • ikoon-toon
  • ikoon-redigeeri
  • ikooni jagamine
  • ikooni kontroll
  • ikoon-liikumine
  • ikoon-samm-tagasi
  • ikoon-kiire-tagasi
  • ikoon-tagasi
  • ikoonimäng
  • ikoon-paus
  • ikoon-stopp
  • ikoon-edasi
  • ikoon-kerimine edasi
  • ikoon-samm-edasi
  • ikooni eemaldamine
  • icon-chevron-left
  • icon-chevron-right
  • ikoon-pluss-märk
  • ikoon-miinus-märk
  • ikoon-eemalda-märk
  • ikoon-ok-märk
  • ikoon-küsimus-märk
  • ikoon-info-märk
  • ikoon-ekraanipilt
  • ikoon-eemalda-ring
  • ikoon-ok-ring
  • ikoon-keeld-ring
  • ikoon-nool-vasak
  • ikoon-nool-paremale
  • ikoon-nool-üles
  • ikoon-nool-alla
  • icon-share-alt
  • icon-resize-full
  • ikoon-resize-small
  • ikoon-pluss
  • ikoon-miinus
  • ikoon- tärn
  • ikoon-hüüumärk
  • ikoon-kingitus
  • ikoonileht
  • ikoon-tuli
  • ikoon-silm-avatud
  • ikoon-silm-sulge
  • ikoon-hoiatusmärk
  • ikoon-tasapind
  • ikoon-kalender
  • ikoon-juhuslik
  • ikoon-kommentaar
  • ikoon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • ikoon-retweet
  • ikoon-ostukorv
  • ikoon-kaust-sulge
  • ikoon-kaust-ava
  • ikoon-suuruse muutmine-vertikaalne
  • ikoon-resize-horizontal
  • icon-hdd
  • ikoon-bullhorn
  • ikoon-kell
  • ikoon-sertifikaat
  • ikoon-pöidlad üles
  • ikoon-pöial-alla
  • ikoon-käsi-parem
  • ikoon-käsi-vasak
  • ikoon-käsi üles
  • ikoon-käsi-alla
  • ikoon-ring-nool-paremale
  • ikoon-ring-nool-vasak
  • ikoon-ring-nool-üles
  • ikoon-ring-nool-alla
  • ikoon-gloobus
  • ikoon-mutrivõti
  • ikoon-ülesanded
  • ikoon-filter
  • ikoon-portfell
  • ikoon-täisekraan

Ehitatud spraitina

Selle asemel, et muuta iga ikoon lisataotluseks, oleme need koostanud spraitiks – hunnikuks pilte ühes failis, mis kasutab CSS-i piltide positsioneerimiseks background-position. See on sama meetod, mida kasutame Twitter.com-is ja see on meie jaoks hästi toiminud.

Kõikide ikoonide klasside eesliide on .icon-õige nimevahe ja ulatuse jaoks, sarnaselt meie teistele komponentidele. See aitab vältida konflikte teiste tööriistadega.

Glyphicons on andnud meile võimaluse kasutada meie avatud lähtekoodiga tööriistakomplekti Halflings, kui pakume siin dokumentides lingi ja krediiti. Palun kaaluge oma projektides sama tegemist.

Kuidas kasutada

Bootstrap kasutab <i>kõigi ikoonide jaoks silti, kuid neil pole käändeklassi – ainult jagatud eesliide. Kasutamiseks asetage järgmine kood peaaegu kõikjale:

  1. <i class = "ikooniotsing" ></i>

Saadaval on ka stiilid ümberpööratud (valgete) ikoonide jaoks, mis on valmis ühe lisaklassiga:

  1. <i class = "ikoon-otsing ikoon-valge" ></i>

Ikoonide jaoks on valida 140 klassi vahel. Lihtsalt lisage <i>õigete klassidega silt ja oletegi valmis. Täieliku loendi leiate saidilt sprites.less või siit, selles dokumendis.

Pea püsti! Kui kasutate tekstistringide kõrval (nt nuppudes või navigeerimislinkides), jätke <i>sildi järele kindlasti tühik õigete tühikute jaoks.

Kasutusjuhtumid

Ikoonid on suurepärased, kuid kus neid kasutada? Siin on mõned ideed:

  • Külgriba navigeerimise visuaalidena
  • Puhtalt ikoonipõhiseks navigeerimiseks
  • Nuppude jaoks, mis aitavad toimingu tähendust edasi anda
  • Linkidega kasutaja sihtkoha konteksti jagamiseks

Põhimõtteliselt saate igale poole, kuhu saate <i>sildi panna, panna ikooni.

Näited

Kasutage neid nuppudes, tööriistariba nupurühmades, navigeerimiseks või lisatud vormi sisenditeks.