Tushen CSS

A saman zane-zane, ainihin abubuwan HTML an tsara su kuma an inganta su tare da azuzuwan da za a iya ba da su don samar da sabo, daidaitaccen kama da ji.

Kanun labarai & kwafin jiki

Ma'aunin rubutu

Gabaɗayan grid ɗin rubutun ya dogara ne akan ƙananan ma'auni guda biyu a cikin masu canjin mu.Fayil maras kyau: @baseFontSizeda @baseLineHeight. Na farko shine girman font-girman da aka yi amfani da shi duka kuma na biyu shine tsayin layin tushe.

Muna amfani da waɗancan sauye-sauye, da wasu maths, don ƙirƙira margins, paddings, da tsayin layi na kowane nau'in mu da ƙari.

Misali rubutun jiki

Nullam quis risus eget urna mollis ornare vel eu leo. Duk da haka, muna magana ne game da abin ban mamaki da kuma ban mamaki. Nullam id dolor id nibh ultricies vehicula ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

h1. Take 1

h2. Take 2

h3. Take 3

h4. Take 4

h5. Take 5
h6. Take 6

Ƙaddamarwa, adireshin, da gajarta

Abun ciki Amfani Na zaɓi
<strong> Don jaddada gunkin rubutu da mahimmanci Babu
<em> Don jaddada guntun rubutu tare da damuwa Babu
<abbr> Yana tattara gajarta da gajarta don nuna faɗaɗɗen sigar akan hover

Haɗa sifa na zaɓi titledon faɗaɗa rubutu

Yi amfani .initialismda aji don gajartawar manyan haruffa.
<address> Don bayanin tuntuɓar kakansa na kusa ko dukan aikin Ajiye tsarawa ta ƙare duk layi da<br>

Amfani da girmamawa

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.

Lura: Jin kyauta don amfani <b>kuma <i>a cikin HTML5, amma amfanin su ya ɗan canza kaɗan. <b>ana nufin haskaka kalmomi ko jimloli ba tare da isar da ƙarin mahimmanci ba yayin <i>da galibin murya ne, kalmomin fasaha, da sauransu.

Misali adireshi

Ga misalai guda biyu na yadda <address>za a iya amfani da alamar:

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

Misali gajarta

Gajartawa tare da titlesifa suna da haske mai dige-gege na ƙasa da siginan taimako akan shawagi. Wannan yana ba masu amfani ƙarin nunin wani abu da za a nuna akan hover.

Ƙara initialismajin zuwa gajarce don ƙara daidaituwar rubutu ta hanyar ba shi ɗan ƙaramin girman rubutu.

HTML shine abu mafi kyau tun yankakken gurasa.

Gajartawar kalmar sifa ita ce attr .

Blockquotes

Abun ciki Amfani Na zaɓi
<blockquote> Kashi-matakin toshe don faɗar abun ciki daga wani tushe

Ƙara citesifa don tushen URL

Amfani .pull-leftda .pull-rightazuzuwan don zaɓuɓɓukan iyo
<small> Abun zaɓi don ƙara ambato mai fuskantar mai amfani, yawanci marubuci mai taken aiki Sanya <cite>kewayen take ko sunan tushen

Don haɗa da blockquote, kunsa <blockquote>kowane HTML azaman abin ƙira. Don madaidaiciyar magana muna ba da shawarar a <p>.

Haɗa wani zaɓi na zaɓi <small>don faɗi tushen ku kuma za ku sami dash &mdash;a gabansa don dalilai na salo.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer yana da alaƙa da ante venenatis. </p>
  3. <small> Wani sanannen </small>
  4. </blockquote>

Misali blockquotes

Tsohuwar blockquotes an tsara su kamar haka:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer yana da alaƙa da ante venenatis.

Wani shahararre a Jikin aiki

Don shawagi blockquote zuwa dama, ƙara class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer yana da alaƙa da ante venenatis.

Wani shahararre a Jikin aiki

Lissafi

Ba a ba da oda ba

<ul>

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

Mara salo

<ul class="unstyled">

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

An yi oda

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis a cikin pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Bayani

<dl>

Jerin bayanin
Jerin bayanin ya dace don ma'anar kalmomi.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id un mi porta gravida a eget metus.
Malesuada porta
Ka yi la'akari da abin da ake kira euismod.

Bayanin kwance

<dl class="dl-horizontal">

