I-Bootstrap

Isiseko se-CSS

Ngaphezulu kwesikafula, izinto ezisisiseko zeHTML zenziwe ngesitayile kwaye ziphuculwe ngeeklasi ezandisiweyo ukunika inkangeleko entsha, engaguqukiyo kunye nokuziva.

Ukuchwetheza Izihloko, imihlathi, izintlu, kunye nezinye izinto zodidi olungaphakathi

Izihloko & ikopi yomzimba

Isikali sokuchwetheza

Yonke igridi yokuchwetheza isekelwe kwiinguqu ezimbini ezincinci kwiinguqu zethu.ifayile engaphantsi: @baseFontSizekunye @baseLineHeight. Eyokuqala sisiseko sobungakanani befonti esetyenziswa kuyo yonke indawo kwaye eyesibini bubude bomgca wesiseko.

Sisebenzisa ezo ziguquguqukayo, kunye nezibalo ezithile, ukwenza imida, iipadi, kunye nobude bomgca walo lonke uhlobo lwethu nokunye.

Umzekelo wesicatshulwa somzimba

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 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. Yenza i-odio dui.

h1. Isihloko 1

h2. Isihloko 2

h3. Isihloko 3

h4. Isihloko 4

h5. Isihloko 5
h6. Isihloko 6

Ugxininiso, idilesi, kunye nesifinyezo

Isiqalelo Ukusetyenziswa Ukhetho
<strong> Ukugxininisa isiqwengana sesicatshulwa esibalulekileyo Akukho nanye
<em> Ukugxininisa i-snippet yesicatshulwa kunye noxinzelelo Akukho nanye
<abbr> Usonga izifinyezo kunye nee-akhronimi ukubonisa inguqulelo eyandisiweyo kwi-hover

Bandakanya titleuphawu loyelelwano olukhethwayo lombhalo owandisiweyo

Sebenzisa .initialismiklasi kwizifinyezo zoonobumba abakhulu.
<address> Ngolwazi loqhagamshelwano ngokhokho walo okufutshane okanye wonke umsebenzi Gcina ukufomatha ngokuphelisa yonke imigca nge<br>

Ukusebenzisa ugxininiso

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

Qaphela: Zive ukhululekile ukusebenzisa <b>nakwi <i>-HTML5, kodwa ukusetyenziswa kwazo kutshintshile kancinane. <b>yenzelwe ukuqaqambisa amagama okanye amabinzana ngaphandle kokudlulisela ukubaluleka okongeziweyo ngelixa <i>ubukhulu becala iselizwi, amagama obugcisa, njl.

Iidilesi zemizekelo

Nantsi imizekelo emibini yendlela <address>enokusetyenziswa ngayo ithegi:

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

Umzekelo wezishunqulelo

Ushunqulelo olunophawu titleloyelelwano lunomda osezantsi onamachaphaza akhanyayo kunye nekhesa yoncedo kwi-hover. Oku kunika abasebenzisi isalathiso esongezelelweyo into eza kuboniswa kwi-hover.

Yongeza initialismiklasi kwisifinyezo ukwandisa ukuhambelana kochwethezo ngokuyinika isayizi yombhalo omncinci kancinane.

I- HTML yeyona nto ilungileyo ukusukela kwisonka esisikiweyo.

Isishunqulelo segama loyelelwano sithi attr .

Iingcaphuno zebhloko

Isiqalelo Ukusetyenziswa Ukhetho
<blockquote> Isiqalelo seBhlokhi sokucaphula umxholo komnye umthombo

Yongeza citeuphawu lwemvelaphi yeURL

Ukusetyenziswa .pull-leftkunye .pull-rightneeklasi kwiinketho ezidadayo
<small> Into ekhethwayo yokongeza isicaphulo esijongene nomsebenzisi, umbhali onesihloko somsebenzi Beka indawo <cite>malunga nesihloko okanye igama lomthombo

