Lebanta la Bootstrap

CSS ya motheo

Dielemente tša motheo tša HTML tše di setaeletšwego le go godišwa ka diklase tše di katološwago.

Dihlogo godimo! Di-doc tše ke tša v2.3.2, yeo e sa hlwego e thekgwa semmušo. Hlahloba phetolelo ya moraorao ya Bootstrap!

Go thaepa

Dihlogo tša ditaba

Dihlogo ka moka tša HTML, <h1>go fihla <h6>di a hwetšagala.

h1. Hlogo ya 1

h2. Hlogo ya 2

h3. Hlogo ya 3

h4. Hlogo ya 4

h5. Hlogo ya 5
h6. Hlogo ya 6

Khopi ya mmele

Bootstrap ya lefatše default font-sizeke 14px , le e line-heightya 20px . Se se dirišwa go <body>le dirapa ka moka. Go tlaleletša, <p>(ditemana) di amogela moedi wa ka fase wa seripagare sa bophagamo bja bona bja mola (10px ka go ikemela).

Nullam quis risus eget urna mollis e kgabišitšwego vel eu leo. Cum sociis natoque penatibus le magnis dis pelego montes, nascetur ya go segiša mus. Nullam id dolor id nibh dikoloi tša dikoloi.

Cum sociis natoque penatibus le magnis dis pelego montes, nascetur ya go segiša mus. Donec ullamcorper lefeela bao e sego metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper lefeela bao e sego metus auctor fringilla.

Maecenas sed diam eget risus varius blandit dula amet e seng magna. Donec id elit e seng mi porta gravida ka eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Khopi ya mmele ya go eta pele

Dira gore serapa se tšwelele ka go oketša .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus motšweletši wa dilo. Duis mollis, est yeo e sego ya commodo luxus.

<p sehlopha = "etapele" > ... </p>

E agilwe ka Ka tlase

Sekala sa go thaepa se theilwe godimo ga diphetogo tše pedi tša LESS ka go diphetogo.less : @baseFontSizele @baseLineHeight. Ya pele ke motheo wa fonte-bogolo bjo bo šomišitšwego gohle gomme ya bobedi ke motheo wa mola-bophagamo. Re šomiša diphetogo tšeo le dipalo tše dingwe tše bonolo go hlama margins, paddings, le line-heights ya mohuta wa rena ka moka le tše dingwe. Customize bona le Bootstrap ikamahanya le maemo.

Kgatelelo

Dira tšhomišo ya dithepo tša kgatelelo tša go se fetoge tša HTML ka mekgwa ye bofefo.

<small>

Bakeng sa go tloša kgatelelo ya ka gare goba diboloko tša sengwalwa, šomiša thepo ye nnyane.

Mothaladi wo wa sengwalwa o reretšwe go swarwa bjalo ka mongwalo wo mobotse.

<p> <small> Mothaladi wo wa sengwalwa o reretšwe go swarwa bjalo ka mongwalo wo mobotse. </small> </p>

Bokoto

Bakeng sa go gatelela seripa sa sengwalwa ka boima bja fonte-boima.

Seripa se se latelago sa sengwalwa se tšweletšwa bjalo ka sengwalwa se se motenya .

<strong> e fetoletšwe bjalo ka mongwalo wo motenya </strong>

Ditlhaka tše di sekamego

Bakeng sa go gatelela seripa sa sengwalwa ka mongwalo o sekamego.

Seripa se se latelago sa sengwalwa se fetolelwa bjalo ka sengwalwa se se sekamego .

<em> e fetoletšwe bjalo ka sengwalwa se se sekamego </em>

Dihlogo godimo!Ikwe o lokologile go diriša <b>le <i>ka HTML5. <b>e reretšwe go tšweletša mantšu goba dipolelwana ntle le go fetišetša bohlokwa bja tlaleletšo mola <i>e le kudu ya lentšu, mareo a sethekniki, bjalobjalo.

Diklase tša go logaganya

Beakanya sengwalwa gape gabonolo go dikarolo ka diklase ta go logaganya sengwalwa.

Sengwalwa se se logaganywago ka go le letshadi.

Sengwalwa se se logagantšwego bogareng.

Sengwalwa se se logaganywago ka go le letona.

  1. <p class = "text-left" > Sengwalwa se se logaganywago ka go le letshadi. </p> 
  2. <p class = "text-center" > Sengwalwa se se logagantšwego bogareng. </p> 
  3. <p class = "text-right" > Sengwalwa se se logaganywago ka go le letona. </p>

Diklase tša go gatelela

Fetiša moelelo ka mmala ka seatla se se tletšego sa diklase tša go gatelela tša mohola.

Fusce dapibus, tellus ac go rogama komodo, tortor mauris nibh.

Etiam porta sem malesuada ea mollis euismod.

Donec ullamcorper lefeela bao e sego metus auctor fringilla.

Aenean eu leo ​​quam. Pellentesque e kgabišwa ke sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat ligula ya go rwala dithoto.

  1. <p sehlopha = "e kgaoditšwego" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "temošo ya sengwalwa" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p sehlopha = "phošo ya sengwalwa" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p sehlopha = "sengwalwa-tshedimošo" > Aenean eu leo ​​quam. Pellentesque e kgabišwa ke sem lacinia quam venenatis. </p> 
  5. <p sehlopha = "katlego ya sengwalwa" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Dikhutsofatšo

Stylized phethagatšo ya HTML ya <abbr>elemente bakeng sa dikgutsufatšo le acronyms ho bontša atoloswa phetolelo ka hover. Dikhutsofatšo tše di nago le titleseka di na le mollwane wa ka fase wa marontho a bofefo le khesara ya thušo ge e le hover, e fa seemo sa tlaleletšo ge e le hover.

<abbr>

Bakeng sa sengwalwa se se katološitšwego ka go hover ye telele ya khutsufatšo, akaretša titleseka.

Khutsufatšo ya seka sa lentšu ke attr .

<abbr sehlogo = "seka" > attr </abbr>

<abbr class="initialism">

Oketša .initialismgo khutsofatšo ya bogolo bja fonte bjo bonyenyane go se nene.

HTML ke selo se sebotse kudu ga e sa le go tloga ka bogobe bjo bo segilwego.

<abbr title = "Polelo ya go Swaya ya Sengwalwa sa go Feta" class = "go thoma" > HTML </abbr>

Diaterese

Hlagiša tshedimošo ya kgokagano ya rakgolokhukhu wa kgauswi goba mmele ka moka wa mošomo.

<address>

Boloka go fometa ka go fediša methalo ka moka ka <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, C. A. 94107
P: (123) 456-7890. Ke batla go nyoba nnyo e kgolo ya monate ya mosadi wa go tseba go nyobana wa go rata go nyobana mo
Lebitso
le feletseng [email protected] 
  1. <aterese>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr sehlooho = "Mohala" > P: </abbr> (123) 456-7890 
  6. </aterese>
  7.  
  8. <aterese>
  9.   <strong> Leina ka botlalo </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </aterese>

Ditsopolwa tša go thibela

Bakeng sa go tsopola diboloko tša diteng go tšwa mothopong wo mongwe ka gare ga tokumente ya gago.

Setsopolwa sa go thibela sa tlwaelo

Phuthelela HTML<blockquote> efe goba efe bjalo ka setsopolwa. Bakeng sa ditsopolwa tše di otlologilego re kgothaletša a .<p>