Jerin bayanin
Jerin bayanin ya dace don ma'anar kalmomi.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id un mi porta gravida a eget metus.
Malesuada porta
Ka yi la'akari da abin da ake kira euismod.

Layin layi

Kunna snippets na layi tare da <code>.

  1. Misali , < code> sashe </ code > yakamata a nade shi azaman layi .

Tushe na asali

Yi amfani <pre>da layukan lamba da yawa. Tabbatar ku guje wa kowane madaidaicin kusurwa a cikin lambar don ma'anar da ta dace.

<p>Sample rubutu a nan...</p>
  1. <pre>
  2. <p>Sample rubutu a nan...</p>
  3. </pre>

Lura: Tabbatar kiyaye lamba a cikin <pre>alamun kusa da hagu kamar yadda zai yiwu; zai sanya duk shafuka.

Kuna iya ƙara .pre-scrollableajin da zaɓin wanda zai saita max-tsawo na 350px kuma ya ba da madaidaicin madaidaicin y-axis.

Google Prettify

Ɗauki kashi iri <pre>ɗaya kuma ƙara azuzuwan zaɓi biyu don ingantacciyar ma'ana.

  1. <p> Misalin rubutu a nan... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Sample rubutu a nan...</p>
  4. </pre>

Zazzage google-code-prettify kuma duba readme don yadda ake amfani da su.

Tambarin tebur

Tag Bayani
<table> Nade kashi don nuna bayanai a cikin tsari na tabular
<thead> Kayan kwantena don layuka na kan tebur ( <tr>) don yiwa ginshiƙan tebur lakabi
<tbody> Kayan kwantena don layuka na tebur ( <tr>) a jikin teburin
<tr> Kayan kwantena don saitin sel na tebur ( <td>ko <th>) wanda ke bayyana akan layi ɗaya
<td> Tantanin halitta na asali
<th> Tantanin tebur na musamman don ginshiƙi (ko jere, dangane da iyaka da jeri)
Dole ne a yi amfani da alamun a cikin a<thead>
<caption> Bayani ko taƙaita abin da teburin ya ƙunsa, musamman masu amfani ga masu karanta allo
  1. <tebur>
  2. <fito>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </fadi>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </text>

Zaɓuɓɓukan tebur

Suna Class Bayani
Default Babu Babu salo, kawai ginshiƙai da layuka
Na asali .table Layukan kwance kawai tsakanin layuka
An yi iyaka .table-bordered Zagaye sasanninta kuma yana ƙara iyakar waje
Zaki-tsari .table-striped Yana ƙara launin haske mai launin toka mai haske zuwa layuka mara kyau (1, 3, 5, da sauransu)
Natsuwa .table-condensed Yanke fakitin tsaye cikin rabi, daga 8px zuwa 4px, cikin duka tdda thabubuwa

Tables na misali

1. Default tebur styles

Ana yin salo ta atomatik tare da ƴan iyakoki don tabbatar da karantawa da kiyaye tsari. Tare da 2.0, .tableana buƙatar aji.

  1. < class class = "tebur" >
  2. </text>
# Sunan rana Sunan mahaifa Sunan mai amfani
1 Alama Otto @mdo
2 Yakubu Thornton @mai
3 Larry Tsuntsu @twitter

2. Teburin tsiri

Samun ɗan zato tare da tebur ɗinku ta ƙara zakin zebra - ƙara .table-stripedaji kawai.

Lura: Teburan da aka zare suna amfani da :nth-childmai zaɓin CSS kuma babu shi a cikin IE7-IE8.

  1. < class class = "Table-stripped" >
  2. </text>
# Sunan rana Sunan mahaifa Sunan mai amfani
1 Alama Otto @mdo
2 Yakubu Thornton @mai
3 Larry Tsuntsu @twitter

3. Tebur mai iyaka

Ƙara iyakoki kewaye da dukan teburi da sasanninta masu zagaye don dalilai na ado.

  1. < class class = "tebur mai iyaka" >
  2. </text>
# Sunan rana Sunan mahaifa Sunan mai amfani
1 Alama Otto @mdo
Alama Otto @getbootstrap
2 Yakubu Thornton @mai
3 Larry the Bird @twitter

4. Tebur mai kauri

Sanya tebur ɗin ku ya zama ƙarami ta ƙara .table-condensedajin don yanke padding cell ɗin tebur a rabi (daga 8px zuwa 4px).

  1. < class class = "Table-condensed" >
  2. </text>
