Isisekelo se-CSS

Ngaphezulu kwesikafula, izakhi ze-HTML eziyisisekelo zenziwe isitayela futhi zithuthukiswe ngamakilasi andayo ukuze kuhlinzekwe ukubukeka okusha, okungaguquki kanye nomuzwa.

Izihloko & ikhophi yomzimba

Isikali se-typographic

Yonke igridi yokubhala isekelwe ezintweni ezimbili Eziguquguqukayo Ezincane efayeleni lethu eliguquguqukayo.elingaphansi: @baseFontSizekanye @baseLineHeight. Esokuqala siwusayizi wefonti eyisisekelo osetshenziswa kuyo yonke indawo kanti eyesibili ubude bomugqa oyisisekelo.

Sisebenzisa lezo ziguquguqukayo, kanye nezibalo ezithile, ukuze sakhe amamajini, ama-paddings, nobude bomugqa balo lonke uhlobo lwethu nokunye.

Isibonelo sombhalo womzimba

I-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.

Ikhophi yomzimba oholayo

Yenza isigaba sigqame ngokungeza .lead.

I-Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. I-Duis mollis, ayiyona i-commodo luctus.

h1. Isihloko 1

h2. Isihloko 2

h3. Isihloko 3

h4. Isihloko 4

h5. Isihloko 5
h6. Isihloko 6

Ukugcizelela, ikheli, nesifinyezo

Isici Ukusetshenziswa Ongakukhetha
<strong> Ukuze ugcizelele amazwibela ombhalo abalulekile Lutho
<em> Ukuze ugcizelele amazwibela ombhalo onengcindezi Lutho
<abbr> Igoqa izifinyezo nama-akhronimi ukuze ibonise inguqulo enwetshiwe kukuhambisa phezulu

Faka phakathi isibaluli ozikhethela titlesona sombhalo onwetshiwe

Sebenzisa .initialismikilasi ngezifinyezo zofeleba abakhulu.
<address> Ukuze uthole imininingwane yokuxhumana nedlozi layo eliseduze noma wonke umsebenzi Londoloza ukufometha ngokuqeda yonke imigqa nge<br>

Ukusebenzisa ukugcizelela

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. I-Maecenas faucibus mollis interdum. I-Nulla vitae elit libero, i-pharetra augue.

Qaphela: Zizwe ukhululekile ukusebenzisa <b>futhi <i>ku-HTML5, kodwa ukusetshenziswa kwayo kushintshile kancane. <b>ihloselwe ukugqamisa amagama noma imishwana ngaphandle kokudlulisa ukubaluleka okwengeziwe kuyilapho <i>ngokuvamile kungokwezwi, amagama obuchwepheshe, njll.

Amakheli ayisibonelo

Nazi izibonelo ezimbili zokuthi <address>ithegi ingasetshenziswa:

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

Izifinyezo eziyisibonelo

Izifinyezo ezinesibaluli titlezinomngcele ongezansi onamachashazi akhanyayo kanye nekhesa yosizo ekuhambiseni phezulu. Lokhu kunikeza abasebenzisi inkomba eyengeziwe yokuthi kukhona okuzoboniswa phezulu.

Engeza initialismikilasi kusifinyezo ukuze ukwandise ukuvumelana kwe-typographic ngokusinika usayizi wombhalo omncane kancane.

I- HTML iyinto engcono kakhulu kusukela kusinkwa esisikiwe.

Isifinyezo segama lesichasiso sithi attr .

Izingcaphuno zokuvimba

Isici Ukusetshenziswa Ongakukhetha
<blockquote> Isici sezinga lokuvimba lokucaphuna okuqukethwe komunye umthombo

Engeza citeisibaluli se-URL yomthombo

Sebenzisa .pull-leftnamakilasi .pull-rightezinketho ezintantayo
<small> Isici esikhethwayo sokwengeza ingcaphuno ebheke umsebenzisi, ngokuvamile umbhali onesihloko somsebenzi Beka igama <cite>eduze kwesihloko noma igama lomthombo

Ukuze ufake i-blockquote, vala <blockquote>noma iyiphi i- HTML njengengcaphuno. Ukuze uthole izingcaphuno eziqondile sincoma a <p>.

Faka <small>into oyikhethayo ukuze ucaphune umthombo wakho futhi uzothola ideshi ye-em &mdash;ngaphambi kwayo ngezinjongo zokwenza isitayela.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere erat ante venenatis. </p>
  3. <encane> Umuntu odumile </small>
  4. </blockquote>

