Shingiro CSS

Hejuru ya scafolding, ibice byibanze bya HTML byanditse kandi byongerewe imbaraga hamwe nibyiciro byagutse kugirango bitange isura nshya, ihamye kandi yumve.

Imitwe & kopi yumubiri

Igipimo cyimyandikire

Imashini yimyandikire yose ishingiye kubintu bibiri bito bihinduka mubihinduka.nta dosiye: @baseFontSizena @baseLineHeight. Iya mbere ni ishingiro ryimyandikire-nini ikoreshwa mugihe cyose naho icya kabiri ni umurongo-muremure.

Dukoresha izo mpinduka, hamwe nimibare imwe, kugirango dukore marge, padi, hamwe numurongo-muremure wubwoko bwacu nibindi byinshi.

Urugero inyandiko yumubiri

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur comiculus mus. Nullam id dolor id nibh ultricies ibinyabiziga.

Kiyobora umubiri

Kora igika kigaragara wongeyeho .lead.

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

h1. Umutwe 1

h2. Umutwe 2

h3. Umutwe 3

h4. Umutwe 4

h5. Umutwe 5
h6. Umutwe 6

Shimangira, aderesi, hamwe nincamake

Ikintu Ikoreshwa Bihitamo
<strong> Kubitsindagira agace k'inyandiko hamwe n'ingenzi Nta na kimwe
<em> Kubitsindagira agace k'inyandiko hamwe na stress Nta na kimwe
<abbr> Gupfunyika amagambo ahinnye n'amagambo ahinnye yerekana verisiyo yagutse kuri hover

Shyiramo titleibiranga guhitamo kubwinyandiko yagutse

Koresha .initialismibyiciro bigufi.
<address> Kumakuru yamakuru kubakurambere bayo hafi cyangwa umubiri wose wakazi Bika imiterere urangiza imirongo yose hamwe<br>

Ukoresheje gushimangira

Fusce dapibus , tellus ac cursus commodo , iyicarubozo mauris condimentum nibh , ut fermentum massa justo icara amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.

Icyitonderwa: Wumve neza ko ukoresha <b>no <i>muri HTML5, ariko imikoreshereze yabo yarahindutse gato. <b>igamije kwerekana amagambo cyangwa interuro uterekanye akamaro kiyongereye mugihe <i>ahanini ari ijwi, amagambo ya tekiniki, nibindi.

Urugero rwa aderesi

Dore ingero ebyiri z'uburyo <address>tagi ishobora gukoreshwa:

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

Urugero mu magambo ahinnye

Amagambo ahinnye afite titleikiranga afite urumuri rudomo ruri munsi yumupaka hamwe nubufasha indanga kuri hover. Ibi biha abakoresha ibimenyetso byerekana ikintu kizerekanwa kuri hover.

Ongeraho initialismicyiciro mu magambo ahinnye kugirango wongere ubwanditsi bwimyandikire ubiha ubunini buke bwinyandiko.

HTML nikintu cyiza kuva gukata imigati.

Amagambo ahinnye yijambo ikiranga ni attr .

Inzitizi

Ikintu Ikoreshwa Bihitamo
<blockquote> Hagarika urwego urwego rwo gusubiramo ibivuye ahandi

Ongeraho citeibiranga inkomoko URL

Koresha .pull-leftn'amasomo .pull-rightkumahitamo areremba
<small> Ikintu kidahitamo cyo kongeramo umukoresha-ureba, mubisanzwe umwanditsi ufite umutwe wakazi Shyira <cite>hafi yumutwe cyangwa izina ryinkomoko

Kugirango ushiremo blocote, <blockquote>uzenguruke HTML iyo ari yo yose . Kubisobanuro bitomoye turasaba a <p>.

Shyiramo ikintu kidahinduka <small>kugirango utange inkomoko yawe hanyuma uzabona em dash &mdash;mbere yacyo kugirango ikoreshwe.

  1. <blockquote>
  2. <p> Lorem ipsum dolor icara amet, consectetur adipiscing elit. Integer posuere erat ante venenatis. </p>
  3. <small> Umuntu uzwi </small>
  4. </blockquote>

Urugero rwo guhagarika