Ukubandakanya i-blockquote, songela <blockquote>malunga nayo nayiphi na i- HTML njengesicatshulwa. Kwiingcaphuno ezithe ngqo sicebisa ukuba a <p>.

Bandakanya into oyikhethayo <small>ukucaphula umthombo wakho kwaye uya kufumana i-dash em &mdash;phambi kwayo ngeenjongo zesimbo.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis. </p>
  3.   <encinci> Umntu odumileyo </ encinci>
  4. </blockquote>

Umzekelo weebhloko zocaphulo

Izicatshulwa zebhloko ezihlala zikhona zibhalwa ngolu hlobo:

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

Umntu odumileyo kuMzimba womsebenzi

Ukudada ibhloko yakho ekunene, yongeza class="pull-right":

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

Umntu odumileyo kuMzimba womsebenzi

Uluhlu

Ayiodolwanga

<ul>

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

Ayifakwanga isimbo

<ul class="unstyled">

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

Iodolwe

<ol>

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

Inkcazo

<dl>

Uluhlu lweenkcazelo
Uluhlu lwenkcazo lufanelekile ukuchaza 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
Etiam porta sem malesuada magna mollis euismod.

Inkcazo ethe tye

<dl class="dl-horizontal">

Uluhlu lweenkcazelo
Uluhlu lwenkcazo lufanelekile ukuchaza 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
Etiam porta sem malesuada magna mollis euismod.

Ikhowudi yangaphakathi kunye neziqwengana zekhowudi yebhloko

Nomgca

Songa iziqwengana zekhowudi nge <code>.

  1. Umzekelo , < ikhowudi> icandelo </ ikhowudi > kufuneka isongwe njenge -inline .

Ibhloko esisiseko

Sebenzisa <pre>kwimigca emininzi yekhowudi. Qiniseka ukuba ubaleka naziphi na izibiyeli ze-engile kwikhowudi yonikezelo olufanelekileyo.

<p>Isampuli yombhalo apha...</p>

  1. <pre>
  2.   <p>Umzekelo wokubhaliweyo apha...</p>
  3. </pre>

Qaphela: Qinisekisa ukugcina ikhowudi ngaphakathi <pre>kweethegi ngokusondeleyo ekhohlo kangangoko; iyakwenza zonke iithebhu.

Unokukhetha ukongeza .pre-scrollableiklasi eya kuseka ubude bobude obuyi-350px kwaye ibonelele nge-y-axis scrollbar.

Google Pretify

Thatha into efanayo <pre>kwaye wongeze iindidi ezimbini ozikhethelayo ukulungiselela unikezelo oluphuculweyo.

  1. <p> Umzekelo wokubhaliweyo apha... </p>
  1. < iklasi yangaphambili = "prettyprint 
  2.      iilinenum" >
  3.   <p>Umzekelo wokubhaliweyo apha...</p>
  4. </pre>

Khuphela i-google-code-prettify kwaye ujonge i-readme ukuze uyisebenzise.

Iitheyibhile Kuba, uyiqikelele, idatha yetheyibhile

Uphawulo lwetheyibhile

Ithegi Inkcazo
<table> Isiqalelo sokusonga sokubonisa idatha kwifomathi yetheyibhuli
<thead> Isiqulatho sesiqalelo semigca yeheader yetheyibhile ( <tr>) ukuleyibhelisha kwimiqolo yetafile
<tbody> Isiqulatho semigca yetafile ( <tr>) kumzimba wetheyibhile
<tr> Isiqulatho sesiqalelo seseti yeeseli zetafile ( <td>okanye <th>) evela kumqolo omnye
<td> Iseli yetafile ehlala ikho
<th> Iseli yetheyibhile ekhethekileyo yoluhlu (okanye umqolo, ngokuxhomekeke kububanzi kunye nokubekwa) iilebhile
mazisetyenziswe ngaphakathi<thead>
<caption> Inkcazo okanye isishwankathelo sezinto ezigcinwe yitheyibhile, ngakumbi ziluncedo kubafundi besikrini 
  1. <itheyibhile>
  2.   <intloko>
  3.     <tr>
  4.       <th> … </th>
  5.       <th> … </th>
  6.     </tr>
  7.   </ intloko>
  8.   <iqela>
  9.     <tr>
  10.       <td> … </td>
  11.       <td> … </td>
  12.     </tr>
  13.   </ umzimba>
  14. </ table>