Izibonelo zama-blockquotes

Ama-blockquotes azenzakalelayo abhalwe kanje:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere erat ante venenatis.

Umuntu odumile eMzimbeni womsebenzi

Ukuze untante i-blockquote yakho kwesokudla, engeza class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere erat ante venenatis.

Umuntu odumile eMzimbeni womsebenzi

Uhlu

Aku-odwe

<ul>

  • Lorem ipsum dolor sit amet
  • I-Consectetur adipiscing elit
  • Integer molestie lorem kanye ne-massa
  • I-Facilisis ku-pretium nisl aliquet
  • I-Nulla volutpat aliquam velit
    • I-Phasellus iaculis neque
    • I-Purus sodales ultricies
    • I-Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • I-Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Thola i-porttitor lorem

Okungabhalwanga isitayela

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • I-Consectetur adipiscing elit
  • Integer molestie lorem kanye ne-massa
  • I-Facilisis ku-pretium nisl aliquet
  • I-Nulla volutpat aliquam velit
    • I-Phasellus iaculis neque
    • I-Purus sodales ultricies
    • I-Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • I-Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Thola i-porttitor lorem

I-oda

<ol>

  1. Lorem ipsum dolor sit amet
  2. I-Consectetur adipiscing elit
  3. Integer molestie lorem kanye ne-massa
  4. I-Facilisis ku-pretium nisl aliquet
  5. I-Nulla volutpat aliquam velit
  6. I-Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Thola i-porttitor lorem

Incazelo

<dl>

Uhlu lwezincazelo
Uhlu lwezincazelo luphelele ekuchazeni amagama.
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
I-Etiam porta sem malesuada magna mollis euismod.

Incazelo evundlile

<dl class="dl-horizontal">

Uhlu lwezincazelo
Uhlu lwezincazelo luphelele ekuchazeni amagama.
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
I-Etiam porta sem malesuada magna mollis euismod.
U-Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Amakhanda phezulu! Uhlu lwezincazelo ezivundlile luzonciphisa amagama amade kakhulu ukuthi angangena ekulungisweni kwekholomu yesobunxele text-overflow. Ezingobeni zokubuka ezinciphile, zizoshintshela kusakhiwo esistakiwe esizenzakalelayo.

Emugqeni

Goqa amazwibela ekhodi nge- <code>.

  1. Isibonelo , <ikhodi> isigaba < / code > kufanele isongwe njengokusemgqeni .

Ibhulokhi eyisisekelo

Sebenzisa <pre>emigqeni eminingi yekhodi. Qiniseka ukuthi ubalekela noma yibaphi abakaki be-engeli kukhodi ukuze unikezwe ngendlela efanele.

<p>Isampula yombhalo lapha...</p>
  1. <pre>
  2. <p>Isampula yombhalo lapha...</p>
  3. </pre>

Qaphela: Qiniseka ukuthi ugcina ikhodi phakathi <pre>komaki eduze kwesokunxele ngangokunokwenzeka; izonikeza wonke amathebhu.

Ungakhetha ngokukhetha .pre-scrollableiklasi elizosetha ubude bobude obungu-350px futhi linikeze ibha yokuskrola ye-y-axis.

I-Google Pretify

Thatha i- <pre>elementi efanayo bese wengeza amakilasi amabili ongawakhetha ukuze uthole ukunikezwa okuthuthukisiwe.

  1. <p> Isampula yombhalo lapha... </p>
  1. <pre class = "prettyprint
  2. linenum" >
  3. <p>Isampula yombhalo lapha...</p>
  4. </pre>

Landa i-google-code-prettify futhi ubuke i-readme ukuze uyisebenzise.

Imakhaphu yethebula

Maka Incazelo
<table> Isici sokugoqa sokubonisa idatha ngefomethi yethebula
<thead> Isici sesiqukathi semigqa yesihloko sethebula ( <tr>) ukuze ilebula amakholomu ethebula
<tbody> Isici sesiqukathi semigqa yethebula ( <tr>) emzimbeni wetafula
<tr> Isici sesiqukathi sesethi yamaseli ethebula ( <td>noma <th>) avela kumugqa owodwa
<td> Iseli lethebula elizenzakalelayo
<th> Iseli lethebula elikhethekile lekholomu (noma umugqa, kuye ngobubanzi nokubekwa) amalebula
Kufanele asetshenziswe ngaphakathi kwe-<thead>
<caption> Incazelo noma isifinyezo salokho okuphethwe yithebula, ikakhulukazi ezifundeni zesikrini
  1. <ithebula>
  2. <ikhanda>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </isihloko>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </ithebula>