Ibisanzwe byahagaritswe byanditse nkibi:

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

Umuntu uzwi mumubiri wakazi

Kureremba blokquote yawe iburyo, ongeraho class="pull-right":

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

Umuntu uzwi mumubiri wakazi

Urutonde

Urutonde

<ul>

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

Unstyled

<ul class="unstyled">

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

Rutegetse

<ol>

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

Ibisobanuro

<dl>

Urutonde rwibisobanuro
Urutonde rwibisobanuro rwiza rwo gusobanura amagambo.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida kuri eget metus.
Malesuada porta
Etiam porta sem maleuada magna mollis euismod.

Ibisobanuro bitambitse

<dl class="dl-horizontal">

Urutonde rwibisobanuro
Urutonde rwibisobanuro rwiza rwo gusobanura amagambo.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida kuri eget metus.
Malesuada porta
Etiam porta sem maleuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, iyicarubozo mauris condimentum nibh, ut fermentum massa justo icara amet risus.

Umutwe! Urutonde rwibisobanuro bitambitse bizagabanya amagambo maremare cyane kugirango ahuze ibumoso bwiburyo text-overflow. Mubyerekezo bigufi, bizahinduka muburyo busanzwe buteganijwe.

Umurongo

Kuzuza ibice bya kode hamwe <code>.

  1. Kurugero , <code> igice < / code > igomba gupfunyika nkumurongo .

Inzitizi y'ibanze

Koresha <pre>imirongo myinshi ya code. Witondere guhunga inguni iyo ari yo yose muri kode kugirango itangwe neza.

<p> Icyitegererezo hano ... </p>
  1. <pre>
  2. & lt; p & gt; Inyandiko y'icyitegererezo hano ... & lt; / p & gt;
  3. </pre>

Icyitonderwa: Witondere kubika code muri <pre>tagi hafi ibumoso bushoboka; Bizatanga ibisobanuro byose.

Urashobora guhitamo kongeramo urwego .pre-scrollableruzashyiraho max-uburebure bwa 350px hanyuma utange y-axis umuzingo.

Google Yerekana neza

Fata ikintu kimwe <pre>hanyuma wongereho ibyiciro bibiri bidahwitse kugirango uzamure neza.

  1. <p> Icyitegererezo hano ... </p>
  1. <pre class = "prettyprint
  2. imyenda "
  3. & lt; p & gt; Inyandiko y'icyitegererezo hano ... & lt; / p & gt;
  4. </pre>

Kuramo google-code- yerekana neza hanyuma urebe ibisobanuro byuburyo bwo gukoresha.

Ikimenyetso

Tag Ibisobanuro
<table> Gupfunyika ibintu byo kwerekana amakuru muburyo bwa mbonerahamwe
<thead> Ibikoresho birimo kumeza umutwe wumurongo ( <tr>) kugirango wandike imbonerahamwe yinkingi
<tbody> Ibikoresho birimo kumeza kumurongo ( <tr>) mumubiri wameza
<tr> Ibikoresho birimo ibice byameza ( <td>cyangwa <th>) bigaragara kumurongo umwe
<td> Akazu gasanzwe
<th> Ameza yihariye ya selile kumurongo (cyangwa umurongo, bitewe nurwego no gushyira) ibirango
bigomba gukoreshwa muri a<thead>
<caption> Ibisobanuro cyangwa incamake y'ibyo imbonerahamwe ifata, cyane cyane ingirakamaro kubasoma ecran
  1. <table>
  2. <umutwe>
  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>

Amahitamo yimbonerahamwe

Izina Icyiciro Ibisobanuro
Mburabuzi Nta na kimwe Nta buryo, gusa inkingi n'imirongo
Shingiro .table Gusa imirongo itambitse hagati yumurongo
Imipaka .table-bordered Kuzenguruka inguni no kongeramo umupaka wo hanze
Zebra-umurongo .table-striped Ongeraho ibara ryijimye ryijimye kumurongo udasanzwe (1, 3, 5, nibindi)
Byegeranye .table-condensed Gabanya vertical padding mo kabiri, kuva 8px kugeza 4px, muri byose tdnibintuth

Imbonerahamwe

1. Imiterere isanzwe yimbonerahamwe

