Perus CSS

Telineen päällä HTML-peruselementit on muotoiltu ja parannettu laajennettavilla luokilla tuoreen, yhtenäisen ilmeen ja tuntuman saamiseksi.

Otsikot ja leipäteksti

Typografinen mittakaava

Koko typografinen ruudukko perustuu kahteen Less-muuttujaan variables.less-tiedostossamme: @baseFontSizeja @baseLineHeight. Ensimmäinen on kauttaaltaan käytetty perusfontin koko ja toinen on perusviivan korkeus.

Käytämme näitä muuttujia ja hieman matematiikkaa kaikkien tyyppiemme marginaalien, täytteiden ja rivinkorkeuksien luomiseen ja paljon muuta.

Esimerkki leipäteksti

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äärunkokopio

Tee kappaleesta erottuva lisäämällä .lead.

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

h1. Otsikko 1

h2. Otsikko 2

h3. Otsikko 3

h4. Otsikko 4

h5. Otsikko 5
h6. Otsikko 6

Painotus, osoite ja lyhenne

Elementti Käyttö Valinnainen
<strong> Tekstinpätkän korostamiseen tärkeällä Ei mitään
<em> Tekstinpätkän korostamiseen stressillä Ei mitään
<abbr> Kääriä lyhenteet ja akronyymit näyttämään laajennetun version hiirellä

Sisällytä valinnainen titlemäärite laajennettuun tekstiin

Käytä .initialismluokkaa isojen kirjainten lyhenteissä.
<address> Lähimmän esi-isän tai koko työn yhteystiedot Säilytä muotoilu lopettamalla kaikki rivit<br>

Korostusta käyttämällä

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, pharetra augue.

Huomautus: Voit vapaasti käyttää <b>ja <i>HTML5:ssä, mutta niiden käyttö on muuttunut hieman. <b>on tarkoitettu korostamaan sanoja tai lauseita antamatta lisätärkeyttä, kun taas <i>se on enimmäkseen puhetta, teknisiä termejä jne.

Esimerkkiosoitteet

Tässä on kaksi esimerkkiä <address>tunnisteen käytöstä:

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

Esimerkki lyhenteitä

Attribuutilla varustetuilla lyhenteillä titleon vaalea pisteviiva alareuna ja ohjekohdistin osoitin. Tämä antaa käyttäjille lisätietoa siitä, että jotain näytetään hiiren päällä.

Lisää initialismluokka lyhenteeseen lisätäksesi typografista harmoniaa pienentämällä tekstiä hieman.

HTML on parasta sitten viipaloidun leivän.

Sanan attribuutti lyhenne on attr .

Lohkolainaukset

Elementti Käyttö Valinnainen
<blockquote> Lohkotason elementti sisällön lainaamiseen toisesta lähteestä

Lisää citeattribuutti lähde-URL-osoitteeseen

Käytä .pull-leftja .pull-rightluokkia kelluville vaihtoehdoille
<small> Valinnainen elementti käyttäjälle tarkoitetun sitaatin lisäämiseen, yleensä tekijä, jolla on teoksen nimi Sijoita <cite>otsikon tai lähteen nimen ympärille

Jos haluat sisällyttää lainauksen, kierrä <blockquote>minkä tahansa HTML -koodi lainauksena. Suorille lainauksille suosittelemme <p>.

Sisällytä valinnainen <small>elementti lähteen mainitsemiseksi, niin saat sen &mdash;eteen em-viivan muotoilua varten.

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

Esimerkki lohkolainauslauseista

Oletuslainausmerkit on muotoiltu seuraavasti:

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

Joku kuuluisa Body of workissa

Liu'uta lohkolainaus oikealle lisäämällä class="pull-right":

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

Joku kuuluisa Body of workissa

Luettelot

Tilaamaton

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Kokonaisluku molestie lorem ja 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

Tyylitön

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Kokonaisluku molestie lorem ja 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

Tilattu

<ol>

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

Kuvaus

<dl>

Kuvausluettelot
Kuvausluettelo on täydellinen termien määrittelyyn.
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.

Vaakasuuntainen kuvaus

<dl class="dl-horizontal">

Kuvausluettelot
Kuvausluettelo on täydellinen termien määrittelyyn.
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.

Varoitus! Vaakasuuntaiset kuvausluettelot lyhentävät termit, jotka ovat liian pitkiä mahtumaan vasemman sarakkeen korjaukseen text-overflow. Kapeammissa näkymäporteissa ne muuttuvat oletusarvoiseksi pinotuksi asetteluksi.