Izinketho zethebula

Igama Ikilasi Incazelo
Okuzenzakalelayo Lutho Azikho izitayela, amakholomu nemigqa nje
Okuyisisekelo .table Imigqa evundlile kuphela phakathi kwemigqa
Imingcele .table-bordered Ifinyeza amakhona bese yengeza umngcele wangaphandle
Idube-umugqa .table-striped Yengeza umbala ompunga okhanyayo emigqeni eyinqaba (1, 3, 5, njll)
Kufingqiwe .table-condensed Isika amaphedi aqondile phakathi, ukusuka ku-8px kuye ku-4px, phakathi kwakho konke tdkanye thnezici

Amathebula ayisibonelo

1. Izitayela zetafula ezizenzakalelayo

Amathebula enziwa isitayela ngokuzenzakalela anemingcele embalwa kuphela ukuze kuqinisekiswe ukufundeka nokugcina ukwakheka. Ngo-2.0, .tableikilasi liyadingeka.

  1. <table class = "table" >
  2. </ithebula>
# Igama Isibongo Igama lomsebenzisi
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry uNyoni @twitter

2. Itafula elinemigqa

Thola okumnandi ngamatafula akho ngokungeza idube-striping—vele wengeze .table-stripedikilasi.

Qaphela: Amathebula anemigqa asebenzisa isikhethi se- :nth-childCSS futhi awatholakali ku-IE7-IE8.

  1. <table class = "table-striped table" >
  2. </ithebula>
# Igama Isibongo Igama lomsebenzisi
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry uNyoni @twitter

3. Itafula elinemingcele

Engeza imingcele ezungeze ithebula lonke namakhona ayindilinga ngezinjongo zobuhle.

  1. <table class = "table-bordered" >
  2. </ithebula>
# Igama Isibongo Igama lomsebenzisi
1 Maka Otto @mdo
Maka Otto @getbootstrap
2 uJakobe Thornton @amafutha
3 Larry Inyoni @twitter

4. Itafula elijiyile

Yenza amathebula akho ahlangane kakhudlwana ngokwengeza .table-condensedikilasi ukuze usike i-padding yeseli yetafula phakathi (kusuka ku-8px kuya ku-4px).

  1. <table class = "table-condensed table" >
  2. </ithebula>
# Igama Isibongo Igama lomsebenzisi
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry Inyoni @twitter

5. Hlanganisa zonke!

Zizwe ukhululekile ukuhlanganisa noma yimaphi amakilasi ethebula ukuze uzuze ukubukeka okuhlukile ngokusebenzisa noma yimaphi amakilasi atholakalayo.

  1. <table class = "table-striped table-striped table-condensed table-condensed" >
  2. ...
  3. </ithebula>
Igama eligcwele
# Igama Isibongo Igama lomsebenzisi
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry Inyoni @twitter

I-HTML ne-CSS eguquguqukayo

Ingxenye engcono kakhulu mayelana namafomu ku-Bootstrap ukuthi konke okokufaka kwakho nezilawuli zibukeka zizinhle noma ngabe uzakha kanjani kumakhaphu akho. Ayikho i-HTML engadingekile edingekayo, kodwa sinikeza amaphethini kulabo abayidingayo.

Izakhiwo eziyinkimbinkimbi kakhulu ziza namakilasi amafushane futhi anwebekayo ukuze kube lula ukwenza isitayela nokuhlanganisa imicimbi, ngakho uyasindwa kuzo zonke izinyathelo.

Izakhiwo ezine zifakiwe

I-Bootstrap iza nokusekelwa kwezinhlobo ezine zezakhiwo zefomu:

  • Okuqondile (okuzenzakalelayo)
  • Sesha
  • Emugqeni
  • Evundlile

Izinhlobo ezihlukene zezakhiwo zefomu zidinga izinguquko ezithile kumakhaphu, kodwa izilawuli ngokwazo zihlala futhi ziziphatha ngendlela efanayo.

Lawula izifunda nokuningi

