Isiseko se-CSS

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

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.

Ikopi yomzimba okhokelayo

Yenza umhlathi ugqame ngokongeza .lead.

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

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 ngoxinzelelo	Akukho nanye
`<abbr>`	Usonga izifinyezo kunye nee-akhronimi ukubonisa inguqulelo eyandisiweyo kwi-hover	Bandakanya `title`uphawu loyelelwano olukhethwayo lombhalo owandisiweyo Sebenzisa `.initialism`iklasi 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 `cite`uphawu lwemvelaphi yeURL Ukusetyenziswa `.pull-left`kunye `.pull-right`neeklasi kwiinketho ezidadayo
`<small>`	Into ekhethwayo yokongeza ucaphulo olujongene 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 —phambi kwayo ngeenjongo zesimbo.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis. </p>
  <encinci> Umntu odumileyo </ encinci>
</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>

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem kunye ne-massa
I-Facilisis kwi-pretium nisl aliquet
Nulla volutpat aliquam velit
I-Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
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.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Iintloko phezulu! Uluhlu lwenkcazo ethe tye luya kucutha amagama amade kakhulu ukuba angangena kuluhlu lwasekhohlo text-overflow. Kwiindawo zokujonga ezimxinwa, ziya kutshintshela kuyilo olupakishweyo olungagqibekanga.

Nomgca

Songa iziqwengana zekhowudi nge <code>.

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>

<pre>
  <p>Umzekelo wokubhaliweyo apha...</p>
</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.

<p> Umzekelo wokubhaliweyo apha... </p>

< iklasi yangaphambili = "prettyprint 
     iilinenum" >
  <p>Umzekelo wokubhaliweyo apha...</p>
</pre>

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

Uphawulo lwetheyibhile

Ithegi	Inkcazo
`<table>`	Isiqalelo sokusonga sokubonisa idatha kwifomathi yetheyibhuli
`<thead>`	Isiqulatho sesiqalelo semigca yeheader yetheyibhile ( `<tr>`) ukuleyibhelisha kwimiqolo yetafile
`<tbody>`	Isiqulatho sesiqalelo semiqolo yetafile ( `<tr>`) kumzimba wetheyibhile
`<tr>`	Isiqulatho sesiqalelo seseti yeeseli zetafile ( `<td>`okanye `<th>`) evela kumqolo omnye
`<td>`	Iseli yetafile ehlala ikho
`<th>`	Iseli yetafile ekhethekileyo yoluhlu (okanye umqolo, ngokuxhomekeke kububanzi kunye nokubekwa) iilebhile mazisetyenziswe ngaphakathi`<thead>`
`<caption>`	Inkcazo okanye isishwankathelo sezinto ezigcinwe yitheyibhile, ngakumbi ziluncedo kubafundi besikrini

<itheyibhile>
  <intloko>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </ intloko>
  <iqela>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </ umzimba>
</ 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 `td`kunye `th`nezinto

Iitafile zemizekelo

1. Izimbo zetafile ehlala ikho

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

< iklasi yetafile = "itafile" > 
  …
</ 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.

< iklasi yetafile = "itafile yetafile enemigca" > 
  …
</ 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.

< iklasi yetafile = "itafile yetafile-umda" > 
  …
</ table>

#	Igama lokuqala	Ifani	Igama lomsebenzisi
1	Phawula	Otto	@mdo
1	Phawula	Otto	@getbootstrap
2	uYakobi	Thornton	@fat
3	Larry intaka		@twitter

4. Itafile ecuthiweyo

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

< iklasi yetafile = "itafile yetafile-icondensed" > 
  …
</ 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.

< iklasi yetafile = "itafile yetafile enemigca yetafile-enomda wetafile-condensed" > 
  ...
</ table>

	Igama eliphelele
#	Igama lokuqala	Ifani	Igama lomsebenzisi
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry intaka		@twitter

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 ziquka 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

ifomu Basic

I-Smart kunye ne-lightweight defaults ngaphandle kophawu olongezelelweyo.

< iklasi yefom = "kakuhle" > 
  <ileyibhile> Igama leleyibhile </ ileyibheli>
  <input type = "text" class = "span3" placeholder = " Chwetheza into..." >   
  <span class = "help-block" > Umzekelo wokubhaliweyo koncedo lwebhloko apha. </ span> 
  < iklasi yeleyibhile = "ibhokisi yokukhangela" > 
    <input type = "checkbox" > Ndijonge 
  </ ileyibheli>
  < uhlobo lweqhosha = "submit " class = "btn" > Ngenisa </ iqhosha>  
</ ifom>

Khangela ifomu

Yongeza .form-searchkwifom .search-querynakwi- input.

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

Ifom engaphakathi

Yongeza .form-inlineukulungelelanisa ulungelelwaniso oluthe nkqo kunye nezithuba zolawulo lwefom.