Linjassa

Kääri tekstin sisäiset koodinpätkät <code>.

  1. Esimerkiksi < code > -osio < / code > tulee kääriä riviin .

Peruslohko

Käytä <pre>useille koodiriveille. Muista jättää koodin kulmasulkeet pois oikeasta renderöinnista.

<p>Esiteksti tässä...</p>
  1. <pre>
  2. <p>Esimerkkiteksti tässä...</p>
  3. </pre>

Huomautus: Varmista, että koodi on <pre>tagien sisällä mahdollisimman lähellä vasenta. se hahmontaa kaikki välilehdet.

Voit halutessasi lisätä .pre-scrollableluokan, joka asettaa enimmäiskorkeudeksi 350 pikseliä ja tarjoaa y-akselin vierityspalkin.

Google Prettify

Ota sama <pre>elementti ja lisää kaksi valinnaista luokkaa tehostaaksesi renderöintiä.

  1. <p> Esimerkkiteksti täällä... </p>
  1. <pre class = "kaunis printti
  2. linenums" >
  3. <p>Esimerkkiteksti tässä...</p>
  4. </pre>

Lataa google-code-prettify ja katso käyttöohjeet readme-tiedostosta.

Taulukon merkintä

Tag Kuvaus
<table> Kääritty elementti tietojen näyttämiseksi taulukkomuodossa
<thead> Taulukon otsikkorivien ( <tr>) säilöelementti taulukon sarakkeiden merkitsemiseksi
<tbody> Taulukon rivien ( <tr>) säilöelementti taulukon rungossa
<tr> Säilöelementti taulukon solujoukolle ( <td>tai <th>), joka näkyy yhdellä rivillä
<td> Taulukon oletussolu
<th> Erillinen taulukon solu sarake- (tai rivi-, laajuudesta ja sijoittelusta riippuen) tarroille
On käytettävä a<thead>
<caption> Kuvaus tai yhteenveto taulukon sisällöstä, erityisen hyödyllinen näytönlukuohjelmille
  1. <taulukko>
  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>

Taulukkovaihtoehdot

Nimi Luokka Kuvaus
Oletus Ei mitään Ei tyylejä, vain sarakkeita ja rivejä
Perus .table Vain vaakasuorat viivat rivien välissä
Reunattu .table-bordered Pyöristää kulmat ja lisää ulkoreunuksen
Seepra-raita .table-striped Lisää vaaleanharmaan taustavärin parittomille riveille (1, 3, 5 jne.)
Tiivistetty .table-condensed Leikkaa pystysuoran pehmustuksen puoliksi, 8 pikselistä 4 pikseliin, kaikissa tdja thelementeissä

Esimerkkitaulukot

1. Oletustaulukkotyylit

Taulukot muotoillaan automaattisesti vain muutamilla reunuksilla luettavuuden ja rakenteen säilyttämiseksi. 2.0:lla .tableluokka vaaditaan.

  1. <taulukkoluokka = " taulukko" >
  2. </table>
# Etunimi Sukunimi Käyttäjätunnus
1 Mark Otto @mdo
2 Jacob Thornton @rasva
3 Larry lintu @viserrys

2. Raidallinen pöytä

Nauti pöydistäsi lisäämällä seepraraitoja – lisää vain .table-stripedluokka.

Huomautus: Raidalliset taulukot käyttävät :nth-childCSS-valitsinta, eikä niitä ole saatavana IE7-IE8:ssa.

  1. <table class = "taulukko pöytäraidallinen" >
  2. </table>
# Etunimi Sukunimi Käyttäjätunnus
1 Mark Otto @mdo
2 Jacob Thornton @rasva
3 Larry lintu @viserrys

3. Reunattu taulukko

Lisää reunukset koko pöydän ympärille ja pyöristetyt kulmat esteettisistä syistä.

  1. <table class = "taulukon taulukkoreunattu" >
  2. </table>
# Etunimi Sukunimi Käyttäjätunnus
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Jacob Thornton @rasva
3 Larry lintu @viserrys

4. Tiivistetty pöytä

Tee taulukoistasi kompakteja lisäämällä .table-condensedluokka, joka leikkaa taulukon solujen täytön kahtia (8 pikselistä 4 pikseliin).

  1. <table class = "taulukkotaulukko-tiivistetty" >
  2. </table>