Amafomu e-Bootstrap afaka izitayela zazo zonke izilawuli zefomu lesisekelo njengokufaka, indawo yombhalo, nokukhetha ongayilindela. Kodwa futhi iza nenani lezingxenye zangokwezifiso ezifana nokokufaka okunamathiselwe nokulungiselelwe kusengaphambili nokusekelwa kohlu lwamabhokisi okuhlola.

Amazwe afana nephutha, isexwayiso, kanye nempumelelo kufakiwe kuhlobo ngalunye lokulawula ifomu. Kufakwe nezitayela zezilawuli ezikhutshaziwe.

Izinhlobo ezine zamafomu

I-Bootstrap inikeza umaka nezitayela ezilula zezitayela ezine zamafomu ajwayelekile ewebhu.

Igama Ikilasi Incazelo
Okuqondile (okuzenzakalelayo) .form-vertical (akudingekile) Amalebula astakiwe, aqondaniswe kwesokunxele phezu kwezilawuli
Emugqeni .form-inline Ilebula eqondaniswe kwesokunxele kanye nezilawuli zebhulokhi esemgqeni wesitayela esihlangene
Sesha .form-search Okokufaka kombhalo oyindingilizi eyengeziwe wobuhle bokusesha obujwayelekile
Evundlile .form-horizontal Ntanta kwesokunxele, amalebula aqondaniswe kwesokudla emugqeni ofanayo nezilawuli

Amafomu ayisibonelo asebenzisa izilawuli zefomu nje, akukho makhaphu eyengeziwe

Ifomu eliyisisekelo

Okuzenzakalelayo okuhlakaniphile nokungasindi ngaphandle kwemakhaphu eyengeziwe.

Isibonelo sombhalo wosizo wezinga lebhulokhi lapha.

  1. <form class = "kahle" >
  2. <ilebula> Igama lelebula </label>
  3. <input type = "text" class = "span3" isimeli = "Thayipha okuthile..." >
  4. <span class = "help-block" > Umbhalo wosizo weleveli yesibonelo yebhulokhi lapha. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > Ngihlole
  7. </ilebula>
  8. <button type = "submit" class = "btn" > Thumela </inkinobho>
  9. </ifomu>

Sesha ifomu

Engeza .form-searchefomini .search-querynaku- input.

  1. <form class = "well form-search" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > Sesha </inkinobho>
  4. </ifomu>

Ifomu elisemgqeni

Engeza .form-inlineukuze ugcizelele ukuqondanisa okume mpo kanye nesikhala sezilawuli zefomu.

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" isimeli = "I-imeyili" >
  3. <input type = "password" class = "input-small" isimeli = "Iphasiwedi" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > Ngikhumbule
  6. </ilebula>
  7. <button type = "submit" class = "btn" > Ngena ngemvume </inkinobho>
  8. </ifomu>

Amafomu Avundlile

Kuboniswe ngakwesokudla zonke izilawuli zefomu ezizenzakalelayo esizisekelayo. Nalu uhlu olunamachashazi:

  • okokufaka kombhalo (umbhalo, iphasiwedi, i-imeyili, njll)
  • ibhokisi lokuhlola
  • umsakazo
  • khetha
  • ukukhetha okuningi
  • okokufaka kwefayela
  • indawo yombhalo

Ngokungeziwe kumbhalo we-freeform, noma yikuphi okokufaka okusekelwe kumbhalo we-HTML5 kubonakala kunjalo.

Imakhaphu yesibonelo

Uma kunikezwe isibonelo esingenhla sesakhiwo sefomu, nansi umaki ohlotshaniswa neqembu lokuqala lokokufaka nokulawula. I- .control-group, .control-label, kanye .controlsnamakilasi konke kuyadingeka ekwenzeni isitayela.

  1. <form class = "form-horizontal" >
  2. <i-fieldset>
  3. <legend> Umbhalo wenganekwane </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" ye = "input01" > Okokufaka umbhalo </label>
  6. <div class = "controls" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Umbhalo wosizo osekelayo </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </ifomu>

Izifunda zokulawula amafomu

I-Bootstrap ifaka izitayela zokugxila nezimo ezisekelwa isiphequluli disabled. Sisusa i-Webkit ezenzakalelayo outlinebese sifaka u-a box-shadowendaweni yayo ukuze :focus.


Ukuqinisekiswa kwefomu