Lorem ipsum dolor lula amet, consectetur adipiscing elit. Palo e feletseng posuere erat a ante.

  1. <setsopolwa sa go thibela>
  2.   <p> Lorem ipsum dolor dula amet, kgethehileng ya madipiscing elit. Palo e feletseng posuere erat a ante. </p>
  3. </blockquote> ya go tswalela

Dikgetho tša go thibela

Diphetogo tša setaele le diteng bakeng sa diphetogo tše bonolo go blockquote ya maemo.

Go reela mothopo leina

Oketša <small>tag bakeng sa go hlaola mothopo. Phuthelela leina la mošomo wa mothopo ka go <cite>.

Lorem ipsum dolor lula amet, consectetur adipiscing elit. Palo e feletseng posuere erat a ante.

Motho yo a tumilego ka go Source Title 
  1. <setsopolwa sa go thibela>
  2.   <p> Lorem ipsum dolor dula amet, kgethehileng ya madipiscing elit. Palo e feletseng posuere erat a ante. </p>
  3.   <small> Motho yo a tumilego <cite title = "Sehlogo sa Mothopo" > Sehlogo sa Mothopo </cite></small> 
  4. </blockquote> ya go tswalela

Dipontšho tše dingwe

Šomiša .pull-rightbakeng sa blockquote ye e phaphametšego, ye e logaganywago ka go le letona.

Lorem ipsum dolor lula amet, consectetur adipiscing elit. Palo e feletseng posuere erat a ante.

Motho yo a tumilego ka go Source Title 
  1. <blockquote sehlopha = "hula-tokelo" > 
  2.   ...
  3. </blockquote> ya go tswalela

Mananeo

E sa laelwago

Lenaneo la dilo tšeo go tšona tatelano e se nago taba ka go lebanya.

  • Lorem ipsum dolor dula amet
  • Consectetur adipiscing ya maemo a godimo
  • Palo e feletseng molestie lorem ka massa
  • Facilisis ka pretium nisl aliquet
  • Nulla volutpat aliquam ya go swana le yona
    • Phasellus iaculis ya go swana le yona
    • Purus sodales di-ultricies
    • Vestibulum laoreet ya go rwala dithoto sem
    • A k tristique libero volutpat ka
  • Faucibus porta lacus e le 'ngoe e le 'ngoe
  • Aenean dula amet erat nunc
  • Eget porttitor lorem ya go rwala dilo
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

E laetšwe

Lenaneo la dilo tšeo go tšona tatelano e lego bohlokwa ka go lebanya.

  1. Lorem ipsum dolor dula amet
  2. Consectetur adipiscing ya maemo a godimo
  3. Palo e feletseng molestie lorem ka massa
  4. Facilisis ka pretium nisl aliquet
  5. Nulla volutpat aliquam ya go swana le yona
  6. Faucibus porta lacus e le 'ngoe e le 'ngoe
  7. Aenean dula amet erat nunc
  8. Eget porttitor lorem ya go rwala dilo
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

E sa setaele

Tlosa default list-stylele letšehali padding ka dintho lenane (bana ba hang-hang feela).

  • Lorem ipsum dolor dula amet
  • Consectetur adipiscing ya maemo a godimo
  • Palo e feletseng molestie lorem ka massa
  • Facilisis ka pretium nisl aliquet
  • Nulla volutpat aliquam ya go swana le yona
    • Phasellus iaculis ya go swana le yona
    • Purus sodales di-ultricies
    • Vestibulum laoreet ya go rwala dithoto sem
    • A k tristique libero volutpat ka
  • Faucibus porta lacus e le 'ngoe e le 'ngoe
  • Aenean dula amet erat nunc
  • Eget porttitor lorem ya go rwala dilo
  1. <ul sehlopha = "e sa setaele" > 
  2.   <li> ... </li>
  3. </ul>

Ka gare ga mothaladi

Bea dilo ka moka tša lenaneo mothalong o tee ka inline-blockle padding ye nngwe ya seetša.

  • Lorem ipsum ya go swana le yona
  • Phasellus ya go swana le yona
  • Nula volutpat
  1. <ul sehlopha = "inline" > 
  2.   <li> ... </li>
  3. </ul>

Tlhalošo

Lenaneo la mareo le ditlhaloso tša ona tše di sepedišanago le ona.

Mananeo a tlhaloso
Lenaneo la tlhalošo le phethagetše bakeng sa go hlaloša mareo.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit e seng mi porta gravida ka eget metus.
Malesuada porta ya go tswalela
Etiam porta sem malesuada ea mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl> e

Tlhaloso e rapameng

Dira mareo le ditlhalošo ka <dl>mothalong godimo ka thoko.

Mananeo a tlhaloso
Lenaneo la tlhalošo le phethagetše bakeng sa go hlaloša mareo.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit e seng mi porta gravida ka eget metus.
Malesuada porta ya go tswalela
Etiam porta sem malesuada ea mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa feela dula amet risus. 
  1. <dl sehlopha = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl> e

Dihlogo godimo!Mananeo a tlhalošo ya go rapalala a tla kgaola mareo ao a lego matelele kudu go ka tsena ka gare ga tokiso ya kholomo ya nngele text-overflow. Ka go dipono tša go lebelela tše tshesane, di tla fetogela go peakanyo ya go kgoboketšwa ya go se fetoge.

Khoutu ya

Ka gare ga mothaladi

Phuthelela dikarolwana tša ka gare ga mothaladi tša khoutu ka <code>.

Ka mohlala, <section>e swanetše go phuthelwa bjalo ka inline. 
  1. Mohlala , < khoutu> & lt ; karolo & gt ;</ khoutu > e swanetše go phuthelwa bjalo ka ka gare ga mothaladi .

Bloko ya motheo

Šomiša <pre>bakeng sa mela e mentši ya khoutu. Kgonthiša gore o tšhaba maswaodikga afe goba afe a khutlo ka khoutung bakeng sa phetolelo e swanetšego.

<p>Mohlala wa sengwalwa mo...</p>
  1. <pele>
  2.   <p>Mohlala wa sengwalwa mo...</p>
  3. </pre>

Dihlogo godimo!Kgonthiša gore o boloka khoutu ka gare ga <pre>dithepo kgauswi le ka go le letshadi ka mo go kgonegago; e tla fetolela dithepo ka moka.

O ka boikgethelo eketsa .pre-scrollablesehlopha seo se tla beha max-bophahamo ba 350px le fana ka y-axis scrollbar.

Ditafola

Ditaele tša go se fetoge

Bakeng sa setaele sa motheo—go tlatša seetša le dikarolo tše di rapaletšego feela—okeletša sehlopha sa motheo .tablego selo le ge e le sefe <table>.

# . Leina Sefane Lebitso la mosebedisi
1. 1. Mareka Otto o ile a re @mdo
2. Jakobo Thornton o ile a hlokomela @lekhura
3. Larry o ile a re Nonyana @ twitter e le 
  1. < sehlopha sa tafole = "tafole" > 
  2.   ...
  3. </tafola>

Diklase tša boikgethelo

Oketša efe goba efe ya diklase tše di latelago go .tablesehlopha sa motheo.

.table-striped

E tlaleletša zebra-striping go mola ofe goba ofe wa tafola ka gare ga <tbody>ka :nth-childmokgethi wa CSS (ga e hwetšagale go IE7-8).