Imbonerahamwe ihita yandikwa nimbibi nkeya kugirango yizere ko isomeka kandi ikomeze imiterere. Hamwe na 2.0, .tableicyiciro kirakenewe.

  1. <imbonerahamwe yimeza = " imbonerahamwe" >
  2. </table>
# Izina Izina ryanyuma Izina ryukoresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Larry Inyoni @twitter

Imbonerahamwe yanditswemo

Shaka akantu gato hamwe nameza yawe wongeyeho zebra-striping - ongeraho .table-stripedishuri.

Icyitonderwa: Imbonerahamwe yanditswemo ikoresha :nth-childCSS itoranya kandi ntabwo iboneka muri IE7-IE8.

  1. <imbonerahamwe yimeza = " imbonerahamwe yimeza" >
  2. </table>
# Izina Izina ryanyuma Izina ryukoresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Larry Inyoni @twitter

3. Imeza ihana imbibi

Ongeraho imipaka ikikije ameza yose hamwe nu mpande zegeranye kugirango ubone ibyiza.

  1. <imbonerahamwe yimeza = " imbonerahamwe yimbonerahamwe" >
  2. </table>
# Izina Izina ryanyuma Izina ryukoresha
1 Ikimenyetso Otto @mdo
Ikimenyetso Otto @ibikoresho
2 Yakobo Thornton @fat
3 Inyoni @twitter

4. Imbonerahamwe yegeranye

Kora ameza yawe arusheho kongeramo urwego .table-condensedrwo guca kumeza ya selile ya kabiri (kuva 8px kugeza 4px).

  1. <imbonerahamwe yimeza = " imbonerahamwe yimeza" >
  2. </table>
# Izina Izina ryanyuma Izina ryukoresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @twitter

5. Huza bose!

Wumve neza ko uhuza icyiciro icyo aricyo cyose cyameza kugirango ugere kubintu bitandukanye ukoresheje amasomo aboneka.

  1. <imbonerahamwe yimeza = " imbonerahamwe yimeza-yameza-imbonerahamwe ihujwe nimbonerahamwe" >
  2. ...
  3. </table>
Izina ryuzuye
# Izina Izina ryanyuma Izina ryukoresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @twitter

Ihinduka rya HTML na CSS

Igice cyiza kijyanye na forme muri Bootstrap nuko ibyo winjiza byose hamwe nubugenzuzi bisa neza nubwo waba ubyubaka gute. Nta HTML irenze urugero isabwa, ariko turatanga icyitegererezo kubabikeneye.

Imiterere igoye cyane izana ibyiciro byoroheje kandi byapimwe kuburyo bworoshye bwo gutunganya no guhuza ibyabaye, bityo urapfundikirwa kuri buri ntambwe.

Imiterere ine irimo

Bootstrap izana inkunga yubwoko bune bwimiterere:

  • Uhagaritse (isanzwe)
  • Shakisha
  • Umurongo
  • Uhagaritse

Ubwoko butandukanye bwimiterere isaba impinduka kugirango ushireho ikimenyetso, ariko igenzura ubwaryo rigumaho kandi ryitwara kimwe.

Kugenzura leta nibindi byinshi

Ifishi ya Bootstrap ikubiyemo imiterere yuburyo bwose bwibanze bugenzura nko kwinjiza, textarea, no guhitamo wakwitega. Ariko kandi izanye numubare wibikoresho byihariye byongeweho kandi byateguwe mbere yinyongera hamwe ninkunga ya lisiti yisanduku.

Ibihugu nkikosa, kuburira, nubutsinzi birimo kuri buri bwoko bwubugenzuzi. Harimo kandi nuburyo bwo kugenzura abamugaye.

Ubwoko bune

Bootstrap itanga ibimenyetso byoroshye hamwe nuburyo bune bwuburyo rusange bwurubuga.

Izina Icyiciro Ibisobanuro
Uhagaritse (isanzwe) .form-vertical (ntibisabwa) Bishyizwe hamwe, ibumoso-buhujwe n'ibirango hejuru yubugenzuzi
Umurongo .form-inline Ibumoso-buhujwe na label na inline-blok igenzura kuburyo bworoshye
Shakisha .form-search Inyandiko-yuzuye yinyandiko yinjiza kubushakashatsi busanzwe bwiza
Uhagaritse .form-horizontal Kureremba ibumoso, iburyo-buhujwe n'ibirango kumurongo umwe nkigenzura