Iinketho zetheyibhile

Igama Iklasi Inkcazo
Ukuhlala kukho Akukho nanye Akukho zimbo, iikholamu nje kunye nemiqolo
Isiseko .table Kuphela imigca ethe tye phakathi kwemiqolo
Umda .table-bordered Ujikeleza iikona kwaye wongeza umda wangaphandle
Zebra-umgca .table-striped Yongeza umbala ongasemva ongwevu okhanyayo kwimiqolo engaqhelekanga (1, 3, 5, njalo njalo)
Icutshiwe .table-condensed Sika i-padding ethe nkqo kwisiqingatha, ukusuka kwi-8px ukuya kwi-4px, ngaphakathi kwayo yonke into tdkunye thnezinto

Iitafile zemizekelo

1. Izimbo zetafile ehlala ikho

Iitheyibhile zibhalwa ngokuzenzekelayo kunye nemida embalwa kuphela ukuqinisekisa ukufundeka kunye nokugcina isakhiwo. Nge-2.0, .tableiklasi iyafuneka.

  1. < iklasi yetafile = "itafile" > 
  2.   …
  3. </ table>
# Igama lokuqala Ifani Igama lomsebenzisi
1 Phawula Otto @mdo
2 uYakobi Thornton @fat
3 Larry intaka @twitter

2. Itafile enemigca

Fumana ubumnandi obuncinci ngeetafile zakho ngokongeza i-zebra-striping-yongeza nje .table-stripediklasi.

Qaphela: Iitafile ezinemigca zisebenzisa :nth-childumkhethi we-CSS kwaye ayifumaneki kwi-IE7-IE8.

  1. < iklasi yetafile = "itafile yetafile enemigca" > 
  2.   …
  3. </ table>
# Igama lokuqala Ifani Igama lomsebenzisi
1 Phawula Otto @mdo
2 uYakobi Thornton @fat
3 Larry intaka @twitter

3. Itafile enemida

Yongeza imida ejikeleze itafile yonke kunye neekona ezingqukuva ngeenjongo zobuhle.

  1. < iklasi yetafile = "itafile yetafile-umda" > 
  2.   …
  3. </ table>
# Igama lokuqala Ifani Igama lomsebenzisi
1 Phawula Otto @mdo
Phawula Otto @getbootstrap
2 uYakobi Thornton @fat
3 Larry intaka @twitter

4. Itafile ejingisiweyo

Yenza iitafile zakho zihlangane ngakumbi ngokongeza .table-condensediklasi ukusika i-padding cell cell kwisiqingatha (ukusuka kwi-8px ukuya kwi-4px).

  1. < iklasi yetafile = "itafile yetafile-icondensed" > 
  2.   …
  3. </ table>
# Igama lokuqala Ifani Igama lomsebenzisi
1 Phawula Otto @mdo
2 uYakobi Thornton @fat
3 Larry intaka @twitter

5. Zidibanise zonke!

Zive ukhululekile ukudibanisa naziphi na iiklasi zetafile ukuphumeza inkangeleko eyahlukileyo ngokusebenzisa naziphi na iiklasi ezikhoyo.

  1. < iklasi yetafile = "itafile yetafile enemigca yetafile-enomda wetafile-condensed" > 
  2.   ...
  3. </ table>
Igama eliphelele
# Igama lokuqala Ifani Igama lomsebenzisi
1 Phawula Otto @mdo
2 uYakobi Thornton @fat
3 Larry intaka @twitter

Iifom