# . Leina Sefane Lebitso la mosebedisi
1. 1. Mareka Otto o ile a re @mdo
2. Jakobo Thornton o ile a hlokomela @lekhura
3. Larry o ile a re Nonyana @ twitter e le 
  1. <tafole sehlopha = "tafole tafole-methalo" > 
  2.   ...
  3. </tafola>

.table-bordered

Oketša mellwane le dikhutlo tše di kgokologilego tafoleng.

# . Leina Sefane Lebitso la mosebedisi
1. 1. Mareka Otto o ile a re @mdo
Mareka Otto o ile a re @getbootstrap ya go thoma
2. Jakobo Thornton o ile a hlokomela @lekhura
3. Larry ya Nonyana @ twitter e le 
  1. <tafole sehlopha = "tafole tafole-bordered" > 
  2.   ...
  3. </tafola>

.table-hover

Kgontšha seemo sa go hover go methaladi ya tafola ka gare ga <tbody>.

# . Leina Sefane Lebitso la mosebedisi
1. 1. Mareka Otto o ile a re @mdo
2. Jakobo Thornton o ile a hlokomela @lekhura
3. Larry ya Nonyana @ twitter e le 
  1. <tafole sehlopha = "tafole tafole-hover" > 
  2.   ...
  3. </tafola>

.table-condensed

E dira gore ditafola di kopane kudu ka go sega padding ya disele ka bogare.

# . Leina Sefane Lebitso la mosebedisi
1. 1. Mareka Otto o ile a re @mdo
2. Jakobo Thornton o ile a hlokomela @lekhura
3. Larry ya Nonyana @ twitter e le 
  1. <tafole sehlopha = "tafole tafole-condensed" > 
  2.   ...
  3. </tafola>

Diklase tša mothaladi tša boikgethelo

Šomiša diklase tša diteng go mebala methalo ya tafola.

Phapoši Tlhalošo
.success E laetša tiro ye e atlegilego goba ye botse.
.error E bontšha tiro e kotsi goba yeo e ka bago e mpe.
.warning E bontšha temošo yeo e ka nyakago tlhokomelo.
.info E šomišwa bjalo ka selo se sengwe go ditaele tša go se fetoge.
# . Setšweletšwa Tefo e Tšetšwe Maemo
1. 1. TB - Kgwedi le kgwedi 01/04/2012 ya go tswalela Dumeletšwe
2. TB - Kgwedi le kgwedi 02/04/2012 ya go tswalela E ile ya gana
3. TB - Kgwedi le kgwedi 03/04/2012 ka la Letetšwe
4. TB - Kgwedi le kgwedi 04/04/2012 e ile ya re Letša mogala go tiišetša 
  1. ...
  2.   < tr sehlopha = "katleho" >
  3.     <td> 1 < /td>
  4.     <td>TB - Kgwedi le kgwedi</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>E dumeletšwe</ td >
  7.   </ tr > e
  8. ...

Go swaya tafola mo go thekgwago

Lenaneo la dielemente tša HTML tša tafola tše di thekgwago le ka fao di swanetšego go šomišwa ka gona.

Theke Tlhalošo
<table> Elemente ya go phuthela ya go bontšha datha ka sebopego sa tafola
<thead> Elemente ya setshelo ya mela ya hlogo ya tafola ( <tr>) go swaya dikholomo ta tafola
<tbody> Elemente ya setshelo bakeng sa mela ya tafola ( <tr>) mmeleng wa tafola
<tr> Elemente ya setshelo ya sete ya disele tša tafola ( <td>goba <th>) yeo e tšwelelago mothalong o tee
<td> Sele ya tafola ya tlwaelo
<th> Sele ya tafola ye e kgethegilego ya dileibole tša kholomo (goba mothalo, go ya ka sebaka le go bewa).
<caption> Tlhaloso goba kakaretšo ya seo tafola e se swerego, kudukudu se se nago le mohola go babadi ba skrine 
  1. <tafola>
  2.   <tlhalošo> ... </tlhalošo>
  3.   <hlogo>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </thlogo>
  9.   <motho>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </tafola>

Diforomo

Ditaele tša go se fetoge

Ditaolo tša foromo ya motho ka noši di amogela setaele, eupša ntle le sehlopha sefe goba sefe se se nyakegago sa motheo godimo ga <form>goba diphetogo tše kgolo tša go swaya. Diphetho ka dileibole tše di kgobokeditšwego, tše di logaganywago ka go le letshadi godimo ga ditaolo tša foromo.

Nonwane Mohlala wa sengwalwa sa thušo sa maemo a boloko mo. 
  1. <fomo>
  2.   <sete ya tšhemo>
  3.     <nonwane> Tšhaba </nonwane>
  4.     <leibole> Leina la leina </leibole>
  5.     < mohuta wa tsenyo = "sengwalwa" seswari sa lefelo = "Tlaepa selo se sengwe ..." >  
  6.     <span class = "help-block" > Mohlala wa sengwalwa sa thušo sa maemo a thibelo mo. </span> 
  7.     <leibole sehlopha = "lepokisi la hlahloba" > 
  8.       <input type = "checkbox" > Ntlhahlobe 
  9.     </leibole>
  10.     < mofuta wa konopo = "romela" sehlopha = "btn" > Romela </konopo>  
  11.   </sete ya tšhemo>
  12. </form>

Dipeakanyo tša boikhethelo

Go akaretšwa le Bootstrap ke dipeakanyo tše tharo tša foromo ya boikhethelo bakeng sa maemo a tšhomišo a tlwaelegilego.

Batla foromo

Oketša .form-searchgo foromo le .search-querygo ya <input>bakeng sa tsenyo ya sengwalwa ye e oketšegilego ya nkgokolo.

  1. < sehlopha sa foromo = "foromo-ya ho batla" > 
  2.   < mohuta wa tsenyo = "sengwalwa" sehlopha = "potšišo ya nyakišišo-ya magareng ya tsenyo" >  
  3.   < mofuta wa konopo = "romela" sehlopha = "btn" > Batla </konopo>  
  4. </form>

Foromo ya ka gare ga mothaladi

Oketša .form-inlinebakeng sa dileibole tše di logaganywago ka go le letshadi le ditaolo tša ka gare ga mothaladi-boloko bakeng sa peakanyo e kopanego.

  1. < sehlopha sa foromo = "foromo-inline" > 
  2.   < mohuta wa tsenyo = "sengwalwa" sehlopha = "tseno-se nnyane" seswari sa lefelo = "Email" >   
  3.   < mohuta wa tsenyo = "phasewete" sehlopha = "tseno-small" sebaka = "Phasewete" >   
  4.   <leibole sehlopha = "lepokisi la hlahloba" > 
  5.     <input type = "checkbox" > Nkgopole 
  6.   </leibole>
  7.   < mofuta wa konopo = "romela" sehlopha = "btn" > Tsena </konopo>  
  8. </form>

Foromo e rapameng