Kuhlanganisa nezitayela zokuqinisekisa zamaphutha, izexwayiso, nempumelelo. Ukuze usebenzise, ​​engeza isigaba sephutha kokuzungezile .control-group.

  1. <i-fieldset
  2. class = "control-group error" >
  3. </fieldset>
Inani elithile lapha
Kungenzeka ukuthi kukhona okungahambanga kahle
Sicela ulungise iphutha
Woohoo!
Woohoo!

Ukunweba izilawuli zefomu

Hlela futhi wengeze okokufaka

Amaqembu okokufaka—nombhalo onenezelwe noma olungiselelwe ngaphambili—anikeza indlela elula yokunikeza umongo owengeziwe wokufaka kwakho. Izibonelo ezinhle zifaka uphawu lwe-@ lwamagama abasebenzisi e-Twitter noma i-$ yezezimali.


Amabhokisi okuhlola namarediyo

Kuze kufike ku-v1.4, i-Bootstrap idinga umaka owengeziwe eduze kwamabhokisi okuhlola namarediyo ukuze uwabeke. Manje, kuyindaba elula ukuphinda <label class="checkbox">lokho okugoqa ifayela le- <input type="checkbox">.

Amabhokisi okuhlola asemgqeni namarediyo nawo ayasekelwa. Vele wengeze .inlinekunoma yikuphi .checkboxnoma .radiousuqedile.


Amafomu asemgqeni bese uhlanganisa/ulungise kusengaphambili

Ukuze usebenzise okokufaka kwangaphambilini noma kwenezele ngendlela esemgqeni, qiniseka ukuthi ubeka .add-onfuthi inputemgqeni ofanayo, ngaphandle kwezikhala.


Umbhalo wosizo

Ukwengeza umbhalo wosizo wokufakwayo kwefomu lakho, faka umbhalo wosizo ongaphakathi komugqa <span class="help-inline">noma umbhalo wosizo <p class="help-block">ngemva kwento yokufaka.

Sebenzisa .span*amakilasi afanayo kusistimu yegridi ngosayizi wokufaka.

Ungase futhi usebenzise amakilasi amile angenzi imephu kugridi, ajwayelane nezitayela ezisabelayo ze-CSS, noma i-akhawunti yezinhlobo ezahlukene zokulawula (isb., inputvs. select).

@

Nawu umbhalo wosizo

.00
Nawu umbhalo wosizo owengeziwe
$ .00

Qaphela: Amalebula azungeza zonke izinketho zezindawo zokuchofoza ezinkulu kakhulu kanye nefomu elisebenziseka kakhudlwana.

Inkinobho class="" Incazelo
btn Inkinobho evamile empunga ene-gradient
btn btn-primary Ihlinzeka ngesisindo sokubukwa esengeziwe futhi ihlonze isenzo esiyinhloko kusethi yezinkinobho
btn btn-info Isetshenziswa njengenye indlela yezitayela ezizenzakalelayo
btn btn-success Ibonisa isenzo esiyimpumelelo noma esihle
btn btn-warning Ikhombisa ukuthi kufanele kuqashelwe ngalesi senzo
btn btn-danger Ibonisa isenzo esiyingozi noma okungenzeka sibe sibi
btn btn-inverse Enye inkinobho empunga emnyama, engaboshiwe esenzweni se-semantic noma ukusetshenziswa

Izinkinobho zezenzo

Njengomthetho, izinkinobho kufanele zisetshenziselwe izenzo kuphela kuyilapho izixhumanisi zizosetshenziselwa izinto. Isibonelo, "Ukulanda" kufanele kube inkinobho kuyilapho "umsebenzi wakamuva" kufanele ube isixhumanisi.

Izitayela zezinkinobho zingasetshenziswa kunoma yini efakwe .btnekilasini. Kodwa-ke, ngokujwayelekile uzofuna ukusebenzisa lezi kuma <a>- <button>elementi kuphela.

Ukuhambisana kwesiphequluli esiphambanayo

I-IE9 ayinqamuli ama-gradient angemuva emakhoneni ayindilinga, ngakho siyawasusa. Okuhlobene, i-IE9 yenza ama- buttonelementi akhutshaziwe, ihumusha umbhalo ompunga ngesithunzi sombhalo esibi esingeke sikwazi ukusilungisa.

Osayizi abaningi

Uyathanda izinkinobho ezinkulu noma ezincane? Engeza .btn-large, .btn-small, noma .btn-miniosayizi ababili abengeziwe.