# Etunimi Sukunimi Käyttäjätunnus
1 Mark Otto @mdo
2 Jacob Thornton @rasva
3 Larry lintu @viserrys

5. Yhdistä ne kaikki!

Voit vapaasti yhdistää mitä tahansa pöytäluokista saadaksesi erilaisia ​​ulkoasuja käyttämällä mitä tahansa saatavilla olevia luokkia.

  1. <table class = "taulukko taulukko-raidallinen taulukko-reunustettu taulukko-tiivistetty" >
  2. ...
  3. </table>
Koko nimi
# Etunimi Sukunimi Käyttäjätunnus
1 Mark Otto @mdo
2 Jacob Thornton @rasva
3 Larry lintu @viserrys

Joustava HTML ja CSS

Parasta Bootstrapin lomakkeissa on, että kaikki syötteesi ja säätimet näyttävät upeilta riippumatta siitä, miten luot ne merkinnöissäsi. Ylimääräistä HTML-koodia ei tarvita, mutta annamme mallit sitä tarvitseville.

Monimutkaisemmissa asetteluissa on ytimekkäät ja skaalautuvat luokat helpottamaan muotoilua ja tapahtumien sidontaa, joten olet suojattu joka vaiheessa.

Mukana neljä ulkoasua

Bootstrap tukee neljää lomakeasettelutyyppiä:

  • Pysty (oletus)
  • Hae
  • Linjassa
  • Vaakasuora

Erityyppiset lomakeasettelut vaativat joitain muutoksia merkintään, mutta itse säätimet pysyvät samoina ja toimivat samoina.

Hallintatilat ja paljon muuta

Bootstrapin lomakkeet sisältävät tyylejä kaikille perusmuotosäätimille, kuten syöttö-, tekstialue- ja valintavaihtoehdoille. Mutta sen mukana tulee myös useita mukautettuja komponentteja, kuten liitetty ja edeltävä syöte sekä tuki valintaruutujen luetteloille.

Tilat, kuten virhe, varoitus ja onnistuminen, sisältyvät jokaiseen lomakehallintatyyppiin. Mukana on myös tyylejä vammaisille säätimille.

Neljä erilaista lomaketta

Bootstrap tarjoaa yksinkertaisia ​​merkintöjä ja tyylejä neljälle yleisille verkkolomakkeille.

Nimi Luokka Kuvaus
Pysty (oletus) .form-vertical (ei vaadittu) Pinotut, vasemmalle tasatut tarrat säätimien päällä
Linjassa .form-inline Vasemmalle kohdistetut tarra- ja rivisäätimet kompaktiin tyyliin
Hae .form-search Erittäin pyöristetty tekstinsyöttö tyypilliseen hakuestetiikkaan
Vaakasuora .form-horizontal Kelluuta vasemmalle, oikealle tasattuja tarroja samalla rivillä kuin säätimiä

Esimerkkilomakkeista, joissa käytetään vain lomakeohjausobjekteja, ei ylimääräisiä merkintöjä

Perusmuoto

Älykkäät ja kevyet oletusasetukset ilman ylimääräisiä merkintöjä.

Esimerkki lohkotason ohjetekstistä tässä.

  1. <form class = "hyvin" >
  2. <label> Tarran nimi </label>
  3. <input type = "text" class = "span3" placeholder = "Kirjoita jotain..." >
  4. <span class = "help-block" > Esimerkki lohkotason ohjeteksti tästä. </span>
  5. <label class = "valintaruutu" >
  6. <input type = "checkbox" > Tarkista minut
  7. </label>
  8. <button type = "submit" class = "btn" > Lähetä </button>
  9. </form>

Hakulomake

Lisää .form-searchlomakkeeseen .search-queryja input.

  1. <form class = "hyvin lomakehaku" >
  2. <syöttötyyppi = " teksti" class = "syöttötavan hakukysely" >
  3. <button type = "submit" class = "btn" > Hae </button>
  4. </form>

Sisäänrakennettu lomake

Lisää .form-inlinehienostuneeksi lomakesäätimien pystysuuntainen tasaus ja väli.

  1. <form class = "hyvin muoto-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Sähköposti" >
  3. <input type = "password" class = "input-small" placeholder = "Salasana" >
  4. <label class = "valintaruutu" >
  5. <input type = "checkbox" > Muista minut
  6. </label>
  7. <button type = "submit" class = "btn" > Kirjaudu sisään </button>
  8. </form>

Vaakasuuntaiset muodot