# Sunan rana Sunan mahaifa Sunan mai amfani
1 Alama Otto @mdo
2 Yakubu Thornton @mai
3 Larry the Bird @twitter

5. Haɗa su duka!

Jin kyauta don haɗa kowane azuzuwan tebur don cimma kamanni daban-daban ta amfani da kowane ɗayan darussan da ake da su.

  1. < class class = "Table-stried table-condensed table-condensed" >
  2. ...
  3. </text>
Cikakken suna
# Sunan rana Sunan mahaifa Sunan mai amfani
1 Alama Otto @mdo
2 Yakubu Thornton @mai
3 Larry the Bird @twitter

HTML da CSS masu sassauƙa

Mafi kyawun sashi game da fom a cikin Bootstrap shine cewa duk abubuwan shigar ku da abubuwan sarrafawa suna da kyau komai yadda kuka gina su a cikin alamarku. Ba a buƙatar babban HTML, amma muna samar da tsari ga waɗanda ke buƙatar sa.

Ƙarin rikitattun shimfidu suna zuwa tare da taƙaitattun azuzuwan da za a iya daidaita su don salo mai sauƙi da ɗaure taron, don haka ana rufe ku a kowane mataki.

An haɗa shimfidu huɗu

Bootstrap ya zo tare da tallafi don nau'ikan shimfidu nau'i huɗu:

  • A tsaye (tsoho)
  • Bincika
  • Layin layi
  • A kwance

Nau'o'in shimfidar tsari daban-daban suna buƙatar wasu canje-canje don yin alama, amma abubuwan sarrafawa da kansu sun kasance kuma suna yin iri ɗaya.

Sarrafa jihohin da sauransu

Siffofin Bootstrap sun haɗa da salo don duk tushen tsarin sarrafawa kamar shigarwa, yanki, da zaɓin da kuke so. Amma kuma yana zuwa tare da adadin abubuwan abubuwan al'ada kamar abubuwan da aka haɗa da waɗanda aka riga aka tsara da kuma goyan bayan lissafin akwatunan rajista.

Jihohi kamar kuskure, gargaɗi, da nasara an haɗa su don kowane nau'in sarrafa nau'i. Hakanan an haɗa da salo don sarrafa nakasassu.

Nau'u nau'i hudu

Bootstrap yana ba da alama mai sauƙi da salo don salo huɗu na nau'ikan gidan yanar gizo gama gari.

Suna Class Bayani
A tsaye (tsoho) .form-vertical (ba a buƙata) Maƙarƙashiya, alamun hagu akan sarrafawa
Layin layi .form-inline Alamar hagu da sarrafa toshe-layi don ƙaramin salo
Bincika .form-search Shigar da rubutu mai zagaye don ƙayataccen bincike na musamman
A kwance .form-horizontal Taso kan hagu, lambobi masu layi na dama akan layi ɗaya da masu sarrafawa

Samfuran misali ta amfani da tsarin sarrafawa kawai, babu ƙarin alama

Siffar asali

Tare da v2.0, muna da mafi sauƙi kuma mafi wayo don tsarin tsari. Babu ƙarin alama, kawai samar da sarrafawa.

Rubutun taimako mai alaƙa!

Misalin rubutun taimako na matakin toshe anan.

  1. < class class = "da kyau" >
  2. <label> Lakabin suna </label>
  3. < nau'in shigarwa = "rubutu" aji = "span3" mai riƙewa = " Buga wani abu..." >
  4. <span class = "help-inline" > Rubutun taimako mai alaƙa! </span>
  5. < class class = "checkbox" >
  6. < nau'in shigarwa = "akwatin ajiya" > Duba ni
  7. </labarai>
  8. <button type = "submit" class = "btn" > Aika < /button>
  9. </form>

Binciken tsari

Nuna tsoffin salon WebKit, kawai ƙara .form-searchdon ƙarin wuraren bincike mai zagaye.

  1. < class class = "da kyau form-search" >
  2. < nau'in shigarwa = "rubutu" aji = "tambayoyin bincike-matsakaici" >
  3. <button type = "submit" class = "btn" > Bincika </button>
  4. </form>

Tsarin layi