Logaganya dileibole ka gojeng gomme o di phaphametše ka go la nngele go dira gore di tšwelele mothalong o tee le ditaolo. E nyaka diphetogo tše ntši tša go swaya go tšwa go foromo ya go se fetoge:

  • Oketša .form-horizontalgo foromo
  • Phuthelela dileibole le ditaolo ka gare.control-group
  • Oketša .control-labelgo leina
  • Phuthelela ditaolo dife goba dife tše di amanago ka gare .controlsbakeng sa go logaganya gabotse
  1. < sehlopha sa foromo = "sebopeho-se rapameng" > 
  2.   <div sehlopha = "taolo-sehlopha" > 
  3.     <leibole sehlopha = "taolo-leibole" bakeng sa = "inputEmail" > Imeile </label>  
  4.     <div sehlopha = "taolo" > 
  5.       < mohuta wa tsenyo = "sengwalwa" id = "inputEmail" seswari sa lefelo = "Email" >   
  6.     </div> e
  7.   </div> e
  8.   <div sehlopha = "taolo-sehlopha" > 
  9.     <label class = "taolo-leibole" bakeng sa = "inputPassword" > Phasewete </label>  
  10.     <div sehlopha = "taolo" > 
  11.       < mohuta wa tsenyo = "phasewete" id = "phasewete ya tsenyo" placeholder = " Phasewete" >   
  12.     </div> e
  13.   </div> e
  14.   <div sehlopha = "taolo-sehlopha" > 
  15.     <div sehlopha = "taolo" > 
  16.       <leibole sehlopha = "lepokisi la hlahloba" > 
  17.         <input type = "checkbox" > Nkgopole 
  18.       </leibole>
  19.       < mofuta wa konopo = "romela" sehlopha = "btn" > Tsena </konopo>  
  20.     </div> e
  21.   </div> e
  22. </form>

Ditaolo tša foromo tše di thekgwago

Mehlala ya ditaolo tša foromo ya maemo tšeo di thekgwago ka go peakanyo ya foromo ya mohlala.

Ditseno

Taolo ya foromo ye e tlwaelegilego kudu, mafelo a tsenyo ao a theilwego godimo ga sengwalwa. E akaretša thekgo ya mehuta ka moka ya HTML5: sengwalwa, phasewete, nako ya letšatšikgwedi, nako ya letšatšikgwedi-ya selegae, letšatšikgwedi, kgwedi, nako, beke, nomoro, imeile, url, nyakišišo, tel, le mmala.

E nyaka tšhomišo ya e boletšwego typeka dinako tšohle.

  1. < mohuta wa tsenyo = "sengwalwa" seswari sa lefelo = "Tsenyo ya sengwalwa" >

Lefelo la sengwalwa

Taolo ya foromo yeo e thekgago methalo ye mentši ya sengwalwa. Fetoša rowsseka ge go nyakega.

  1. < mela ya lefelo la sengwalwa = "3" ></lefelo la sengwalwa>

Mapokisi a go hlahloba le diradio

Mapokisi a go hlahloba ke a go kgetha kgetho e tee goba tše mmalwa lenaneong mola diradio e le tša go kgetha kgetho e tee go tšwa go tše dintši.

Default (e kgobokeditšwe) .


  1. <leibole sehlopha = "lepokisi la hlahloba" > 
  2.   < mohuta wa tsenyo = "lepokisi la go hlahloba" boleng = "" >  
  3.   Kgetho ya pele ke ye le yeo—kgonthišetša gore o akaretša lebaka leo ka lona e lego e kgolo
  4. </leibole>
  5.  
  6. <leibole sehlopha = "radio" > 
  7.   < mohuta wa tsenyo = "radio" leina = "diradio tša dikgetho" id = "diradio tša dikgetho1" boleng = "kgetho1" e hlahlobja >     
  8.   Kgetho ya pele ke ye le yeo—kgonthišetša gore o akaretša lebaka leo ka lona e lego e kgolo
  9. </leibole>
  10. <leibole sehlopha = "radio" > 
  11.   < mohuta wa tsenyo = "radio" leina = "dikgethoDiradio" id = "dikgethoDiradio2" boleng = "kgetho2" >    
  12.   Kgetho ya bobedi e ka ba selo se sengwe gomme go se kgetha go tla tloša kgetho ya pele
  13. </leibole>

Mapokisi a go hlahloba ka gare ga mothaladi

Oketša .inlinesehlopha go lelokelelo la mapokisi a go hlahloba goba diradio bakeng sa ditaolo di tšwelela mothalong o tee.

  1. <leibole sehlopha = "lepokisi la hlahloba ka moleng" > 
  2.   < mohuta wa tsenyo = "lepokisi la go hlahloba" id = "inlineCheckbox1" boleng = "kgetho1" > 1   
  3. </leibole>
  4. <leibole sehlopha = "lepokisi la hlahloba ka moleng" > 
  5.   < mohuta wa tsenyo = "lepokisi la go hlahloba" id = "inlineCheckbox2" boleng = "kgetho2" > 2   
  6. </leibole>
  7. <leibole sehlopha = "lepokisi la hlahloba ka moleng" > 
  8.   < mohuta wa tsenyo = "lepokisi la go hlahloba" id = "inlineCheckbox3" boleng = "kgetho3" > 3   
  9. </leibole>

E kgetha

Šomiša kgetho ya go se fetoge goba o laetše a multiple="multiple"go bontšha dikgetho tše ntši ka nako e tee.


  1. <kgetha>
  2.   <kgetho> 1 </kgetho>
  3.   <kgetho> 2 </kgetho>
  4.   <kgetho> 3 </kgetho>
  5.   <kgetho> 4 </kgetho>
  6.   <kgetho> 5 </kgetho>
  7. </kgetha>
  8.  
  9. <kgetha bontši = "bontši" > 
  10.   <kgetho> 1 </kgetho>
  11.   <kgetho> 2 </kgetho>
  12.   <kgetho> 3 </kgetho>
  13.   <kgetho> 4 </kgetho>
  14.   <kgetho> 5 </kgetho>
  15. </kgetha>

Go katološa ditaolo tša foromo

Go tlaleletša godimo ga ditaolo tša sephephediši tše di lego gona, Bootstrap e akaretša dikarolo tše dingwe tša foromo tše di nago le mohola.

Ditseno tše di emišitšwego pele le tše di tlaleleditšwego

Oketša sengwalwa goba dikonope pele goba ka morago ga tsenyo efe goba efe ye e theilwego godimo ga sengwalwa. Ela hloko gore selectdielemente ga di thekgwe mo.

Dikgetho tša go se fetoge

Phuthelela an .add-onle an inputka ye nngwe ya diklase tše pedi go tsenya pele goba go tlaleletša sengwalwa go tsenyo.

@

.00 e le 
  1. <div sehlopha = "input-prepend" > 
  2.   <span sehlopha = "tlaleletšo" > @ </span> 
  3.   < sehlopha sa tsenyo = "span2" id = "prependedInput" mofuta = "sengwalwa" setshwantsho sa sebaka = "Lebitso la mosebedisi" >    
  4. </div> e
  5. <div sehlopha = "tseno-eketsa" > 
  6.   <input sehlopha = "span2" id = "appendedInput" mofuta = "sengwalwa" >   
  7.   <span sehlopha = "tlaleletšo" > .00 </span> 
  8. </div> e

E kopantšwe

Šomiša diklase ka bobedi le ditiragalo tše pedi tša .add-ongo tsenya pele le go tlaleletša tsenyo.

$ .00 e le 
  1. <div class = "tsenyo-prepend tsenyo-eketsa" > 
  2.   <span sehlopha = "tlaleletšo" > $ </span> 
  3.   <input sehlopha = "span2" id = "appendedPrependedInput" mofuta = "sengwalwa" >   
  4.   <span sehlopha = "tlaleletšo" > .00 </span> 
  5. </div> e