Oikealla näkyvät kaikki tukemamme oletuslomakeohjaimet. Tässä on luettelomerkitty luettelo:

  • tekstinsyöttö (teksti, salasana, sähköposti jne.)
  • valintaruutu
  • radio
  • valitse
  • useita valintoja
  • tiedoston syöttö
  • tekstialue

Vapaamuotoisen tekstin lisäksi mikä tahansa HTML5-tekstipohjainen syöttö näyttää siltä.

Esimerkki merkinnästä

Kun otetaan huomioon yllä oleva esimerkkilomakeasettelu, tässä on ensimmäiseen syöttö- ja ohjausryhmään liittyvä merkintä. Luokat .control-group, .control-label, ja .controlskaikki vaaditaan muotoiluun.

  1. <form class = "form-horizontal" >
  2. <kenttäjoukko>
  3. <legend> Seliteteksti </legend>
  4. <div class = "kontrolliryhmä" >
  5. <label class = "control-label" for = "input01" > Tekstinsyöttö </label>
  6. <div class = "säätimet" >
  7. <syöttötyyppi = " teksti" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Tukeva ohjeteksti </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Lomakkeen hallintatilat

Bootstrap sisältää tyylejä selaimen tukemille kohdistetuille ja disabledtiloille. Poistamme Webkit-oletuspaketin outlineja käytämme box-shadowsen tilalle a:ta :focus.


Lomakkeen vahvistus

Se sisältää myös validointityylejä virheiden, varoitusten ja onnistumisen varalta. Käytä lisäämällä virheluokka ympäröivään .control-group.

  1. <kenttäjoukko
  2. class = "ohjausryhmän virhe" >
  3. </fieldset>
Jotain arvoa tässä
Jokin on saattanut mennä pieleen
Korjaa virhe
Woohoo!
Woohoo!

Lomakkeen ohjaimien laajentaminen

Lisää ja liitä syötteitä

Syöttöryhmät – joihin on liitetty tai lisätty teksti – tarjoavat helpon tavan antaa lisää kontekstia syötteillesi. Hyviä esimerkkejä ovat @-merkki Twitter-käyttäjätunnuksille tai $ talouselämälle.


Valintaruudut ja radiot

Vuoteen 1.4 asti Bootstrap vaati ylimääräisiä merkintöjä valintaruutujen ja radioiden pinoamiseksi. Nyt on yksinkertainen asia <label class="checkbox">toistaa <input type="checkbox">.

Myös upotetut valintaruudut ja radiot ovat tuettuja. Lisää vain .inlinemihin tahansa .checkboxtai .radioja olet valmis.


Upotetut lomakkeet ja liittäminen/alku

Jos haluat käyttää prepend- tai append-syötteitä upotettuna, muista sijoittaa .add-onja inputsamalle riville ilman välilyöntejä.


Lomakkeen ohjeteksti

Jos haluat lisätä ohjetekstiä lomakkeen syötteisiin, sisällytä syöttöelementin kanssa upotettu ohjeteksti <span class="help-inline">tai ohjetekstilohko <p class="help-block">.

Käytä samoja .span*luokkia ruudukkojärjestelmästä syöttökooksi.

Voit myös käyttää staattisia luokkia, jotka eivät liity ruudukkoon, eivät mukaudu reagoiviin CSS-tyyleihin tai ottavat huomioon erityyppisiä ohjausobjekteja (esim. inputvs. select).

@

Tässä hieman ohjetekstiä

.00
Tässä lisää ohjetekstiä
$ .00

Huomautus: Tarrat ympäröivät kaikki vaihtoehdot paljon suurempien napsautusalueiden ja käyttökelpoisemman muodon saamiseksi.

Painike class="" Kuvaus
btn Normaali harmaa painike gradientilla
btn btn-primary Tarjoaa lisää visuaalista painoarvoa ja tunnistaa ensisijaisen toiminnon painikesarjassa
btn btn-info Käytetään vaihtoehtona oletustyyleille
btn btn-success Osoittaa onnistuneen tai positiivisen toimenpiteen
btn btn-warning Osoittaa, että tämän toimenpiteen kanssa tulee noudattaa varovaisuutta
btn btn-danger Osoittaa vaarallista tai mahdollisesti negatiivista toimintaa
btn btn-inverse Vaihtoehtoinen tummanharmaa painike, jota ei ole sidottu semanttiseen toimintaan tai käyttöön

Toimintojen painikkeet