Abubuwan shigarwa sune matakin toshe don farawa. Don .form-inlinekuma .form-horizontal, muna amfani da block-line.

  1. < class class = "to form-inline" >
  2. < nau'in shigarwa = "rubutu" aji = "input-small" mai sanya wuri = "Imel" >
  3. < nau'in shigarwa = "Password " aji = "shigar-small" mai sanya wuri = "Password" >
  4. < class class = "checkbox" >
  5. < nau'in shigarwa = "akwatin ajiya" > Ka tuna da ni
  6. </labarai>
  7. <button type = "submit" class = "btn" > Shiga </button>
  8. </form>

Siffofin kwance

Yana sarrafa tallafin Bootstrap

Baya ga rubutun kyauta, duk wani shigar da tushen rubutu na HTML5 ya bayyana kamar haka.

Misali alama

Idan aka ba da shimfidar sigar misali na sama, ga alamar da ke da alaƙa da shigarwar farko da ƙungiyar sarrafawa. Ana buƙatar .control-group, .control-label, da azuzuwan don salo..controls

  1. < class class = "form-horizontal" >
  2. <filaye>
  3. <labarin> Rubutun almara </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" don = "input01" > Shigar da rubutu </label>
  6. <div class = "controls" >
  7. < nau'in shigarwa = "rubutu" aji = "input-xlarge" id = "shigarwar01" >
  8. <p class = "help-block" > Taimakon rubutu </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Me ya hada

Ana nunawa a gefen hagu duk tsoffin tsarin sarrafa fom da muke tallafawa. Ga jerin harsashi:

  • shigar da rubutu (rubutu, kalmar sirri, imel, da sauransu)
  • akwati
  • rediyo
  • zaɓi
  • zaɓi da yawa
  • shigar da fayil
  • yankin rubutu

Sabbin abubuwan da suka dace tare da v2.0

Har zuwa v1.4, Siffofin sigar tsoho ta Bootstrap sun yi amfani da shimfidar kwance. Tare da Bootstrap 2, mun cire wannan ƙuntatawa don samun mafi wayo, mafi girman ma'auni na kowane nau'i.


Jihohin sarrafa tsari
Wasu ƙima a nan
Wataƙila wani abu ya ɓace
Da fatan za a gyara kuskuren
Woohoo!
Woohoo!

Jahohin mai binciken da aka sake tsarawa

Bootstrap yana fasalta salo don mai da hankali mai goyan bayan mai lilo da disabledjihohi. Muna cire tsohowar Webkit outlinekuma muna amfani da box-shadowa wurin sa don :focus.


Tabbatar da tsari

Hakanan ya haɗa da salon tabbatarwa don kurakurai, gargaɗi, da nasara. Don amfani, ƙara ajin kuskure zuwa kewaye .control-group.

  1. <filaye
  2. class = "kuskuren rukuni-rukuni" >
  3. </fieldset>

Ƙaddamar da sarrafa tsari

Yi amfani da .span*azuzuwan iri ɗaya daga tsarin grid don girman shigarwar.

Hakanan kuna iya amfani da azuzuwan a tsaye waɗanda ba su taswira zuwa grid ba, dacewa da salon CSS masu amsawa, ko asusu don nau'ikan sarrafawa daban-daban (misali, inputvs. select).

@

Ga wasu rubutun taimako

.00
Ga ƙarin rubutun taimako
$ .00

Lura: Lakabi suna kewaye da duk zaɓuɓɓukan don wuraren dannawa da yawa da mafi girman nau'i mai amfani.

Shirya & saka abubuwan shigarwa

Ƙungiyoyin shigarwa-tare da rubutun da aka haɗa ko riga-kafi-suna samar da hanya mai sauƙi don ba da ƙarin mahallin abubuwan da kuka shigar. Manyan misalai sun haɗa da alamar @ don sunayen masu amfani da Twitter ko $ don kuɗi.


Akwatunan rajista da rediyo

Har zuwa v1.4, Bootstrap yana buƙatar ƙarin alama a kusa da akwatunan bincike da rediyo don tara su. Yanzu, abu ne mai sauƙi na maimaita abin <label class="checkbox">da ke kunshe da <input type="checkbox">.

Hakanan ana tallafawa akwatunan rajistan layi da rediyo. Kawai ƙara .inlinezuwa kowane .checkboxko .radiokuma kun gama.


Siffofin layi da haɗawa/gabatarwa

Don amfani da prepend ko saka bayanai a cikin hanyar layi, tabbatar da sanya .add-onkuma inputakan layi ɗaya, ba tare da sarari ba.


Samar da rubutun taimako