Ifishi yintangarugero ukoresheje ifishi yubugenzuzi gusa, nta kimenyetso cyiyongereye

Ifishi y'ibanze

Ubwenge kandi bworoshye busanzwe nta marike yongeyeho.

Urugero rwo guhagarika urwego urwego rufasha inyandiko hano.

  1. <form class = "neza" >
  2. <label> Izina ryikirango </label>
  3. <iyinjiza ubwoko = "inyandiko" urwego = "span3" umwanya = "Andika ikintu…" >
  4. <span class = "ubufasha-guhagarika" > Urugero rwo guhagarika urwego urwego rufasha inyandiko hano. </span>
  5. <label class = "agasanduku k'isanduku" >
  6. <iyinjiza ubwoko = "agasanduku" > Reba hanze
  7. </label>
  8. <buto ubwoko = "gutanga" urwego = "btn" > Tanga </button>
  9. </form>

Ifishi yo gushakisha

Ongeraho .form-searchkumpapuro no .search-querykuri input.

  1. <form class = "neza ​​form-shakisha" >
  2. <iyinjiza ubwoko = "inyandiko" urwego = "icyinjijwe-gishakisha-ikibazo" >
  3. <buto ubwoko = "gutanga" urwego = "btn" > Shakisha </button>
  4. </form>

Ifishi y'umurongo

Ongeraho .form-inlinekuri finesse guhuza vertical hamwe nintera yuburyo bugenzura.

  1. <form class = "neza ​​form-inline" >
  2. <iyinjiza ubwoko = "inyandiko" urwego = "icyinjijwe-gito" umwanya = "Imeri" >
  3. <iyinjiza ubwoko = "ijambo ryibanga" urwego = "icyinjijwe-gito" umwanya = "Ijambobanga" >
  4. <label class = "agasanduku k'isanduku" >
  5. <iyinjiza ubwoko = "agasanduku k'isanduku" > Unyibuke
  6. </label>
  7. <buto ubwoko = "gutanga" urwego = "btn" > Injira </button>
  8. </form>

Imiterere itambitse

Yerekanwa iburyo nuburyo busanzwe bwo kugenzura dushyigikiye. Dore urutonde rwamasasu:

  • inyandiko zanditse (inyandiko, ijambo ryibanga, imeri, nibindi)
  • agasanduku
  • radiyo
  • hitamo
  • hitamo byinshi
  • dosiye
  • textarea

Usibye inyandiko yubuntu, HTML5 iyariyo yose yinjiza igaragara nkiyi.

Urugero

Urebye urugero rwimiterere yavuzwe haruguru, dore akamenyetso kajyanye no kwinjiza no kugenzura itsinda rya mbere. ,,, .control-groupNibyiciro .control-labelbyose .controlsbirakenewe muburyo bwo gutunganya.

  1. <form class = "form-horizontal" >
  2. <ikibanza>
  3. <legend> Inyandiko y'imigani </legend>
  4. <div class = "kugenzura-itsinda" >
  5. <label class = "kugenzura-label" ya = "kwinjiza01" > Inyandiko yanditswe </label>
  6. <div class = "igenzura" >
  7. <iyinjiza ubwoko = "inyandiko" urwego = "icyinjijwe-xlarge" id = "icyinjijwe01" >
  8. <p urwego = "ubufasha-guhagarika" > Gushyigikira inyandiko ifasha </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Kugenzura imiterere

Bootstrap iranga uburyo bwa mushakisha ushyigikiwe na disabledleta. Twakuyeho Webkit isanzwe outlinehanyuma dushyire a box-shadowmumwanya wabyo :focus.


Kwemeza ifishi

Harimo kandi uburyo bwo kwemeza amakosa, kuburira, no gutsinda. Gukoresha, ongeramo amakosa yibyiciro bikikije .control-group.

  1. <Umwanya
  2. icyiciro = "kugenzura-itsinda ryamakosa" >
  3. </fieldset>