I-Flexible HTML kunye neCSS

Elona candelo lilungileyo malunga neefom kwi-Bootstrap kukuba onke amagalelo akho kunye nolawulo lukhangeleka lukhulu kungakhathaliseki ukuba ulwakha njani kuphawu lwakho. Akukho HTML yangaphezulu ifunekayo, kodwa sibonelela ngeepatheni kwabo bayifunayo.

Uyilo oluntsonkothileyo luza neeklasi ezimfutshane kunye nezikhawulezayo zesitayile esilula kunye nokubopha iminyhadala, ke uyagqunywa kwinqanaba ngalinye.

Izakhiwo ezine zibandakanyiwe

I-Bootstrap iza nenkxaso kwiintlobo ezine zoyilo lwefom:

  • Ngokuthe nkqo (okuhlala kukho)
  • Khangela
  • Nomgca
  • Ukuthe tye

Iindidi ezahlukeneyo zoyilo lweefom zifuna utshintsho oluthile kuphawulo, kodwa ulawulo ngokwalo luhlala kwaye luziphatha ngendlela efanayo.

Ukulawula amazwe kunye nokunye

Iifom ze-Bootstrap zibandakanya izitayile zazo zonke iifom zolawulo ezisisiseko njengegalelo, i-textarea, kunye nokukhetha onokuyilindela. Kodwa ikwaza nenani lamalungu esiko afana namagalelo ahlonyelweyo kunye nangaphambili kunye nenkxaso yoluhlu lweebhokisi zokukhangela.

Amazwe afana nempazamo, isilumkiso, kunye nempumelelo zibandakanyiwe kuhlobo ngalunye lolawulo lwefomu. Kukwaqukwe izimbo zolawulo olukhubazekileyo.

Iintlobo ezine zeefom

I-Bootstrap inikeza uphawu olulula kunye nezitayile zeendlela ezine zeefom zewebhu eziqhelekileyo.

Igama Iklasi Inkcazo
Ngokuthe nkqo (okuhlala kukho) .form-vertical (ayifuneki) Iileyibhile ezipakishwe, ezilungelelaniswe ekhohlo phezu kolawulo
Nomgca .form-inline Ileyibhile elungelelaniswe ekhohlo kunye nolawulo lwebhloko engaphakathi kwisitayela esihlangeneyo
Khangela .form-search Ukufakwa kombhalo ojikelezileyo owongezelelweyo kubuhle bokukhangela obuqhelekileyo
Ukuthe tye .form-horizontal Ileyibhile zilungelelaniswe ngasekhohlo, zilungelelaniswe ekunene kumgca ofanayo nolawulo

Iifom zemizekelo zisebenzisa ulawulo lwefomu nje, akukho phawu longezelelweyo

Ifom esisiseko

Nge-v2.0, sineendlela zokungagqibekanga ezikhaphukhaphu nezikrelekrele kwizimbo zefom. Akukho phawulo olongezelelweyo, vele wenze ulawulo.

Isicatshulwa soncedo esinxulumeneyo!

Umzekelo wokubhaliweyo koncedo lwenqanaba lebhloko apha.

  1. < iklasi yefom = "kakuhle" > 
  2.   <ileyibhile> Igama leleyibhile </ ileyibheli>
  3.   <input type = "text" class = "span3" placeholder = " Chwetheza into..." >   
  4.   <span class = "help-inline" > Isicatshulwa soncedo esinxulumeneyo! </ span> 
  5.   < iklasi yeleyibhile = "ibhokisi yokukhangela" > 
  6.     <input type = "checkbox" > Ndijonge 
  7.   </ ileyibheli>
  8.   < uhlobo lweqhosha = "submit " class = "btn" > Ngenisa </ iqhosha>  
  9. </ ifom>

Khangela ifomu