Käytännössä painikkeita tulee käyttää vain toimintoihin, kun taas hyperlinkkejä tulee käyttää objekteihin. Esimerkiksi "Lataa" pitäisi olla painike, kun taas "viimeaikainen toiminta" on linkki.

Painiketyylejä voidaan soveltaa mihin tahansa .btnluokkaa sovellettaessa. Yleensä haluat kuitenkin soveltaa näitä vain <a>ja <button>-elementteihin.

Selainten välinen yhteensopivuus

IE9 ei rajaa taustagradientteja pyöristetyissä kulmissa, joten poistamme sen. Aiheeseen liittyvä IE9 poistaa käytöstä poistettuja buttonelementtejä ja tekee tekstistä harmaata ja ikäviä tekstivarjoja, joita emme voi korjata.

Useita kokoja

Haluatko suurempia vai pienempiä painikkeita? Lisää .btn-large, .btn-small, tai .btn-minikaksi lisäkokoa.


Pois käytöstä

Jos painikkeita ei ole käytössä, lisää .disabledluokka linkkeihin ja disabledattribuutti <button>elementeille.

Ensisijainen linkki Linkki

Varoitus! Käytämme .disabledtässä hyödyllisyysluokkana, joka on samanlainen kuin yleinen .activeluokka, joten etuliitettä ei vaadita.

Yksi luokka, useita tunnisteita

Käytä .btnluokkaa elementissä <a>, <button>, tai <input>.

Linkki
  1. <a class = "btn" href = "" > Linkki </a>
  2. <button class = "btn" type = "lähetä" >
  3. Painike
  4. </button>
  5. <input class = "btn" type = "button"
  6. arvo = "Syöte" >
  7. <input class = "btn" type = "lähetä"
  8. value = "Lähetä" >

Parhaana käytäntönä on, että yritä sovittaa elementti kontekstisi mukaan varmistaaksesi, että se sopii yhteen selaimen välillä. Jos sinulla on input, käytä <input type="submit">painiketta .

  • ikoni-lasi
  • ikoni-musiikki
  • kuvakehaku
  • kuvake-kuori
  • ikoni-sydän
  • ikoni-tähti
  • kuvake-tähti-tyhjä
  • kuvake-käyttäjä
  • ikoni-elokuva
  • kuvake-suuri
  • ikoni-th
  • icon-th-list
  • kuvake-ok
  • kuvake-poista
  • kuvake-zoomaus
  • icon-zoom-out
  • kuvake pois päältä
  • kuvake-signaali
  • ikoni-hammaspyörä
  • kuvake-roskakori
  • ikoni-koti
  • kuvake-tiedosto
  • ikoni-aika
  • ikonitie
  • icon-download-alt
  • kuvake-lataus
  • kuvake-lataus
  • kuvake-postilaatikko
  • kuvake-leikki-ympyrä
  • kuvake-toisto
  • kuvake-päivitys
  • icon-list-alt
  • kuvake-lukko
  • ikoni-lippu
  • ikoni-kuulokkeet
  • icon-volume-off
  • kuvake-äänenvoimakkuuden vähennys
  • kuvakkeen äänenvoimakkuuden lisäys
  • icon-qrcode
  • kuvake-viivakoodi
  • kuvake-tunniste
  • kuvake-tunnisteet
  • ikoni-kirja
  • kuvake-kirjanmerkki
  • kuvake-tulostus
  • kuvake-kamera
  • kuvake-fontti
  • kuvake-lihavoitu
  • kursivoitu kuvake
  • kuvake-teksti-korkeus
  • kuvake-tekstin leveys
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • kuvakeluettelo
  • kuvake-sisennys-vasen
  • kuvake-sisennys-oikea
  • icon-facetime-video
  • kuvake-kuva
  • ikoni-kynä
  • icon-map-marker
  • kuvake-säätö
  • kuvake-sävy
  • kuvake-muokkaus
  • ikoni-osuus
  • kuvake-tarkistus
  • kuvake-siirto
  • kuvake-askel-taaksepäin
  • kuvake-pika taaksepäin
  • kuvake taaksepäin
  • icon-play
  • kuvake-tauko
  • icon-stop
  • kuvake eteenpäin
  • kuvake-kelaus eteenpäin
  • kuvake-askel eteenpäin
  • kuvake-poisto
  • icon-chevron-vasen
  • icon-chevron-right
  • kuvake-plus-merkki
  • kuvake-miinus-merkki
  • kuvake-poista-merkki
  • kuvake-ok-merkki
  • kuvake-kysymys-merkki
  • kuvake-info-merkki
  • kuvake-kuvakaappaus
  • kuvake-poista-ympyrä
  • kuvake-ok-ympyrä
  • kuvake-kielto-ympyrä
  • kuvake-nuoli-vasen
  • kuvake-nuoli oikealle
  • kuvake-nuoli ylös
  • kuvake-nuoli-alas
  • icon-share-alt
  • icon-resize-full
  • kuvake-muuta kokoa-pieni
  • icon-plus
  • kuvake-miinus
  • kuvake-tähti
  • kuvake-huutomerkki
  • ikoni-lahja
  • ikoni-lehti
  • ikoni-tuli
  • ikoni-silmä auki
  • kuvake-silmä kiinni
  • kuvake-varoitus-merkki
  • ikoni-taso
  • ikoni-kalenteri
  • ikoni-satunnainen
  • ikoni-kommentti
  • ikoni-magneetti
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • kuvake-ostoskori
  • icon-folder-close
  • kuvake-kansio-avoin
  • icon-resize-pysty
  • icon-resize-horizontal
  • icon-hdd
  • kuvake-bullhorn
  • ikoni-kello
  • ikoni-todistus
  • kuvake-peukalo ylös
  • kuvake-peukalo alas
  • kuvake-käsi-oikea
  • icon-hand-vasen
  • kuvake-käsi ylös
  • kuvake-käsi alas
  • kuvake-ympyrä-nuoli oikealle
  • kuvake-ympyrä-nuoli-vasen
  • kuvake-ympyrä-nuoli ylös
  • kuvake-ympyrä-nuoli-alas
  • ikoni-maapallo
  • ikoni-avain
  • ikonitehtävät
  • kuvake-suodatin
  • ikoni-salkku
  • kuvake-koko näyttö