Agaciro kamwe hano
Ikintu gishobora kuba kitaragenze neza
Nyamuneka kosora ikosa
Woohoo!
Woohoo!

Kwagura ifishi igenzura

Tegura & ongeraho inyongeramusaruro

Amatsinda yinjiza - hamwe ninyandiko yongeweho cyangwa yateguwe - itanga inzira yoroshye yo gutanga ibisobanuro byinshi kubyo winjije. Ingero zikomeye zirimo @ ikimenyetso cyamazina ya Twitter cyangwa $ kumafaranga.


Agasanduku na radiyo

Kugera kuri v1.4, Bootstrap isaba marike yinyongera hafi yisanduku na radio kugirango ubishyire hamwe. Noneho, nikintu cyoroshye cyo gusubiramo <label class="checkbox">ipfunyika i <input type="checkbox">.

Kugenzura agasanduku na radiyo nabyo birashyigikiwe. Gusa ongeraho icyaricyo .inlinecyose .checkboxcyangwa .radiourangije.


Shira kumurongo hanyuma wongere / witegure

Kugira ngo ukoreshe prepend cyangwa wongereho inyongeramusaruro muburyo bwa inline, menya neza ko ushira i .add-onno inputkumurongo umwe, nta mwanya.


Shiraho inyandiko ifasha

Kugirango wongere inyandiko ifasha kumpapuro zinjiza, shyiramo umurongo ufasha inyandiko hamwe <span class="help-inline">cyangwa inyandiko ifasha guhagarika hamwe <p class="help-block">nyuma yibintu byinjijwe.

Koresha .span*ibyiciro bimwe uhereye kuri gride sisitemu yo kwinjiza ingano.

Urashobora kandi gukoresha ibyiciro bihamye bidashushanya kuri gride, guhuza nuburyo bwa CSS bwitabira, cyangwa konte yubwoko butandukanye bwo kugenzura (urugero, inputumurongo select).

@

Hano hari inyandiko zifasha

.00
Hano hari izindi nyandiko zifasha
$ .00

Icyitonderwa: Ibirango bizengurutse amahitamo yose manini manini yo gukanda hamwe nuburyo bukoreshwa.

Button icyiciro = "" Ibisobanuro
btn Akabuto gasanzwe keza hamwe na gradient
btn btn-primary Itanga uburemere bwinyongera bugaragara kandi ikagaragaza ibikorwa byibanze murwego rwa buto
btn btn-info Byakoreshejwe nkibisubizo byuburyo busanzwe
btn btn-success Yerekana igikorwa cyatsinze cyangwa cyiza
btn btn-warning Irerekana ubwitonzi bugomba gufatwa niki gikorwa
btn btn-danger Yerekana ibikorwa biteje akaga cyangwa bishobora kuba bibi
btn btn-inverse Ubundi umwijima wijimye wijimye, ntabwo uhujwe nigikorwa cyo gusobanura cyangwa gukoresha

Utubuto kubikorwa

Nkibisanzwe, buto igomba gukoreshwa gusa mubikorwa mugihe hyperlinks igomba gukoreshwa kubintu. Kurugero, "Gukuramo" bigomba kuba buto mugihe "ibikorwa bya vuba" bigomba kuba umurongo.

Imisusire ya buto irashobora gukoreshwa kubintu byose hamwe .btnnishuri ryakoreshejwe. Ariko, mubisanzwe uzashaka kubishyira mubikorwa gusa <a>nibintu <button>.

Guhuza amashakiro

IE9 ntisarura inyuma ya gradients kumpande zegeranye, nuko turayikuraho. Bifitanye isano, IE9 ihindura buttonibintu byamugaye, ihindura inyandiko imvi hamwe ninyandiko mbi-igicucu tudashobora gukosora.

Ingano nyinshi

Ibyiza binini cyangwa bito? Ongeraho .btn-large, .btn-smallcyangwa .btn-minikubindi bibiri byiyongereye.


Leta yamugaye

Kubuto bwahagaritswe, ongeraho urwego .disabledkumihuza disablednibiranga <button>ibintu.

Ihuza ryibanze Ihuza

Umutwe! Dukoresha .disablednkibyiciro byingirakamaro hano, bisa nicyiciro rusange .active, ntabwo rero prefix isabwa.