< iklasi yefom = "ifom-inline kakuhle" > 
  <input type = "text" class = "input-small" placeholder = "I-imeyile" >   
  <input type = "password" class = "input-small" placeholder = "Password" >   
  < iklasi yeleyibhile = "ibhokisi yokukhangela" > 
    <input type = "checkbox" > Ndikhumbule 
  </ ileyibheli>
  < uhlobo lweqhosha = "submit " class = "btn" > Sayina </ iqhosha>  
</ ifom>

Iifom ezithe tyaba

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

igalelo lombhalo (umbhalo, igama lokugqitha, i-imeyile, njalo njalo)
ibhokisi yokukhangela
unomathotholo
khetha
ukhetho oluninzi
igalelo lefayile
indawo yombhalo

Umzekelo wokuphawula

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

< iklasi yefom = "ifom-horizontal" > 
  <iseti yendawo>
    <legend> Isicatshulwa sentsomi </legend>
    <div class = "control-group" > 
      < iklasi yeleyibhile = "control-label" for = "input01" > Igalelo lombhalo </label>  
      <div class = "controls" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Isicatshulwa soncedo esixhasayo </p> 
      </ div>
    </ div>
  </ iseti yendawo>
</ ifom>

Iimeko zolawulo lwefom

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.

<iseti yendawo
  class = "control-group error" >
  …
</ iseti yendawo>

Igalelo eligxilileyo

Ungeniso olungahlelekiyo

Ixabiso elithile apha

Ungeniso olungasebenziyo

Ibhokisi yokujonga ivaliwe

Le yibhokisi yokukhangela evaliweyo

Igalelo elinesilumkiso

Inokuba ikho into engahambi kakuhle

Ungeniso olunempazamo

Nceda ulungise impazamo

Igalelo ngempumelelo

Yhooo!

Khetha ngempumelelo

Yhooo!

Ukwandiswa kolawulo lweefom

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 nonomathotholo nazo ziyaxhaswa. Yongeza nje .inlinekuyo nayiphi na .checkboxokanye .radiokwaye ugqibile.

Iifom zangaphakathi 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.

Yenza ubungakanani begridi

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

Ubungakanani obunye

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

Okubhaliweyo kwangaphambili

Nali isicatshulwa soncedo

Umbhalo ohlonyelweyo

.00

Nantsi isicatshulwa soncedo esingakumbi

Yongeza kwaye ulungiselele

$ .00

Fakela ngeqhosha

Amaqhosha amabini adibanisa

Iibhokisi zokukhangela ezingaphakathi

1 2 3

Iibhokisi zokukhangela

Ukhetho lokuqala yile kwaye leya-qiniseka ukuba ubandakanya ukuba kutheni ilungile Ukhetho lwesibini lunokutshekishwa kwaye lufakwe kwiziphumo zefom Ukhetho lwesithathu lunako-ewe, uqikelele-nalo lujongwe kwaye lufakwe kwiziphumo zefom

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

Amaqhosha erediyo

Ukhetho lokuqala yile kwaye leya-qiniseka ukuba ubandakanya ukuba kutheni ilungile Ukhetho lwesibini lunokuba yenye into kwaye ukuyikhetha kuya kuyeka ukukhetha enye

Iqhosha	iklasi=""	Inkcazo
	`btn`	Iqhosha eligreyi eliqhelekileyo elinothatho
	`btn btn-primary`	Ibonelela ngobunzima 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.

<a iklasi = "btn" href = ""> Ikhonkco </a> _  
< iklasi yeqhosha = "btn" type = "ngenisa" >  
  Iqhosha
</ iqhosha>
< iklasi yegalelo = "btn" type = "iqhosha"  
         ixabiso = "Igalelo" >
< iklasi yegalelo = "btn" type = "ngenisa"  
         ixabiso = "Ngenisa" >

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

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
i 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
icon-hdd
icon-bullhorn
icon-bell
icon-isatifiketi
icon-obhontsi-up
icon-obhontsi-phantsi
uphawu-isandla-ekunene
uphawu-isandla-ekhohlo
uphawu-isandla-phezulu
uphawu-isandla-phantsi
icon-isangqa-utolo-ekunene
icon-isangqa-utolo-ekhohlo
icon-isangqa-utolo-phezulu
icon-isangqa-utolo-phantsi
icon-globe
i icon-wrench
icon-imisebenzi
isihluzi-mfanekiso
icon-briefcase
icon-isikrini esigcweleyo

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:

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

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

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

Kukho iiklasi ezili-140 ongakhetha kuzo kwii-icon zakho. Yongeza nje <i>ithegi kunye neeklasi 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 yi-icon
Ukuba 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.

Hlaziya Phuma Cima

Comment Iisetingi Iinkcukacha ezithe vetshe

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