Isimo sokukhubazeka

Ukuze uthole izinkinobho ezikhutshaziwe, engeza .disablediklasi kuzixhumanisi kanye disablednesibaluli <button>sezinto.

Isixhumanisi esiyinhloko Isixhumanisi

Amakhanda phezulu! Sisebenzisa .disablednjengesigaba sokusetshenziswa lapha, esifana nesigaba esivamile .active, ngakho-ke asikho isiqalo esidingekayo.

Ikilasi elilodwa, omaka abaningi

Sebenzisa .btnikilasi ku- <a>, <button>, noma i- <input>elementi.

Isixhumanisi
  1. <a class = "btn" href = ""> Isixhumanisi </a> _
  2. <button class = "btn" type = "hambisa" >
  3. Inkinobho
  4. </inkinobho>
  5. <input class = "btn" type = "inkinobho"
  6. value = "Okokufaka" >
  7. <input class = "btn" type = "submit"
  8. value = "Hambisa" >

Njengomkhuba ongcono kakhulu, zama ukufanisa isici sakho somongo ukuze uqinisekise ukunikezwa okufanayo kwesiphequluli. Uma une- input, sebenzisa <input type="submit">inkinobho yakho.

  • icon-glass
  • isithonjana-umculo
  • isithonjana-search
  • icon-envelope
  • icon-inhliziyo
  • inkanyezi yesithonjana
  • isithonjana-inkanyezi-engenalutho
  • isithonjana-umsebenzisi
  • isithonjana-ifilimu
  • icon-th-enkulu
  • isithonjana-th
  • icon-th-list
  • isithonjana-kulungile
  • isithonjana-susa
  • isithonjana-zoom-in
  • isithonjana-zoom-out
  • icon-off
  • isignali yesithonjana
  • icon-cog
  • udoti wesithonjana
  • icon-ekhaya
  • icon-file
  • isikhathi sesithonjana
  • icon-road
  • icon-download-alt
  • icon-download
  • isithonjana-layisha
  • icon-ibhokisi lokungenayo
  • icon-play- circle
  • isithonjana-phinda
  • isithonjana-ukuvuselela
  • icon-list-alt
  • icon-lock
  • ifulegi lesithonjana
  • icon-headphones
  • isithonjana-ivolumu-ivaliwe
  • isithonjana-ivolumu-phansi
  • isithonjana-ivolumu-phezulu
  • isithonjana-qrcode
  • ibhakhodi yesithonjana
  • icon-tag
  • icon-tags
  • icon-book
  • isithonjana-bookmark
  • icon-print
  • ikhamera yesithonjana
  • ifonti yesithonjana
  • isithonjana esigqamile
  • isithonjana-ithalikhi
  • isithonjana-ubude-kombhalo
  • isithonjana-ububanzi-kombhalo
  • isithonjana-qondanisa-kwesokunxele
  • isithonjana-qondanisa-maphakathi
  • isithonjana-qondanisa-kwesokudla
  • isithonjana-qondanisa-lungisa
  • icon-uhlu
  • isithonjana-i-indenti-kwesokunxele
  • isithonjana-i-indenti-kwesokudla
  • icon-facetime-video
  • isithonjana-isithombe
  • icon-ipensela
  • uphawu-imephu-umaka
  • icon-lungisa
  • isithonjana-tint
  • isithonjana-hlela
  • icon-share
  • isithonjana-hlola
  • isithonjana-hambisa
  • isithonjana-isinyathelo-emuva
  • isithonjana-shesha-emuva
  • isithonjana-emuva
  • isithonjana sokudlala
  • isithonjana-ikhefu
  • icon-stop
  • isithonjana-phambili
  • isithonjana-shesha-phambili
  • isithonjana-isinyathelo-phambili
  • khipha isithonjana
  • icon-chevron-kwesokunxele
  • icon-chevron-kwesokudla
  • uphawu-plus-sign
  • uphawu-susa-uphawu
  • uphawu-susa-uphawu
  • uphawu-ok-sign
  • uphawu-umbuzo-uphawu
  • uphawu-ulwazi-uphawu
  • isithonjana-skrini
  • isithonjana-susa-umbuthano
  • isithonjana-ok-umbuthano
  • icon-ban-indilinga
  • isithonjana-umcibisholo-kwesokunxele
  • isithonjana-umcibisholo-kwesokudla
  • isithonjana-umcibisholo-phezulu
  • isithonjana-umcibisholo-phansi
  • icon-share-alt
  • isithonjana-shintsha usayizi-sigcwele
  • isithonjana-resize-small
  • icon-plus
  • isithonjana-susa
  • isithonjana-asterisk
  • uphawu-isibabazo-uphawu
  • isithonjana-isipho
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-vala
  • uphawu-isexwayiso-uphawu
  • icon-plane
  • isithonjana-ikhalenda
  • icon-okungahleliwe
  • icon-amazwana
  • icon-umazibuthe
  • icon-chevron-up
  • icon-chevron-down
  • isithonjana-retweet
  • icon-shopping-cart
  • ifolda-isithonjana-vala
  • ifolda-isithonjana-ivuliwe
  • isithonjana-shintsha usayizi-okuqondile
  • isithonjana-shintsha usayizi-ovundlile
  • isithonjana-hdd
  • icon-bullhorn
  • icon-bell
  • isitifiketi-isithonjana
  • isithonjana-izithupha
  • isithonjana-izithupha-phansi
  • isithonjana-sesandleni-kwesokudla
  • isithonjana-isandla-kwesokunxele
  • isithonjana-isandla phezulu
  • icon-hand-down
  • isithonjana-indilinga-umcibisholo-kwesokudla
  • isithonjana-indilinga-umcibisholo-kwesokunxele
  • uphawu-umcibisholo-umcibisholo-up
  • isithonjana-umcibisholo-umcibisholo-phansi
  • icon-globe
  • icon-wrench
  • icon-imisebenzi
  • isihlungi sesithonjana
  • icon-briefcase
  • isithonjana-isikrini esigcwele