Dikonope go e na le sengwalwa

Go e na le a <span>ka sengwalwa, šomiša a .btngo kgomaretša konope (goba tše pedi) go tsenyo.

  1. <div sehlopha = "tseno-eketsa" > 
  2.   < sehlopha sa tsenyo = "span2" id = "Konopo ya Tsenyo e tlaleleditšwego" mohuta = "sengwalwa" >   
  3.   < sehlopha sa konopo = "btn" mofuta = "konopo" > Eya! </konope>  
  4. </div> e
  1. <div sehlopha = "tseno-eketsa" > 
  2.   < sehlopha sa tsenyo = "span2" id = "Dikonope tša Tsenyo tše di okeditšwego" mohuta = "sengwalwa" >   
  3.   < sehlopha sa konopo = "btn" mofuta = "konopo" > Batla </konopo>  
  4.   < sehlopha sa konopo = "btn" mofuta = "konopo" > Dikgetho </konopo>  
  5. </div> e

Dithepo tša go theoga tša konope

  1. <div sehlopha = "tseno-eketsa" > 
  2.   < sehlopha sa tsenyo = "span2" id = "e tlaleleditšwegoDropdownButton" mohuta = "sengwalwa" >   
  3.   <div sehlopha = "btn-sehlopha" > 
  4.     < sehlopha sa konopo = "btn dropdown-toggle" ya data-toggle = "dropdown" >  
  5.       Kgato
  6.       <span sehlopha = "caret" </span> 
  7.     </konope>
  8.     <ul sehlopha = "thepo ya go theoga" > 
  9.       ...
  10.     </ul>
  11.   </div> e
  12. </div> e
  1. <div sehlopha = "input-prepend" > 
  2.   <div sehlopha = "btn-sehlopha" > 
  3.     < sehlopha sa konopo = "btn dropdown-toggle" ya data-toggle = "dropdown" >  
  4.       Kgato
  5.       <span sehlopha = "caret" </span> 
  6.     </konope>
  7.     <ul sehlopha = "thepo ya go theoga" > 
  8.       ...
  9.     </ul>
  10.   </div> e
  11.   < sehlopha sa tsenyo = "span2" id = "prependedDropdownButton" mofuta = "sengwalwa" >   
  12. </div> e
  1. <div class = "tsenyo-prepend tsenyo-eketsa" > 
  2.   <div sehlopha = "btn-sehlopha" > 
  3.     < sehlopha sa konopo = "btn dropdown-toggle" ya data-toggle = "dropdown" >  
  4.       Kgato
  5.       <span sehlopha = "caret" </span> 
  6.     </konope>
  7.     <ul sehlopha = "thepo ya go theoga" > 
  8.       ...
  9.     </ul>
  10.   </div> e
  11.   <input sehlopha = "span2" id = "appendedPrependedDropdownButton" mofuta = "sengwalwa" >   
  12.   <div sehlopha = "btn-sehlopha" > 
  13.     < sehlopha sa konopo = "btn dropdown-toggle" ya data-toggle = "dropdown" >  
  14.       Kgato
  15.       <span sehlopha = "caret" </span> 
  16.     </konope>
  17.     <ul sehlopha = "thepo ya go theoga" > 
  18.       ...
  19.     </ul>
  20.   </div> e
  21. </div> e

Dihlopha tša go theoga tše di arotšwego ka dikarolo

  1. <fomo>
  2.   <div sehlopha = "input-prepend" > 
  3.     <div sehlopha = "btn-sehlopha" > ... </div> 
  4.     < mohuta wa tsenyo = "sengwalwa" > 
  5.   </div> e
  6.   <div sehlopha = "tseno-eketsa" > 
  7.     < mohuta wa tsenyo = "sengwalwa" > 
  8.     <div sehlopha = "btn-sehlopha" > ... </div> 
  9.   </div> e
  10. </form>

Batla foromo

  1. < sehlopha sa foromo = "foromo-ya ho batla" > 
  2.   <div sehlopha = "tseno-eketsa" > 
  3.     < mohuta wa tsenyo = "sengwalwa" sehlopha = "span2 nyakišišo-potšišo" >  
  4.     < mofuta wa konopo = "romela" sehlopha = "btn" > Batla </konopo>  
  5.   </div> e
  6.   <div sehlopha = "input-prepend" > 
  7.     < mofuta wa konopo = "romela" sehlopha = "btn" > Batla </konopo>  
  8.     < mohuta wa tsenyo = "sengwalwa" sehlopha = "span2 nyakišišo-potšišo" >  
  9.   </div> e
  10. </form>

Laola go lekanyetša bogolo

Šomiša diklase tša go lekanyetša bogolo go swana le .input-largegoba go nyalelanya ditseno tša gago go bogolo bja dikholomo tša keriti o šomiša .span*diklase.

Ditshenyegelo tša maemo a go thibela

Dira gore efe goba efe <input>goba <textarea>elemente e itshware bjalo ka elemente ya maemo a boloko.

  1. <input class = "input-block-maemo" mofuta = "sengwalwa" placeholder = ".input-block-maemo" >

Go lekanyetša bogolo

  1. <input sehlopha = "input-mini" mofuta = "sengwalwa" sebaka = ".input-mini" >   
  2. <input class = "input-small" type = "sengwalwa" seswari sa lefelo = ".input-small" >   
  3. <input class = "input-medium" mohuta = "sengwalwa" seswari sa lefelo = ".input-medium" >   
  4. <input class = "input-kgolo" mohuta = "sengwalwa" placeholder = ".input-kgolo" >   
  5. <input class = "input-xlarge" mohuta = "sengwalwa" seswari sa lefelo = ".input-xlarge" >   
  6. <input class = "input-xxlarge" mohuta = "sengwalwa" seswari sa lefelo = ".input-xxlarge" >

Dihlogo godimo!Diphetolelong tša ka moso, re tla be re fetoša tšhomišo ya diklase tše tša go tsenya tša go lekana go swana le bogolo bja rena bja dikonope. Ka mohlala, .input-largetla eketsa padding le fonte-boholo ba input.

Go lekanyetša bogolo bja keriti

Šomiša .span1go .span12bakeng sa ditseno tšeo di swanago le bogolo bjo bo swanago bja dikholomo tša keriti.

  1. < sehlopha sa tsenyo = "span1" mofuta = "sengwalwa" seswari sa sebaka = ".span1" >   
  2. < sehlopha sa tsenyo = "span2" mofuta = "sengwalwa" seswari sa sebaka = ".span2" >   
  3. < sehlopha sa tsenyo = "span3" mofuta = "sengwalwa" seswari sa sebaka = ".span3" >   
  4. <khetha sehlopha = "span1" > 
  5.   ...
  6. </kgetha>
  7. <khetha sehlopha = "span2" > 
  8.   ...
  9. </kgetha>
  10. <khetha sehlopha = "span3" > 
  11.   ...
  12. </kgetha>