Ibonisa izimbo zeWebKit ezingagqibekanga, yongeza nje .form-searchiindawo zokukhangela ezongezelelweyo ezingqukuva.

  1. < iklasi yefom = "ukukhangela kakuhle ifom" > 
  2.   <input type = "text" class = "input-medium search-query" >  
  3.   < uhlobo lweqhosha = "submit " class = "btn" > Khangela </ iqhosha>  
  4. </ ifom>

Ifom engaphakathi

Igalelo linqanaba lebhloko ukuqalisa. Kuba .form-inlinekunye .form-horizontal, sisebenzisa ibhloko engaphakathi.

  1. < iklasi yefom = "ifom-inline kakuhle" > 
  2.   <input type = "text" class = "input-small" placeholder = "I-imeyile" >   
  3.   <input type = "password" class = "input-small" placeholder = "Password" >   
  4.   < iklasi yeleyibhile = "ibhokisi yokukhangela" > 
  5.     <input type = "checkbox" > Ndikhumbule 
  6.   </ ileyibheli>
  7.   < uhlobo lweqhosha = "submit " class = "btn" > Sayina </ iqhosha>  
  8. </ ifom>

Iifom ezithe tyaba

Ilawula i-Bootstrap ixhasa

Ukongeza kwi-freeform text, nayiphi na i-HTML5 text-based input ibonakala injalo.

Umzekelo wophawulo

Kunikwe lo mzekelo ungasentla uyilo lwefom, nalu uphawu olunxulunyaniswa negalelo lokuqala kunye neqela lolawulo. I- .control-group,, .control-labelkunye .controlsneeklasi zonke ziyafuneka kwisitayile.

  1. < iklasi yefom = "ifom-horizontal" > 
  2.   <iseti yendawo>
  3.     <legend> Isicatshulwa sentsomi </legend>
  4.     <div class = "control-group" > 
  5.       < iklasi yeleyibhile = "control-label" for = "input01" > Igalelo lombhalo </label>  
  6.       <div class = "controls" > 
  7.         <input type = "text" class = "input-xlarge" id = "input01" >   
  8.         <p class = "help-block" > Isicatshulwa soncedo esixhasayo </p> 
  9.       </ div>
  10.     </ div>
  11.   </ iseti yendawo>
  12. </ ifom>

Yintoni ebandakanyiweyo

Kuboniswe ekhohlo zonke iindlela zolawulo lwefomu esiluxhasayo. Nalu uluhlu oluneebhulethi:

  • amagalelo okubhaliweyo (okubhaliweyo, igama lokugqitha, i-imeyile, njalo njalo)
  • ibhokisi yokukhangela
  • unomathotholo
  • khetha
  • ukhetho oluninzi
  • igalelo lefayile
  • indawo yombhalo

Ukungagqibeki okutsha nge-v2.0

Ukuya kuthi ga kwi-v1.4, izimbo zeBootstrap ezimiselweyo zisebenzise uyilo oluthe tye. NgeBootstrap 2, sisuse eso sinyanzelo ukuba sibe nobukrelekrele, ukungagqibeki okunokwehla kuyo nayiphi na indlela.


Iimeko zolawulo lwefom
Ixabiso elithile apha
Inokuba ikho into engahambi kakuhle
Nceda ulungise impazamo
Yhooo!
Yhooo!

Ibhrawuza eyilwe ngokutsha ithi

I-Bootstrap inezimbo zezitayile ze-browser exhaswayo ekugxilwe kuyo kunye disablednemimandla. Sisusa iWebkit engagqibekanga outlinekwaye sisebenzise indawo box-shadowyayo :focus.

Ukuqinisekiswa kwefomu

Ikwabandakanya izimbo zokuqinisekisa iimpazamo, izilumkiso, kunye nempumelelo. Ukusebenzisa, yongeza iklasi yempazamo kwindawo engqongileyo .control-group.

  1. <iseti yendawo
  2.   class = "control-group error" >
  3.   …
  4. </ iseti yendawo>

Ukwandisa ulawulo lweefom