Icyiciro kimwe, ibirango byinshi

Koresha .btnicyiciro kuri an <a>, <button>cyangwa <input>element.

Ihuza
  1. <a class = "btn" href = ""> Ihuza </a> _
  2. <buto icyiciro = "btn" ubwoko = "gutanga" >
  3. Button
  4. </button>
  5. <ibyiciro byinjiza = "btn" ubwoko = " buto"
  6. agaciro = "Iyinjiza" >
  7. <ibyiciro byinjiza = "btn" ubwoko = " gutanga"
  8. agaciro = "Tanga" >

Nkumwitozo mwiza, gerageza guhuza ibice kugirango ubone imiterere kugirango urebe guhuza kwambukiranya amashusho. Niba ufite an input, koresha an <input type="submit">kuri buto yawe.

  • agashusho-ikirahure
  • agashusho-umuziki
  • agashusho
  • igishushanyo-ibahasha
  • agashusho-umutima
  • Agashusho-inyenyeri
  • Agashusho-inyenyeri-ubusa
  • Agashusho-Umukoresha
  • Agashusho
  • igishushanyo-kinini
  • igishushanyo-th
  • Agashusho-Urutonde
  • agashusho-ok
  • agashusho-gukuramo
  • agashusho-zoom-in
  • agashusho-gukuramo
  • agashusho
  • Agashusho
  • Agashusho-cog
  • agashusho-imyanda
  • agashusho-murugo
  • Agashusho-Idosiye
  • Agashusho-Igihe
  • Agashusho-Umuhanda
  • agashusho-gukuramo-alt
  • agashusho
  • agashusho
  • Agasanduku-inbox
  • agashusho-gukina-uruziga
  • agashusho-subiramo
  • agashusho-kugarura
  • agashusho-urutonde-alt
  • agashusho-gufunga
  • agashusho-ibendera
  • agashusho-na terefone
  • Agashusho-inomero
  • agashusho-ingano-hasi
  • agashusho-hejuru-hejuru
  • agashusho-qrcode
  • Agashusho-barcode
  • Agashusho
  • Agashushondanga
  • agashusho-igitabo
  • Agashusho
  • Agashusho
  • agashusho-kamera
  • Agashusho-Imyandikire
  • Agashushondanga
  • Agashushondanga
  • agashusho-inyandiko-uburebure
  • agashusho-inyandiko-ubugari
  • agashusho-guhuza-ibumoso
  • agashusho-guhuza-hagati
  • agashusho-guhuza-iburyo
  • agashusho-guhuza-gutsindishiriza
  • Agashusho-Urutonde
  • agashusho-indent-ibumoso
  • agashusho-indent-iburyo
  • agashusho-isura-videwo
  • agashusho
  • Ikaramu-Ikaramu
  • Agashusho-Ikarita-Ikimenyetso
  • agashusho
  • Agashusho
  • Agashusho
  • agashusho-kugabana
  • agashusho
  • Agashusho
  • agashusho-intambwe-inyuma
  • agashusho-byihuse-inyuma
  • agashusho-inyuma
  • agashusho-gukina
  • Agashusho-Kuruhuka
  • agashusho
  • Agashusho-Imbere
  • Agashusho-byihuse-imbere
  • Agashusho-Intambwe-Imbere
  • agashusho
  • agashusho-chevron-ibumoso
  • agashusho-chevron-iburyo
  • agashusho-kongeramo-ikimenyetso
  • agashusho-gukuramo-ikimenyetso
  • agashusho-gukuramo-ikimenyetso
  • agashusho-ok-ikimenyetso
  • agashusho-ikibazo-ikimenyetso
  • agashusho-amakuru-ikimenyetso
  • Agashusho-Ishusho
  • agashusho-gukuramo-uruziga
  • agashusho-ok-uruziga
  • Agashusho-ban-uruziga
  • agashusho-umwambi-ibumoso
  • agashusho-umwambi-iburyo
  • agashusho-umwambi-hejuru
  • Agashusho-Umwambi-Hasi
  • agashusho-gusangira-alt
  • igishushanyo-cyuzuye-cyuzuye
  • agashusho-guhindura-nto
  • agashusho
  • agashusho-gukuramo
  • agashusho-inyenyeri
  • agashusho-gutangaza-ikimenyetso
  • Agashusho-Impano
  • agashusho
  • Agashusho-umuriro
  • agashusho-amaso
  • agashusho-ijisho-hafi
  • agashusho-kuburira-ikimenyetso
  • agashusho-indege
  • Agashusho
  • Agashushondanga
  • agashusho-igitekerezo
  • agashusho
  • agashusho-chevron-up
  • agashusho-chevron-hasi
  • agashusho-gusubiramo
  • agashusho-kugura-igare
  • Agashusho-Ububiko-Gufunga
  • Agashusho-Ububiko
  • agashusho-guhindura-guhagarikwa
  • agashusho-guhindura-gutambitse
  • agashusho-hdd
  • Agashusho
  • agashusho-inzogera
  • Agashusho-Icyemezo
  • agashusho-igikumwe-hejuru
  • agashusho-igikumwe-hasi
  • agashusho-ukuboko-iburyo
  • agashusho-ukuboko-ibumoso
  • agashusho-ukuboko
  • agashusho-ukuboko-hasi
  • Agashusho-Uruziga-Umwambi-iburyo
  • Agashusho-Uruziga-Umwambi-Ibumoso
  • Agashusho-Uruziga-Umwambi-hejuru
  • Agashusho-Uruziga-Umwambi-Hasi
  • agashusho-isi
  • Agashushondanga
  • agashusho-imirimo
  • Agashushondanga
  • agashusho-agasakoshi
  • igishushanyo-cyuzuye