Bakeng sa ditseno tše ntši tša keriti ka mola, šomiša .controls-rowsehlopha sa sefetoši bakeng sa sekgoba sa maleba . E phaphamala ditseno go phuhlama white-space, e beakanya mapheko a maleba, gomme e hlatswa float.

  1. <div sehlopha = "taolo" > 
  2.   < sehlopha sa tsenyo = "span5" mofuta = "sengwalwa" seswari sa sebaka = ".span5" >   
  3. </div> e
  4. <div sehlopha = "taolo taolo-mola" > 
  5.   < sehlopha sa tsenyo = "span4" mofuta = "sengwalwa" seswari sa sebaka = ".span4" >   
  6.   < sehlopha sa tsenyo = "span1" mofuta = "sengwalwa" seswari sa sebaka = ".span1" >   
  7. </div> e
  8. ...

Ditseno tše di sa rulaganywago

Hlagiša ya data ka foromo yeo e sa rulaganywego ntle le go šomiša go swaya foromo ya nnete.

Ba bangwe ba tšeela godimo mo 
  1. <span class = "input-xlarge uneditable-input" > Boleng bjo bongwe mo </span>

Bopa ditiro

Fediša foromo ka sehlopha sa ditiro (dikonope). Ge e beilwe ka gare ga .form-actions, dikonope di tla tsena ka go iketla go lokela le ditaolo tša foromo.

  1. <div sehlopha = "foromo-ditiro" > 
  2.   < mohuta wa konope = "romela" sehlopha = "btn btn-primary" > Boloka diphetogo </konope>  
  3.   < mohuta wa konope = "konope" sehlopha = "btn" > Khansela </konope>  
  4. </div> e

Sengwalwa sa thušo

Thekgo ya maemo a ka gare le a thibelo ya sengwalwa sa thušo seo se tšwelelago go dikologa ditaolo tša foromo.

Thušo ya ka gare ga mothaladi

Sengwalwa sa thušo sa ka gare ga mothaladi 
  1. < mohuta wa tsenyo = "sengwalwa" ><span class = "thušo-ka gare ga mothaladi" > Sengwalwa sa thušo sa ka gare ga mothaladi </span>

Thibela thušo

Bloko ye telele ya sengwalwa sa thušo seo se thubago mothalong wo mofsa gomme se ka atologela go feta mothaladi o tee. 
  1. <input type = "text" ><span class = "help-block" > Thibelo ye telele ya sengwalwa sa thušo yeo e thubago godimo ga mothaladi wo mofsa gomme e ka atologela go feta mola o tee. </span>

Foromo taolo e re

Fana ka ditshwaotshwao go badiriši goba baeti ka dipolelo tša motheo tša ditshwaotshwao ka ga ditaolo tša foromo le dileibole.

Tsenyo ya go tsepamiša kgopolo

Re tloša outlinemekgwa ya go se fetoge go ditaolo tše dingwe tša foromo gomme re diriša a box-shadowlegatong la yona bakeng sa :focus.

  1. <input class = "input-xlarge" id = "focusedInput" mohuta = "sengwalwa" boleng = "Se se tsepame ..." >

Ditseno tše di sa šomego

Ditseno tša setaele ka mošomo wa sephephediši sa go se fetoge ka :invalid. Laetša a type, oketša requiredseka ge e le gore tšhemo ga se ya boikgethelo, gomme (ge e le gore e a šoma) laetša a pattern.

Se ga se hwetšagale ka diphetolelong tša Internet Explorer 7-9 ka lebaka la go hloka thekgo ya bakgethi ba maaka ba CSS.

  1. < sehlopha sa tsenyo = "span3" mofuta = "imeile" e hlokehang >

Ditseno tše di golofetšego

Oketša disabledseka godimo ga tsenyo go thibela tsenyo ya modiriši le go hlohleletša ponagalo ye e fapanego gannyane.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Tsenyo e šitišitšwego mo..." e šitišitšwe >

Netefatšo e bolela

Bootstrap e akaretša mekgwa ya netefatšo ya phošo, temošo, tshedimošo, le melaetša ya katlego. Go diriša, oketša sehlopha se se swanetšego go seo se dikologilego .control-group.

Se sengwe se ka ba se ile sa sepele gabotse
Hle lokiša phošo yeo
Lebitso la mosebedisi le nkiloe
Woohoo! 
  1. <div class = "temošo ya sehlopha sa taolo" > 
  2.   <label class = "control-label" for = "inputWarning" > Tsenya ka temošo </label>  
  3.   <div sehlopha = "taolo" > 
  4.     < mohuta wa tsenyo = "sengwalwa" id = "Tlhokomedišo ya tsenyo" >  
  5.     <span class = "help-inline" > Se sengwe se ka ba se ile sa sepele gabotse </span> 
  6.   </div> e
  7. </div> e
  8.  
  9. <div class = "phošo ya sehlopha sa taolo" > 
  10.   <label class = "taolo-leibole" bakeng sa = "inputError" > Tsenya ka phoso </label>  
  11.   <div sehlopha = "taolo" > 
  12.     < mohuta wa tsenyo = "sengwalwa" id = "Phošo ya tsenyo" >  
  13.     <span class = "thušo-inline" > Hle lokiša phošo </span> 
  14.   </div> e
  15. </div> e
  16.  
  17. <div sehlopha = "taolo-sehlopha info" > 
  18.   <label class = "taolo-leibole" bakeng sa = "inputInfo" > Tsenya ka info </label>  
  19.   <div sehlopha = "taolo" > 
  20.     < mohuta wa tsenyo = "sengwalwa" id = "TsenyoInfo" >  
  21.     <span class = "thušo-inline" > Leina la mosediriši le šetše le tšerwe </span> 
  22.   </div> e
  23. </div> e
  24.  
  25. <div class = "katlego ya sehlopha sa taolo" > 
  26.   <label class = "taolo-leibole" bakeng sa = "inputSuccess" > Tsenyo ka katleho </label>  
  27.   <div sehlopha = "taolo" > 
  28.     < mohuta wa tsenyo = "sengwalwa" id = "Katlego ya tsenyo" >  
  29.     <span class = "thušo-inline" > Woohoo! </span> 
  30.   </div> e
  31. </div> e

Dikonope

Dikonope tša go se fetoge

Ditaele tša konope di ka dirišwa go selo se sengwe le se sengwe ka .btnsehlopha se se dirišitšwego. Le ge go le bjalo, ka tlwaelo o tla nyaka go diriša tše go fela <a>le <button>dielemente bakeng sa phetolelo ye kaone.

Kunope sehlopha="" Tlhalošo
btn Standard bohlooho konopo le gradient
btn btn-primary E fana ka boima bjo bo oketšegilego bja pono gomme e hlaola tiro ya mathomo ka sete ya dikonope
btn btn-info E šomišwa bjalo ka selo se sengwe go ditaele tša go se fetoge
btn btn-success E laetša tiro ye e atlegilego goba ye botse
btn btn-warning E laetša gore tlhokomelo e swanetše go tšewa ka kgato ye
btn btn-danger E bontšha tiro e kotsi goba yeo e ka bago e mpe
btn btn-inverse Fapantšha konope ya bohlokwa bjo bo fifetšego, e sego go tlemiwa go tiro ya semantiki goba tšhomišo
btn btn-link Gatelela konope ka go dira gore e bonagale bjalo ka kgokagano mola o boloka boitshwaro bja konope

Cross sephephediši go sepelelana

IE9 ga e bjale dikelo tša ka morago dikhutlong tše di kgokologilego, ka fao re e tloša. E amana, IE9 e jankifies buttondielemente tše di golofetšego, e fetolela sengwalwa se se bohlokwa ka sengwalwa-moriti wo o šišimišago wo re ka se kgonego go o lokiša.