Sebenzisa .span*iiklasi ezifanayo ukusuka kwisixokelelwano segridi ukwenzela ubungakanani bongeniso.

Usenokusebenzisa iiklasi ezimileyo ezingabonisi mephu kwigridi, ziqhelanise nezitayile ze-CSS eziphendulayo, okanye i-akhawunti yeentlobo ezahlukeneyo zolawulo (umz., inputvs. select).

@

Nali isicatshulwa soncedo

.00
Nantsi isicatshulwa soncedo esingakumbi
$ .00

Qaphela: Iileyibhile zijikeleze zonke iinketho zeendawo ezinkulu zokucofa kunye nefomu esebenzisekayo ngakumbi.

Yilungiselela kwaye udibanise amagalelo

Amaqela ongeniso-nombhalo ohlonyelweyo okanye osele ubekiwe-abonelela ngendlela elula yokunika umxholo ongakumbi wamagalelo akho. Imizekelo emikhulu ibandakanya i-@ sign yee-username ze-Twitter okanye i-$ yezemali.

Iibhokisi zokutshekisha kunye noonomathotholo

Ukuya kuthi ga kwi-v1.4, iBootstrap ifuna uphawu olongezelelweyo malunga neebhokisi zokukhangela kunye nonomathotholo ukuzipakisha. Ngoku, ngumcimbi olula wokuphinda <label class="checkbox">esonga ifayile ye <input type="checkbox">.

Iibhokisi zokukhangela ezingaphakathi kunye neerediyo nazo ziyaxhaswa. Yongeza nje .inlinekuyo nayiphi na .checkboxokanye .radiokwaye ugqibile.

Iifom ezingaphakathi kwaye udibanise / ulungiselele

Ukusebenzisa i-prepend okanye ukudibanisa amagalelo kwifom engaphakathi, qiniseka ukubeka .add-onkunye inputnomgca omnye, ngaphandle kwezithuba.

Yenza isicatshulwa soncedo

Ukongeza isicatshulwa soncedo kwigalelo lakho lefom, bandakanya isicatshulwa soncedo esingaphakathi okanye ibhlokhi yombhalo <span class="help-inline">woncedo <p class="help-block">emva kwento yokufaka.

Amaqhosha

Iqhosha iklasi="" Inkcazo
btn Iqhosha eligreyi eliqhelekileyo elinothatho
btn btn-primary Inika ubunzima obubonakalayo obongezelelweyo kwaye ichonge isenzo sokuqala kwiseti yamaqhosha
btn btn-info Isetyenziswa njengenye indlela kwizimbo ezingagqibekanga
btn btn-success Ibonisa isenzo esiyimpumelelo okanye esilungileyo
btn btn-warning Ibonisa ukuba kufuneka kuthatyathwe isilumkiso ngeli nyathelo
btn btn-danger Ibonisa isenzo esinobungozi okanye esinokuthi sibe sibi
btn btn-inverse Elinye iqhosha elimnyama elingwevu, alibotshelelwanga kwisenzo semantic okanye ukusetyenziswa

Amaqhosha ezenzo

Njengesiqhelo, amaqhosha kufuneka asetyenziselwe iintshukumo kuphela ngelixa amakhonkco aza kusetyenziselwa izinto. Umzekelo, "Khuphela" kufuneka ibe liqhosha ngelixa "umsebenzi wamva nje" kufuneka ube likhonkco.

Izimbo zamaqhosha zinokusetyenziswa kuyo nantoni na .btneneklasi esetyenzisiweyo. Nangona kunjalo, ngokuqhelekileyo uya kufuna ukusebenzisa ezi kuphela <a>kunye <button>nezinto.

Ukuhambelana kwebrowser

I-IE9 ayikhuli imilinganiselo yangasemva kwiikona ezingqukuva, ngoko ke siyayisusa. Eyeleleneyo, i-IE9 yenza buttonizinto ezingasebenziyo, inikezela ngokungwevu okubhaliweyo ngesithunzi-sombhalo esibi esingenako ukusilungisa.