Don ƙara rubutun taimako don shigar da sigar ku, haɗa da rubutun taimakon layi tare da <span class="help-inline">ko toshe rubutun taimako tare da <p class="help-block">bayan ɓangaren shigarwar.

Maɓalli class="" Bayani
btn Madaidaicin maɓallin launin toka tare da gradient
btn btn-primary Yana ba da ƙarin nauyin gani kuma yana gano aikin farko a cikin saitin maɓalli
btn btn-info An yi amfani dashi azaman madadin ga tsoffin salo
btn btn-success Yana nuna aiki mai nasara ko tabbatacce
btn btn-warning Ya nuna ya kamata a yi taka tsantsan da wannan matakin
btn btn-danger Yana nuna wani aiki mai haɗari ko mai yuwuwa mara kyau
btn btn-inverse Madadin maɓallin launin toka mai duhu, ba a ɗaure shi da aikin fassara ko amfani ba

Maɓallai don ayyuka

A matsayin al'ada, maɓalli ya kamata a yi amfani da su kawai don ayyuka yayin da za a yi amfani da hanyoyin haɗin gwiwa don abubuwa. Misali, "Zazzagewa" ya kamata ya zama maɓalli yayin da "aikin kwanan nan" ya zama hanyar haɗi.

Za a iya amfani da salon maɓalli ga kowane abu tare da .btnajin da aka yi amfani da shi. Koyaya, yawanci kuna son amfani da waɗannan ga kawai <a>da <button>abubuwa.

Tsallake dacewa da mai bincike

IE9 ba ya girbi gradients na baya akan sasanninta, don haka muna cire shi. Mai alaƙa, IE9 yana jankifies buttonabubuwan nakasassu, yana sanya rubutu launin toka tare da inuwar rubutu mara kyau wanda ba za mu iya gyarawa ba.

Girma masu yawa

Kuna son manyan maɓalli ko ƙarami? Ƙara .btn-large, .btn-small, ko .btn-minidon ƙarin girma biyu.


Jihar naƙasassu

Don maɓallan da aka kashe, ƙara .disabledajin zuwa mahaɗa da disabledsifa na <button>abubuwa.

Mahadar farko mahada

A kula! Muna amfani .disabledda ajin mai amfani anan, kama da na gama gari .active, don haka ba a buƙatar prefix.

Aji ɗaya, alamomi masu yawa

Yi amfani da .btnajin akan wani <a>, <button>, ko <input>kashi.

mahada
  1. <a class = "btn" href = "" > Link </a>
  2. < class class = "btn" type = "submit" >
  3. Maɓalli
  4. </button>
  5. < class class = "btn" type = "button"
  6. darajar = "Input" >
  7. < class class = "btn" type = "mika"
  8. darajar = "Aika" >