Bogolo bja dikonope

Fancy dikonope tše kgolo goba tše nnyane? Oketša .btn-large, .btn-small, goba .btn-minibakeng sa bogolo bjo bo oketšegilego.

  1. <p>
  2.   <button class = "btn btn-kgolo btn-primary" mohuta = "konope" > Konopo e kgolo </konopo>  
  3.   < sehlopha sa konopo = "btn btn-kgolo" mofuta = "konopo" > Konopo e kgolo </konopo>  
  4. </p>
  5. <p>
  6.   < sehlopha sa konopo = "btn btn-primary" mofuta = "konopo" > Konopo ya kamehla </konopo>  
  7.   < sehlopha sa konopo = "btn" mofuta = "konopo" > Konopo ya kamehla </konopo>  
  8. </p>
  9. <p>
  10.   < sehlopha sa konopo = "btn btn-e nyenyane btn-ya mantlha" mofuta = "konopo" > Konopo e nyenyane </konopo>  
  11.   < sehlopha sa konopo = "btn btn-small" mofuta = "konopo" > Konopo e nyenyane </konopo>  
  12. </p>
  13. <p>
  14.   < sehlopha sa konopo = "btn btn-mini btn-primary" mofuta = "konopo" > Konopo e nyenyane </konopo>  
  15.   < sehlopha sa konopo = "btn btn-mini" mofuta = "konopo" > Konopo e nyenyane </konopo>  
  16. </p>

Hlama dikonope tša maemo a go thibela—tšeo di akaretšago bophara bjo bo tletšego bja motswadi—ka go oketša .btn-block.

  1. < sehlopha sa konopo = "btn btn-kgolo btn-block btn-primary" mohuta = "konope" > Konopo ya maemo a thibelo </konope>  
  2. < sehlopha sa konopo = "btn btn-kgolo btn-block" mohuta = "konope" > Konopo ya maemo a thibelo </konopo>

Boemo bjo bo golofetšego

Dira gore dikonope di bonagale di sa kgotle ka go di fifala morago 50%.

Ankora elemente

Oketša .disabledsehlopha go <a>dikonope.

Kgokagano ya mathomo Amanya 

  1. <a href = "#" class = "btn btn-kgolo btn-primary e golofetše" > Kgokagano ya mathomo </a>  
  2. <a href = "#" class = "btn btn-kgolo e golofetše" > Kgokagano </a>

Dihlogo godimo!Re šomiša .disabledbjalo ka sehlopha sa utility mo, go swana le .activesehlopha se se tlwaelegilego, ka fao ga go nyakege hlogo ya pele. Le gona, sehlopha se ke sa bothakga feela; o swanetše go diriša JavaScript ya tlwaelo go šitiša dikgokagano mo.

Elemente ya konopo

Oketša disabledseka go <button>dikonope.

  1. < mohuta wa konope = "konope" sehlopha = "btn btn-kgolo btn-primary e šitišitšwe" e šitišitšwe = "e šitišitšwe" > Konopo ya mathomo </konope>   
  2. < mohuta wa konope = "konope" sehlopha = "btn btn-kgolo" e šitišitšwe > Konopo </konope>

Sehlopha se tee, dithegi tše dintši

Šomiša .btnsehlopha godimo ga <a>, <button>, goba <input>elemente.

Amanya 
  1. <a class = "btn" href = "" > Kgokagano </a>  
  2. < sehlopha sa konopo = "btn" mofuta = "romela" > Konopo </konopo>  
  3. <input sehlopha = "btn" mofuta = "konopo" boleng = "Input" >   
  4. <input class = "btn" type = "romela" boleng = "Romela" >

Bjalo ka mokgwa wo mokaone, leka go swantšha elemente ya seemo sa gago go netefatša go swana ga phetolelo ya sefapano sa sephephediši. Ge e ba o na le input, diriša <input type="submit">ya konope ya gago.

Diswantšho

Oketša diklase go <img>elemente go setaele gabonolo diswantšho mo porojekeng efe goba efe.

140x140 e le 140x140 e le 140x140 e le 
  1. <img src = "..." sehlopha = "img-e potolohileng" >  
  2. <img src = "..." sehlopha = "img-sedikadikwe" >  
  3. <img src = "..." sehlopha = "img-polaroid" >

Dihlogo godimo! .img-roundedgomme .img-circlega di šome ka go IE7-8 ka lebaka la go hloka border-radiusthekgo.

Diaekhone ka Glyphicons

Di-glyph tša leswao

Diaekhone tše 140 ka mokgwa wa sprite, di hwetšagala ka bohlooho bjo bo fifetšego (ya tlwaelo) le bošweu, tšeo di filwego ke Glyphicons .

  • letšoao-khalase
  • letshwao-mmino
  • go nyaka leswao
  • letshwao-enfelopo
  • letshwao-pelo
  • letshwao-naledi
  • letšoao-naleli-e se nang letho
  • mosebedisi wa letshwao
  • setšoantšo-filimi
  • letšoao-th-kgolo
  • letšoao-th
  • letšoao-th-lenaneo
  • letšoao-ok
  • letšoao-tlosa
  • leswao-go godiša-ka
  • leswao-go godiša-go fokotša
  • letšoao-tima
  • letshwao-letshwao
  • letšoao-cog
  • letshwao-ditlakala
  • letshwao-gae
  • letšoao-faele
  • letshwao-nako
  • letšoao-tsela
  • letšoao-download-alt
  • letšoao-download
  • go tsenya leswao
  • lepokisi la letshwao
  • letšoao-bapala-sedikadikwe
  • letšoao-pheta
  • go hlabolla leswao
  • lenane la letshwao-alt
  • letšoao-notlolo
  • letšoao-folaga
  • di-headphone tša leswao
  • letšoao-bolumo-tima
  • letšoao-bolumo-fatše
  • leswao-bolumo-godimo
  • letšoao-qrcode
  • letšoao-barcode
  • letšoao-tag
  • ditshwantsho-dithegi
  • puku ya diswantšho
  • letshwao-letshwao la buka
  • go gatiša ka leswao
  • letšoao-khamera
  • letšoao-fonte
  • letšoao-bold
  • letšoao-sekametseng
  • leswao-sengwalwa-bophagamo
  • letshwao-sengwalwa-bophara
  • letšoao-lolaganya-letsohong le letšehali
  • letšoao-lolaganya-bohareng
  • letšoao-lolaganya-tokelo
  • letšoao-lolaganya-lokafatsa
  • lenane la matšoao
  • letšoao-indent-le letšehali
  • letšoao-indent-tokelo ya
  • letšoao-sefahlehonako-bidio
  • letšoao-setšoantšo
  • letshwao-phensele
  • leswao-mapa-leswao
  • letšoao-fetola
  • letšoao-tint
  • letšoao-edita
  • letšoao-arolelana
  • letshwao-hlahloba
  • letshwao-šutha
  • letšoao-mohato-morao
  • letšoao-ka potlako-morao
  • letšoao-morao
  • letshwao-bapala
  • go khutša ka leswao
  • letšoao-ema
  • letšoao-pele
  • letšoao-ka potlako-pele
  • letšoao-kgato-pele
  • letšoao-eject
  • letšoao-chevron-le letšehali
  • letšoao-chevron-tokelo ya
  • leswao-gotee le leswao
  • leswao-go tloša-leswao
  • letšoao-tlosa-letšoao
  • letšoao-ok-letšoao
  • leswao-potšišo-leswao
  • letšoao-tshedimosetso-letshwao
  • letšoao-screenshot
  • letšoao-tlosa-sedikadikwe
  • letšoao-ok-sedikadikwe
  • letšoao-thibelo-sedikadikwe
  • letšoao-motsu-le letšehali
  • letšoao-motsu-le letona
  • leswao-motsu-godimo
  • letšoao-motsu-fatše
  • letšoao-arolelana-alt
  • letšoao-fetola boholo-tletse
  • letšoao-fetola-boholo-nyenyane
  • leswao-gotee le
  • leswao-go tloša
  • letshwao-naledi
  • letshwao-letshwao la go goeletša
  • letšoao-mpho
  • letšoao-letlakala
  • letshwao-mollo
  • letšoao-leihlo-bulehileng
  • letšoao-leihlo-koala
  • leswao-temošo-leswao
  • letšoao-sefofane
  • letšoao-almanaka
  • letšoao-random
  • letshwao-tshwaelo
  • letšoao-magnete
  • letshwao-chevron-godimo
  • letšoao-chevron-fatše
  • letshwao-retweet
  • icon-go reka-koloyana
  • letšoao-foldara-tswalela
  • letšoao-foldara-bulehileng
  • letšoao-fetola boholo-e emeng
  • letšoao-fetola boholo-horizontal
  • letšoao-hdd
  • leswao la lenaka la poo
  • letšoao-tšepe
  • setifikeiti sa letshwao
  • leswao-monwana o mogolo-godimo
  • letšoao-monwana o moholo-fatše
  • letšoao-letsoho-le letona
  • letšoao-letsoho-le letšehali
  • letšoao-letsoho-hodimo
  • letšoao-letsoho-fatše
  • letšoao-sedikadikwe-motsu-tokelo ya
  • letšoao-sedikadikwe-motsu-le letšehali
  • letšoao-sedikadikwe-motsu-hodimo
  • letšoao-sedikadikwe-motsu-fatše
  • letšoao-lefatše
  • letšoao-senotlolo
  • mesebetsi ya letshwao
  • letšoao-filtara
  • leswao-mokotla wa dipuku
  • letšoao-fullscreen