Iisayizi ezininzi

Unqwenela amaqhosha amakhulu okanye amancinci? Yongeza .btn-large, .btn-small, okanye .btn-miniiisayizi ezimbini ezongezelelweyo.


Ilizwe labakhubazekileyo

Kumaqhosha avaliweyo, yongeza .disablediklasi kumakhonkco kunye disablednophawu <button>lweziqalelo.

Ikhonkco eliphambili Ikhonkco

Iintloko phezulu! Sisebenzisa .disabledudidi oluluncedo apha, ngokufanayo .activenodidi oluqhelekileyo, ngoko ke akukho simaphambili sifunekayo.

Iklasi enye, iithegi ezininzi

Sebenzisa .btniklasi kwi- <a>, <button>, okanye <input>isiqalelo.

Ikhonkco 
  1. <a iklasi = "btn" href = ""> Ikhonkco </a> _  
  2. < iklasi yeqhosha = "btn" type = "ngenisa" >  
  3.   Iqhosha
  4. </ iqhosha>
  5. < iklasi yegalelo = "btn" type = "iqhosha"  
  6.          ixabiso = "Igalelo" >
  7. < iklasi yegalelo = "btn" type = "ngenisa"  
  8.          ixabiso = "Ngenisa" >

Njengowona mkhuba ulungileyo, zama ukuthelekisa umxholo wakho ukuze uqinisekise ukuthelekisa unikezelo lwesikhangeli. Ukuba unayo input, sebenzisa <input type="submit">iqhosha lakho.

Iimpawu zoMfanekiso zibonelelwa ngeGlyphicons

  • icon-glass
  • icon-umculo
  • icon-ukukhangela
  • icon-mvulophu
  • icon-intliziyo
  • icon-star
  • i-icon-star-engenanto
  • i icon-umsebenzisi
  • icon-ifilimu
  • icon-th-enkulu
  • icon-th
  • icon-th-uluhlu
  • icon-ok
  • icon-susa
  • i icon-zoom-in
  • i icon-zoom-out
  • i icon-off
  • uphawu-umqondiso
  • icon-cog
  • icon-udoti
  • icon-ikhaya
  • icon-fayile
  • uphawu-ixesha
  • icon-indlela
  • icon-download-alt
  • i icon-download
  • icon-upload
  • icon-inbox
  • icon-play-isangqa
  • icon-phinda
  • i icon-ukuhlaziya
  • icon-uluhlu-alt
  • icon-lock
  • i-icon-flag
  • icon-headphones
  • icon-umthamo-off
  • icon-umthamo-phantsi
  • icon-umthamo-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-ncwadi
  • icon-bookmark
  • icon-print
  • icon-ikhamera
  • ifonti yomfanekiso
  • i icon-engqindilili
  • i-icon-italic
  • icon-text-ubude
  • i icon-text-width
  • i-icon-lungelelanisa-ekhohlo
  • i-icon-lungelelanisa-embindini
  • icon-align-right
  • icon-align-justify
  • Uluhlu lwe icon
  • i-icon-indent-ekhohlo
  • i-icon-indenti-ekunene
  • icon-facetime-vidiyo
  • umfanekiso-mfanekiso
  • icon-ipensile
  • i icon-map-marker
  • icon-lungisa
  • icon-tint
  • i icon-edit
  • icon-ukwabelana
  • icon-jonga
  • icon-susa
  • icon-inyathelo-umva
  • icon-ngokukhawuleza-umva
  • i icon-umva
  • i icon-play
  • icon-pause
  • icon-stop
  • uphawu-phambili
  • icon-ngokukhawuleza-phambili
  • icon-inyathelo-phambili
  • i icon-khupha
  • icon-chevron-ekhohlo
  • icon-chevron-right
  • icon-plus-sign
  • uphawu-thabatha-uphawu
  • uphawu-susa-uphawu
  • uphawu-ok-uphawu
  • uphawu-mbuzo-uphawu
  • uphawu-ulwazi-uphawu
  • umfanekiso weskrini
  • icon-susa-isangqa
  • icon-ok-isangqa
  • icon-ban-isangqa
  • i icon-utolo-ekhohlo
  • icon-utolo-ekunene
  • uphawu-utolo-phezulu
  • icon-utolo-phantsi
  • icon-share-alt
  • i icon-resize- full
  • icon-resize-ncinci
  • icon-plus
  • icon-thabatha
  • icon-asterisk
  • uphawu-isikhuzo-uphawu
  • icon-isipho
  • icon-leaf
  • icon-umlilo
  • icon-eye-vula
  • icon-eye-vala
  • uphawu-isilumkiso-uphawu
  • icon-plane
  • icon-ikhalenda
  • icon-random
  • icon-comment
  • icon-umazibuthe
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-inqwelo yokuthenga
  • i icon-ifolda-vala
  • icon-ifolda-vula
  • i icon-resize-vertical
  • icon-resize-horizontal