Yakhiwe njenge-sprite

Esikhundleni sokwenza zonke izithonjana zibe isicelo esengeziwe, sizihlanganisele ku-sprite—inqwaba yezithombe efayeleni elilodwa elisebenzisa i-CSS ukubeka izithombe nge- background-position. Lena yindlela efanayo esiyisebenzisa ku-Twitter.com futhi isisebenzele kahle.

Wonke amakilasi ezithonjana aqanjwe ngawo .icon-ukuze uthole indawo efanele yamagama kanye nesikophu, njengezinye izinto zethu. Lokhu kuzosiza ukugwema izingxabano namanye amathuluzi.

I-Glyphicons isivumele ukuthi sisebenzise ama-Halflings asethwe kukhithi yethu yamathuluzi yomthombo ovulekile inqobo nje uma sinikeza isixhumanisi nekhredithi lapha kumadokhumenti. Sicela ucabange ukwenza okufanayo kumaphrojekthi akho.

Isetshenziswa kanjani

I-Bootstrap isebenzisa <i>ithegi yazo zonke izithonjana, kodwa ayinaso isigaba se-case—kuphela isiqalo esabiwe. Ukuze usebenzise, ​​beka ikhodi elandelayo cishe noma yikuphi:

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

Kukhona nezitayela ezitholakalayo zezithonjana (ezimhlophe), ezenziwe zalungiswa ngesigaba esisodwa esengeziwe:

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

Kunamakilasi angu-140 ongakhetha kuwo ezithonjana zakho. Vele ungeze <i>umaki onamakilasi alungile futhi usulungile. Ungathola uhlu olugcwele ku- sprites.less noma khona lapha kulo mbhalo.

Amakhanda phezulu! Uma usebenzisa eceleni kweyunithi yezinhlamvu zombhalo, njengezinkinobho noma izixhumanisi ze-nav, qiniseka ukuthi ushiya isikhala ngemva <i>komaka ukuze uthole izikhala ezifanele.

Sebenzisa amacala

Izithonjana zinhle, kepha umuntu angazisebenzisa kuphi? Nansi imibono embalwa:

  • Njengezithombe zokuzulazula kwebha yakho eseceleni
  • Ngokuzulazula okushayelwa yisithonjana kuphela
  • Ukuze izinkinobho zisize ukudlulisa incazelo yesenzo
  • Ngezixhumanisi zokwaba umongo endaweni yomsebenzisi

Empeleni, noma yikuphi lapho ungabeka khona <i>ithegi, ungabeka isithonjana.

Izibonelo

Wasebenzise ezinkinobho, emaqenjini enkinobho yebha yamathuluzi, ukuzulazula, noma okokufaka kwefomu okulungiselelwe ngaphambilini.