Glyphicons go abela

Glyphicons Halflings ka tlwaelo ga di hwetšagale mahala, eupša thulaganyo magareng ga Bootstrap le bahlami ba Glyphicons e dirile gore se se kgonege ntle le ditshenyagalelo go wena bjalo ka bahlami. Bjalo ka tebogo, re go kgopela gore o akaretše kgokagano ya boikhethelo morago go Glyphicons neng le neng ge go kgonega.

Tsela ya go diriša

Diaekhone ka moka di nyaka <i>thepo yeo e nago le sehlopha sa moswananoši, yeo e eteletšwego pele ka icon-. Go e diriša, bea khoutu e latelago mo e nyakilego go ba kae le kae:

  1. <i class = "go nyaka-leswao" </i>

Gape go na le mekgwa ye e lego gona ya diaekhone tše di fetotšwego (tše tšhweu), tšeo di dirilwego di loketše ka sehlopha se tee sa tlaleletšo. Re tla ka ho toba qobella sehlopha sena ka hover le mafolofolo e re bakeng sa nav le dropdown dikgokelo.

  1. <i class = "letšoao-batla letshwao-tšoeu" ></i>

Dihlogo godimo!Ge o šomiša ka thoko ga dithapo tša sengwalwa, bjalo ka go dikonope goba dikgokagano tša nav, kgonthiša gore o tlogela sekgoba ka morago ga <i>thepo bakeng sa sekgoba sa maleba.

Mehlala ya matshwao

Di šomiše ka go dikonope, dihlopha tša dikonope tša bara ya didirišwa, go sepelasepela, goba ditseno tša foromo tše di emetšwego pele.

Dikonope

Sehlopha sa konopo ka gare ga bara ya didirišwa ya konope
  1. <div sehlopha = "btn-bar ya didirišwa" > 
  2.   <div sehlopha = "btn-sehlopha" > 
  3.     <a sehlopha = "btn" href = "#" ><i sehlopha = "letshwao-lolaganya-letsohong le letšehali" </i></a>   
  4.     <a sehlopha = "btn" href = "#" ><i sehlopha = "letšoao-lolaganya-bohareng" </i></a>   
  5.     <a sehlopha = "btn" href = "#" ><i sehlopha = "letšoao-lolaganya-tokelo" </i></a>   
  6.     <a sehlopha = "btn" href = "#" ><i sehlopha = "letšoao-lokamisa-lokafatsa" </i></a>   
  7.   </div> e
  8. </div> e
Dropdown ka sehlopha sa konopo
Modiriši 
  1. <div sehlopha = "btn-sehlopha" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "letšoao-mosebedisi letšoao-tšoeu" ></i> Mosebedisi </a>   
  3.   <a sehlopha = "btn btn-primary dropdown-toggle" data-toggle = "therollo" href = "#" ><span sehlopha = "caret" ></span></a>    
  4.   <ul sehlopha = "thepo ya go theoga" > 
  5.     <li><a href = "#" ><i class = "phensele ya leswao" </i> Rulaganya </a></li>  
  6.     <li><a href = "#" ><i sehlopha = "leswao-ditlakala" </i> Phimola </a></li>  
  7.     <li><a href = "#" ><i class = "sediko-se-thibelo-ya-letshwao" </i> Thibela </a></li>  
  8.     <li sehlopha = "karoganyo" </li> 
  9.     <li><a href = "#" ><i sehlopha = "ke" </i> Dira molaodi </a></li>  
  10.   </ul>
  11. </div> e
Bogolo bja dikonope
Naledi Naledi Naledi 
  1. <a sehlopha = "btn btn-kgolo" href = "#" ><i sehlopha = "letshwao-naledi" ></i> Naledi </a>   
  2. <a class = "btn btn-small" href = "#" ><i sehlopha = "naledi-ya letshwao" ></i> Naledi </a>   
  3. <a sehlopha = "btn btn-mini" href = "#" ><i sehlopha = "letšoao-naleli" </i> Naleli </a>

Go sepelasepela

  1. <ul sehlopha = "nav nav-lenaneo" > 
  2.   <li class = "active" ><a href = "#" ><i class = "letšoao-gae letšoao-tšoeu" </i> Gae </a></li>   
  3.   <li><a href = "#" ><i class = "puku ya maswao" </i> Bokgobapuku </a></li>  
  4.   <li><a href = "#" ><i class = "phensele ya leswao" </i> Ditirišo </a></li>  
  5.   <li><a href = "#" ><i sehlopha = "ke" </i> Misc </a></li>  
  6. </ul>

Mabala a foromo

  1. <div sehlopha = "taolo-sehlopha" > 
  2.   <label class = "taolo-leibole" bakeng sa = "inputIcon" > Aterese ya imeile </label>  
  3.   <div sehlopha = "taolo" > 
  4.     <div sehlopha = "input-prepend" > 
  5.       <span class = "tlaleletšo" ><i sehlopha = "icon-enfelopo" ></i></span>  
  6.       <input sehlopha = "span2" id = "inputIcon" mofuta = "sengwalwa" >   
  7.     </div> e
  8.   </div> e
  9. </div> e