A matsayin mafi kyawun aiki, gwada dacewa da mahallin mahallin don tabbatar da dacewa da ma'anar mai binciken giciye. Idan kuna da input, yi amfani da <input type="submit">maɓallin don maɓallin ku.

  • ikon-gilashin
  • icon-music
  • ikon bincike
  • ikon ambulan
  • ikon-zuciya
  • ikon-tauraro
  • icon-tauraro-ba komai
  • ikon mai amfani
  • ikon fim
  • ikon-th-large
  • ikon --
  • icon-th-jeri
  • ikon Ok
  • ikon cirewa
  • ikon-zuwa-in
  • icon-zuwa-fita
  • ikon-kashe
  • ikon - siginar
  • ikon-kogi
  • ikon-sharar
  • ikon gida
  • ikon fayil
  • ikon lokaci
  • ikon-hanya
  • ikon-zazzage-alt
  • ikon download
  • ikon-upload
  • ikon-inbox
  • icon-play-da'irar
  • icon-maimaita
  • icon-refresh
  • icon-list-alt
  • ikon-kulle
  • ikon - flag
  • icon-belun kunne
  • ikon-girma-kashe
  • ikon-girma-saukar
  • ikon girma-up
  • ikon-qrcode
  • ikon barcode
  • ikon-tag
  • ikon-tags
  • ikon littafin
  • icon - alamar shafi
  • ikon bugawa
  • ikon-kamara
  • ikon font
  • ikon - m
  • ikon-italic
  • icon-rubutu-tsawo
  • icon-rubutu-nisa
  • icon-align-hagu
  • icon-align-center
  • icon-align-dama
  • icon-align-justify
  • ikon-list
  • icon-hannun-hagu
  • icon-indent-dama
  • icon-facetime-bidiyo
  • icon-hoto
  • ikon-fensir
  • ikon-taswira-alama
  • ikon daidaitawa
  • ikon - tint
  • ikon gyara
  • ikon share
  • ikon-tabbaci
  • ikon motsi
  • icon-mataki-baya
  • icon-sauri-baya
  • icon-baya
  • ikon yin wasa
  • ikon-dakata
  • ikon tsayawa
  • icon-gaba
  • icon-sauri-gaba
  • icon-mataki-gaba
  • ikon fitarwa
  • ikon-chevron-hagu
  • ikon-chevron-dama
  • icon-plus-alama
  • ikon-minus-alama
  • icon-cire-alamar
  • ikon-ok-alama
  • icon-tambaya-alamar
  • ikon-info-alamar
  • icon-screenshot
  • icon-cire-da'irar
  • icon-ok-da'irar
  • ikon-ban-da'ira
  • icon-kibiya-hagu
  • icon-kibiya-dama
  • icon-kibiya-up
  • icon-kibiya-saukar
  • ikon-share-alt
  • ikon-girman-cikakke
  • icon-girman girman-kanana
  • ikon-plus
  • ikon-minus
  • ikon - alama
  • icon-exclamation-alamar
  • icon - kyauta
  • ikon-leaf
  • ikon-wuta
  • icon-ido-bude
  • icon-ido-kusa
  • icon-gargadi-alamar
  • ikon jirgin sama
  • ikon - kalanda
  • ikon - bazuwar
  • ikon yin sharhi
  • ikon Magnet
  • ikon-chevron-up
  • ikon-chevron-down
  • ikon-retweet
  • icon-cart
  • icon-folder-kusa
  • icon-folder-bude
  • icon-girma-tsaye
  • icon-girman girman-horizontal

Gina a matsayin sprite

Maimakon yin kowane gunki ƙarin buƙatu, mun tattara su cikin sprite — tarin hotuna a cikin fayil ɗaya wanda ke amfani da CSS don sanya hotuna tare da background-position. Wannan hanya ɗaya ce da muke amfani da ita akan Twitter.com kuma ta yi mana aiki da kyau.

Duk azuzuwan gumaka an riga an sanya su da su .icon-don daidaita sunaye masu dacewa da ƙwanƙwasa, kamar sauran abubuwan haɗinmu. Wannan zai taimaka kauce wa rikice-rikice tare da wasu kayan aikin.

Glyphicons ya ba mu damar amfani da Halflings da aka saita a cikin buɗaɗɗen kayan aikin kayan aikin mu muddin mun samar da hanyar haɗi da ƙima anan a cikin takaddun. Da fatan za a yi la'akari da yin haka a cikin ayyukanku.

Yadda ake amfani

Bootstrap yana amfani da <i>alamar ga duk gumaka, amma ba su da wani nau'i na shari'a - kawai prefix ɗin da aka raba. Don amfani, sanya lambar mai zuwa kusan ko'ina:

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

Hakanan akwai salo don gumaka masu jujjuya (fararen), waɗanda aka shirya tare da ƙarin aji ɗaya:

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

Akwai azuzuwan 120 da za a zaɓa daga don gumakanku. Kawai ƙara <i>alama tare da azuzuwan da suka dace kuma an saita ku. Kuna iya samun cikakken jeri a sprites.less ko dama anan cikin wannan takarda.

A kula! Lokacin amfani da gefen zaren rubutu, kamar a cikin maɓallai ko mahaɗin mahaɗa, tabbatar da barin sarari bayan <i>alamar don tazarar da ta dace.

Yi amfani da lokuta

Gumaka suna da kyau, amma a ina mutum zai yi amfani da su? Ga 'yan ra'ayoyi:

  • A matsayin abubuwan gani don kewayawa na gefe
  • Don kewayawa mai sarrafa alamar zalla
  • Don maɓalli don taimakawa isar da ma'anar wani aiki
  • Tare da hanyoyin haɗin kai don raba mahallin akan inda mai amfani yake nufi

Mahimmanci, duk inda za ku iya sanya <i>alama, kuna iya sanya gunki.

Misalai

Yi amfani da su a cikin maɓallai, ƙungiyoyin maɓalli don kayan aiki, kewayawa, ko abubuwan da aka riga aka tsara.