Rakennettu spriteksi

Sen sijaan, että olisimme tehneet jokaisesta kuvakkeesta ylimääräisen pyynnön, olemme koonneet ne spriteiksi – joukoksi kuvia yhdessä tiedostossa, joka käyttää CSS:ää kuvien sijoittamiseen background-position. Tämä on sama menetelmä, jota käytämme Twitter.comissa, ja se on toiminut hyvin meillä.

Kaikki kuvakeluokat on varustettu etuliitteellä .icon-oikeaa nimiväliä ja laajuutta varten, aivan kuten muissakin komponenteissamme. Tämä auttaa välttämään ristiriitoja muiden työkalujen kanssa.

Glyphicons on antanut meille mahdollisuuden käyttää avoimen lähdekoodin työkalupakkiamme Halflings-sarjaa, kunhan annamme linkin ja hyvityksen täällä dokumenteissa. Harkitse samanlaista tekemistä projekteissasi.

Kuinka käyttää

Bootstrap käyttää <i>tunnistetta kaikille kuvakkeille, mutta niillä ei ole tapausluokkaa – vain jaettu etuliite. Käytä seuraavaa koodia sijoittamalla melkein minne tahansa:

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

Saatavilla on myös tyylejä käänteisille (valkoisille) kuvakkeille, jotka on valmistettu yhdellä lisäluokalla:

  1. <i class = "kuvake-haku kuvake-valkoinen" ></i>

Valittavana on 140 luokkaa kuvakkeillesi. Lisää vain <i>tunniste oikeilla luokilla ja olet valmis. Löydät täydellisen luettelon osoitteesta sprites.less tai tästä asiakirjasta.

Varoitus! Kun käytät tekstiä merkkijonojen vieressä, kuten painikkeissa tai navigointilinkeissä, muista jättää välilyönti <i>tunnisteen perään oikean välityksen varmistamiseksi.

Käytä koteloita

Ikonit ovat mahtavia, mutta missä niitä voisi käyttää? Tässä muutamia ideoita:

  • Visuaalisena kuvana sivupalkin navigointiin
  • Puhtaasti kuvakepohjaiseen navigointiin
  • Painikkeille, jotka auttavat välittämään toiminnon merkityksen
  • Linkkejä kontekstin jakamiseen käyttäjän kohteessa

Käytännössä minne voit laittaa <i>tunnisteen, voit laittaa kuvakkeen.

Esimerkkejä

Käytä niitä painikkeissa, painikeryhmissä työkalupalkissa, navigoinnissa tai lisättyjen lomakkeiden syötteissä.