Yakhelwe njenge-sprite

Endaweni yokwenza yonke i-icon ibe sisicelo esongezelelweyo, siyihlanganisele kwi-sprite-inqwaba yemifanekiso kwifayile enye esebenzisa i-CSS ukubeka imifanekiso nge background-position. Le yindlela efanayo esiyisebenzisayo kwi-Twitter.com kwaye isisebenzele kakuhle.

Zonke iiklasi ze-icon zifakwe .icon-kwi-prefix yeendawo ezifanelekileyo zamagama kunye ne-scoping, njengamanye amacandelo ethu. Oku kuya kunceda ukuphepha iingxabano kunye nezinye izixhobo.

I-Glyphicons isinike ukusetyenziswa kweeHalflings ezibekwe kwi-toolkit yethu evulekileyo yomthombo ukuba nje sibonelela ngekhonkco kunye nekhredithi apha kumaxwebhu. Nceda ucinge ngokwenza okufanayo kwiiprojekthi zakho.

Kusetyenziswa kwanjani

I-Bootstrap isebenzisa <i>ithegi yazo zonke ii-icon, kodwa ayinayo iklasi yecala-kuphela isimaphambili ekwabelwana ngaso. Ukusebenzisa, beka le khowudi ilandelayo naphi na:

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

Kukwakho nezitayile ezikhoyo kwii-icon eziguqulweyo (ezimhlophe), ezenziwe zalungiswa ngeklasi enye eyongezelelweyo:

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

Kukho iiklasi ezili-120 ongakhetha kuzo kwii-icon zakho. Yongeza nje <i>ithegi ngeeklasi ezifanelekileyo kwaye usetwe. Ungalufumana uluhlu olupheleleyo kwi sprites.less okanye apha kolu xwebhu.

Iintloko phezulu! Xa usebenzisa ecaleni kwemitya yokubhaliweyo, njengakumaqhosha okanye amakhonkco e-nav, qiniseka ukuba ushiya isithuba emva <i>kwethegi yesithuba esifanelekileyo.

Sebenzisa iimeko

Iimpawu zilungile, kodwa umntu unokuzisebenzisa phi? Nazi iimbono ezimbalwa:

  • Njengembonakalo yokukhangela kwebar yakho esecaleni
  • Kukhangelo oluqhutywa ngumfanekiso
  • Ukuze amaqhosha ancede ukuhambisa intsingiselo yesenzo
  • Ngeekhonkco ukwabelana ngomxholo kwindawo yomsebenzisi

Ngokusisiseko, naphi na apho ungabeka khona <i>ithegi, ungabeka i icon.

Imizekelo

Zisebenzise kumaqhosha, amaqela amaqhosha ebar yesixhobo, ukukhangela, okanye amagalelo efomu esele ibekiwe.

Umsebenzisi

Hlaziya Phuma Cima

Comment Iisetingi Iinkcukacha ezithe vetshe