Yubatswe nka spite

Aho kugirango buri gishushanyo kibe icyifuzo cyinyongera, twakusanyije muri sprite - agashusho k'amashusho muri dosiye imwe ikoresha CSS kugirango ushireho amashusho hamwe background-position. Ubu ni bwo buryo bumwe dukoresha kuri Twitter.com kandi bwadukoreye neza.

Udushushondanga twose ibyiciro byashyizwe hamwe hamwe nizina .icon-ryiza hamwe na scoping, nkibindi bice byacu. Ibi bizafasha kwirinda amakimbirane nibindi bikoresho.

Glyphicons yaduhaye gukoresha Halflings yashyizwe mubikoresho byacu bifungura isoko mugihe cyose dutanze umurongo ninguzanyo hano muri doc. Nyamuneka tekereza gukora kimwe mumishinga yawe.

Uburyo bwo gukoresha

Bootstrap ikoresha <i>tagi kumashusho yose, ariko ntabwo bafite urwego rwimanza-gusa rusangiwe. Gukoresha, shyira kode ikurikira hafi aho ariho hose:

  1. <i urwego = "igishushanyo-shakisha" > </i>

Hariho kandi uburyo buboneka kumashusho ahindagurika (yera), yakozwe hamwe nicyiciro kimwe cyinyongera:

  1. <i urwego = "igishushanyo-shakisha igishushanyo-cyera" > </i>

Hano hari ibyiciro 140 byo guhitamo kumashusho yawe. Gusa ongeraho <i>tagi hamwe namasomo akwiye kandi washyizweho. Urashobora kubona urutonde rwuzuye muri sprites.nta cyangwa hano hano muriyi nyandiko.

Umutwe! Mugihe ukoresheje kuruhande rwimirongo yinyandiko, nko muri buto cyangwa guhuza imiyoboro, menya neza ko usiga umwanya nyuma <i>yikimenyetso kugirango ubone umwanya ukwiye.

Koresha imanza

Udushushondanga nibyiza, ariko umuntu yakoresha he? Dore ibitekerezo bike:

  • Nka mashusho yo kuruhande rwawe
  • Kubishushanyo gusa
  • Kuri buto kugirango ifashe kwerekana ibisobanuro byigikorwa
  • Hamwe nu murongo wo gusangira imiterere aho umukoresha yerekeza

Byibanze, ahantu hose ushobora gushyira <i>tagi, urashobora gushira agashusho.

Ingero

Koresha muri buto, buto ya matsinda kubikoresho byabigenewe, kugendagenda, cyangwa ifishi yateguwe.