CSS ya motheo

Godimo ga sefala, dielemente tša motheo tša HTML di rulagantšwe le go kaonafatšwa ka diklase tše di katološwago go fa ponagalo le maikutlo a mafsa, a go se fetoge.

Dihlogo & khopi ya mmele

Sekala sa go thaepa

Keriti ka moka ya go thaepa e theilwe godimo ga diphetogo tše pedi tša Ka fase ka faeleng ya rena ya 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, go hlama mapheko, dipadding, le line-heights ya mohuta wa rena ka moka le tše dingwe.

Mohlala wa sengwalwa sa mmele

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 ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus motšweletši wa dilo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

h1. Hlogo ya 1

h2. Hlogo ya 2

h3. Hlogo ya 3

h4. Hlogo ya 4

h5. Hlogo ya 5
h6. Hlogo ya 6

Kgatelelo, aterese le khutsofatšo

Ntlha Tšhomišo Boikgethelo
<strong> Bakeng sa go gatelela seripa sa sengwalwa ka bohlokwa Ga go selo
<em> Bakeng sa go gatelela seripa sa sengwalwa ka kgatelelo Ga go selo
<abbr> E phuthela dikgutsufatšo le diakhronimi go bontšha phetolelo ye e atološitšwego go hover

Akaretša titleseka sa boikhethelo sa sengwalwa se se katološitšwego

Šomiša .initialismsehlopha bakeng sa dikgutsufatšo tša ditlhaka tše dikgolo.
<address> Bakeng sa tshedimošo ya kgokagano ya rakgolokhukhu wa yona wa kgauswi goba mmele ka moka wa mošomo Boloka go fometa ka go fediša mela ka moka ka<br>

Go diriša go gatelela

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa feela dula amet risus. Maecenas faucibus mollis ya go ba le sebopego sa magareng. Nulla vitae elit libero, e lego pharetra e lego augue.

Ela hloko: Ikwe o lokologile go šomiša <b>le <i>ka HTML5, eupša tšhomišo ya tšona e fetogile go se nene. <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.

Diaterese tša mohlala

Mehlala e mebedi ya kamoo <address>leswao le ka dirišwago ka gona še:

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
Leina ka botlalo
[email protected]

Dikhutsofatšo tša mohlala

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. Se se fa badiriši taetšo ye e oketšegilego ya selo se sengwe se tla bontšhwa ka hover.

Oketša initialismklase go khutsofatšo go oketša kwano ya go thaepa ka go e fa bogolo bja sengwalwa bjo bonyenyane go se nene.

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

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

Ditsopolwa tša go thibela

Ntlha Tšhomišo Boikgethelo
<blockquote> Elemente ya maemo a thibelo ya go tsopola diteng go tšwa mothopong wo mongwe

Oketša citeseka sa URL ya mothopo

Šomiša .pull-leftle .pull-rightdiklase tša dikgetho tše di phaphametšego
<small> Elemente ya boikhethelo ya go tlaleletša setsopolwa seo se lebanego le modiriši, ka tlwaelo ke mongwadi yo a nago le sehlogo sa mošomo Bea go <cite>dikologa thaetlele goba leina la mothopo

Go akaretša setsopolwa sa go thibela, phuthela <blockquote>go dikologa HTML efe goba efe bjalo ka setsopolwa. Bakeng sa ditsopolwa tše di otlologilego re kgothaletša a <p>.

Akaretša elemente ya boikhethelo <small>go tsopola mothopo wa gago gomme o tla hwetša em dash &mdash;pele ga yona bakeng sa merero ya go dira setaele.

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

Mohlala wa diboloko

Diboloko tša go se fetoge di rulagantšwe ka mokgwa wo:

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

Motho wa go tuma ka Mmele wa mošomo

Go phaphamala blockquote ya gago ka go le letona, tlaleletša class="pull-right":

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

Motho wa go tuma ka Mmele wa mošomo

Mananeo

E sa laelwago

<ul>

  • 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 e tšoanang
    • 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

E sa setaele

<ul class="unstyled">

  • 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 e tšoanang
    • 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

E laetšwe

<ol>

  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

Tlhalošo

<dl>

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.

Tlhaloso e rapameng

<dl class="dl-horizontal">

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.

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.

Ka gare ga mothaladi

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

  1. Go fa mohlala , karolo ya <khoutu> </ 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>

Ela hloko: 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.

Google Prettify

Tšea <pre>elemente ye e swanago gomme o tlaleletše diklase tše pedi tša boikhethelo bakeng sa phetolelo ye e kaonafetšego.

  1. <p> Mohlala wa sengwalwa mo... </p>
  1. <pre sehlopha = "prettyprint ."
  2. di-linenum" >
  3. <p>Mohlala wa sengwalwa mo...</p>
  4. </pre>

Download google-code-prettify le sheba readme bakeng sa kamoo ho sebelisa.

Go swaya tafola

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 ta kholomo (goba mothalo, go ya ka sebaka le go bewa) Di
swanete go omiwa ka gare ga a<thead>
<caption> Tlhaloso goba kakaretšo ya seo tafola e se swerego, kudukudu se se nago le mohola go babadi ba skrine
  1. <tafola>
  2. <hlogo>
  3. <tr>
  4. <th> ... </th>
  5. <th> ... </th>
  6. </tr>
  7. </thlogo>
  8. <motho>
  9. <tr>
  10. <td> ... </td>
  11. <td> ... </td>
  12. </tr>
  13. </tbody>
  14. </tafola>

Dikgetho tša tafola

Leina Phapoši Tlhalošo
Hlokomologa Ga go selo Ga go na mekgwa, e no ba dikholomo le methaladi
Ya motheo .table Methaladi ye e rapaletšego fela magareng ga mela
E na le mellwane .table-bordered Rounds dikhutlo le eketsa ka ntle moeli
Zebra-mothalo .table-striped E tlaleletša ka mmala wa bokamorago wa bohlokwa bjo bo bofefo go mela ye e sa tlwaelegago (1, 3, 5, bj.bj.) .
E khutsofaditšwego .table-condensed Khaola padding paatsepama ka halofo, ho tloha 8px ho 4px, ka hare ho tsohle tdle thelements

Ditafola tša mohlala

1.Ditaele tša tafola tša go se fetoge

Ditafola di rulagantšwe ka go iketla ka mellwane ye mmalwa fela go netefatša go balega le go hlokomela sebopego. Ka 2.0, .tablesehlopha se a hlokahala.

  1. < sehlopha sa tafole = "tafole" >
  2. ...
  3. </tafola>
# . Leina Sefane Lebitso la mosebedisi
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

2. Tafole ya methalo

Hwetša go se nene go makatša ka ditafola tša gago ka go oketša zebra-striping—e no oketša .table-stripedklase.

Ela hloko: Ditafola tša methalo di šomiša :nth-childmokgethi wa CSS gomme ga di hwetšagale go IE7-IE8.

  1. <tafole sehlopha = "tafole tafole-methalo" >
  2. ...
  3. </tafola>
# . Leina Sefane Lebitso la mosebedisi
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

3. Tafole e nang le mellwane

Oketša mellwane go dikologa tafola ka moka le dikhutlo tše di kgokologilego bakeng sa merero ya bothakga.

  1. <tafole sehlopha = "tafole tafole-bordered" >
  2. ...
  3. </tafola>
# . Leina Sefane Lebitso la mosebedisi
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

4. Tafole e khutsofaditšwego

Dira gore ditafola tša gago di be tše kopana kudu ka go oketša .table-condensedsehlopha go sega padding ya sele ya tafola ka bogare (go tloga go 8px go ya go 4px).

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

5. Di kopanye ka moka!

Ikwe o lokologile go kopanya efe goba efe ya diklase tša tafola go fihlelela ponagalo ye e fapanego ka go šomiša efe goba efe ya diklase tše di lego gona.

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

HTML le CSS tše di fetofetogago

Karolo e kaone ka diforomo ka go Bootstrap ke gore ditshenyegelo tša gago ka moka le ditaolo di bonala di le botse go sa šetšwe gore o di aga bjang ka go swaya ga gago. Ga go na HTML e sa nyakegego yeo e nyakegago, eupša re nea dipaterone bakeng sa bao ba e nyakago.

Dipeakanyo tše di raraganego kudu di tla le diklase tše di kopana le tše di ka oketšegago bakeng sa go dira setaele gabonolo le go tlama ga tiragalo, ka gona o khupeditšwe mogatong o mongwe le o mongwe.

Dipeakanyo tše nne di akareditšwe

Bootstrap e tla le thekgo ya mehuta ye mene ya dipeakanyo tša foromo:

  • E eme (ya kamehla) .
  • Nyaka
  • Ka gare ga mothaladi
  • Rapamego

Mehuta ye e fapanego ya dipeakanyo tša foromo e nyaka diphetogo tše dingwe go swaya, eupša ditaolo ka botšona di dula di swana le go itshwara.

Taolo e re le ho feta

Diforomo tša Bootstrap di akaretša mekgwa ya ditaolo ka moka tša foromo ya motheo go swana le tsenyo, textarea, le kgetha yeo o bego o tla e letela. Eupša e tla gape le palo ya dikarolo tša tlwaelo go swana le ditseno tše di kgomareditšwego le tše di emišitšwego pele le thekgo ya mananeo a mapokisi a go hlahloba.

Dipolelo tša go swana le phošo, temošo, le katlego di akaretšwa bakeng sa mohuta o mongwe le o mongwe wa taolo ya foromo. Gape go akaretšwa mekgwa ya ditaolo tše di golofetšego.

Mehuta ye mene ya dibopego

Bootstrap e fana ka go swaya mo go bonolo le mekgwa ya mekgwa ye mene ya diforomo tša wepe tše di tlwaelegilego.

Leina Phapoši Tlhalošo
E eme (ya kamehla) . .form-vertical (ga go nyakege) . Dileibole tše di kgobokeditšwego, tše di logaganywago ka go le letshadi godimo ga ditaolo
Ka gare ga mothaladi .form-inline Letsogo le letona la go le letshadi le ditaolo tša ka gare ga mothaladi-boloko bakeng sa setaele se se kopanego
Nyaka .form-search Tsenyo ya sengwalwa ye e oketšegilego ya go dikologa bakeng sa bothakga bja nyakišišo bjo bo tlwaelegilego
Rapamego .form-horizontal Phaphamala ka go le letshadi, dileibole tše di logaganywago ka go le letona mo moleng o tee le ditaolo

Mohlala wa diforomo o šomiša ditaolo tša foromo fela, ga go na go swaya mo go oketšegilego

Foromo ya motheo

Smart le bobebe defaults ntle le markup e eketsehileng.

Mohlala wa sengwalwa sa thušo sa maemo a boloko mo.

  1. < sehlopha sa foromo = "hantle" >
  2. <leibole> Leina la leina </leibole>
  3. < mohuta wa tsenyo = "sengwalwa" sehlopha = "span3" seswari sa lefelo = "Tlanya selo se sengwe ..." >
  4. <span class = "help-block" > Mohlala wa sengwalwa sa thušo sa maemo a thibelo mo. </span>
  5. <leibole sehlopha = "lepokisi la hlahloba" >
  6. <input type = "checkbox" > Ntlhahlobe ntle
  7. </leibole>
  8. < mofuta wa konopo = "romela" sehlopha = "btn" > Romela </konopo>
  9. </form>

Batla foromo

Oketša .form-searchgo foromo le .search-querygo input.

  1. <fomo sehlopha = "hantle foromo-batla" >
  2. < mohuta wa tsenyo = "sengwalwa" sehlopha = "potšišo ya go nyaka-segare sa tsenyo" >
  3. < mofuta wa konopo = "romela" sehlopha = "btn" > Batla </konopo>
  4. </form>

Foromo ya ka gare ga mothaladi

Oketša .form-inlinego finesse go logaganya go ema le sekgoba sa ditaolo tša foromo.

  1. < sehlopha sa foromo = "hantle 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>

Dibopego tše di rapaletšego

Bontšhitšwe ka go le letona ke ditaolo ka moka tša foromo ya go se fetoge tšeo re di thekgago. Lenaneo la dikulo ke le:

  • ditshenyegelo tša sengwalwa (sengwalwa, phasewete, imeile, bj.bj.) .
  • lepokisi la go hlahloba
  • radio
  • kgetha
  • multiple kgetha
  • tsenyo ya faele
  • lefelo la sengwalwa

Go tlaleletša go sengwalwa sa sebopego sa go se lefelwe, tsenyo efe goba efe ye e theilwego godimo ga sengwalwa sa HTML5 e tšwelela bjalo.

Mohlala wa go swaya

E filwe mohlala foromo ya ka godimo peakanyo, mo ke markup amanang le sehlopha sa pele sa tsenyo le taolo. Diklase tša .control-group, .control-label, le .controlska moka di a nyakega bakeng sa go dira setaele.

  1. < sehlopha sa foromo = "sebopeho-se rapameng" >
  2. <sete ya tšhemo>
  3. <nonwane> Sengwalwa sa nonwane </nonwane>
  4. <div sehlopha = "taolo-sehlopha" >
  5. <label class = "taolo-leibole" bakeng sa = "input01" > Tsenyo ya sengwalwa </label>
  6. <div sehlopha = "taolo" >
  7. < mohuta wa tsenyo = "sengwalwa" sehlopha = "tsenyo-xlarge" id = "tsenyo01" >
  8. <p class = "help-block" > Sengwalwa sa thušo sa thekgo </p>
  9. </div> e
  10. </div> e
  11. </sete ya tšhemo>
  12. </form>

Foromo taolo e re

Bootstrap litšobotsi tse mekgwa ya tshebetso bakeng sa sebadi-thekga tsepamisa maikutlo le disablede re. Re tloša Webkit ya go se fetoge outlinegomme re diriša a box-shadowlegatong la yona bakeng sa :focus.


Netefatšo ya foromo

E akaretša gape le mekgwa ya netefatšo ya diphošo, ditemošo, le katlego. Go diriša, oketša sehlopha sa phošo go se se dikologilego .control-group.

  1. <sete ya tšhemo
  2. class = "phošo ya sehlopha sa taolo" >
  3. ...
  4. </sete ya tšhemo>
Ba bangwe ba tšeela godimo mo
Se sengwe se ka ba se ile sa sepele gabotse
Hle lokiša phošo yeo
Woohoo!
Woohoo!

Go katološa ditaolo tša foromo

Prepend & tlaleletša ditseno

Dihlopha tša ditseno—tšeo di nago le sengwalwa seo se tlaleleditšwego goba seo se tsentšwego pele—di fa tsela ye bonolo ya go fa seemo se se oketšegilego bakeng sa ditseno tša gago. Mehlala e megolo e akaretša leswao la @ bakeng sa maina a badiriši a Twitter goba $ bakeng sa ditšhelete.


Mapokisi a go hlahloba le diradio

Go fihla go v1.4, Bootstrap e be e nyaka go swaya mo go oketšegilego go dikologa mapokisi a go hlahloba le diradio go di kgoboketša. Bjale, ke taba ye bonolo ya go boeletša <label class="checkbox">yeo e phuthelago <input type="checkbox">.

Mapokisi a go hlahloba ka gare ga mothaladi le diradio le tšona di a thekgwa. E no tlaleletša .inlinego efe goba efe .checkboxgoba .radiogomme o feditše.


Diforomo tša ka gare ga mothaladi gomme o tlaleletše/pele pele

Go šomiša ditseno tša go tsenya pele goba tša go tlaleletša ka mokgwa wa ka gare ga mothaladi, kgonthiša gore o bea .add-onle inputmo moleng o tee, ntle le dikgoba.


Bopa sengwalwa sa thušo

Go oketša sengwalwa sa thušo sa ditseno tša gago tša foromo, akaretša sengwalwa sa thušo sa ka gare ga mothaladi ka <span class="help-inline">goba thibelo ya sengwalwa sa thušo ka <p class="help-block">morago ga elemente ya tsenyo.

Šomiša .span*diklase tše di swanago go tšwa go tshepedišo ya keriti bakeng sa bogolo bja tsenyo.

O ka šomiša gape diklase tša go se fetoge tšeo di sa mmapago go keriti, go tlwaela mekgwa ya CSS ye e arabelago, goba go ahlaahla mehuta ye e fapanego ya ditaolo (mohlala, inputvs. select).

@

Sengwalwa se sengwe sa thušo ke se

.00 e le
Sengwalwa se sengwe sa thušo ke se
$ .00 e le

Ela hloko: Dileibole di dikologa dikgetho ka moka tša mafelo a go klika a magolo kudu le foromo ye e šomišegago kudu.

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

Dikonope tša ditiro

Bjalo ka tumelelano, dikonope di swanetše go šomišwa fela go ditiro mola dikgokagano tša godimo di swanetše go šomišwa go dilo. Go fa mohlala, "Download" e swanetše go ba konope mola "mošomo wa morago bjale" e swanetše go ba kgokagano.

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.

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 bjo bontši

Fancy dikonope tše kgolo goba tše nnyane? Oketša .btn-large, .btn-small, goba .btn-minibakeng sa bogolo bjo bobedi bja tlaleletšo.


Boemo bjo bo golofetšego

Bakeng sa dikonope tše di golofetšego, oketša .disabledsehlopha go dikgokagano le disabledseka sa <button>dielemente.

Kgokagano ya mathomo Amanya

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.

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" >
  3. Kunope
  4. </konope>
  5. < sehlopha sa tsenyo = "btn" mofuta = "konopo".
  6. boleng = "Tsenyo" >
  7. <input sehlopha = "btn" mofuta = "romela".
  8. boleng = "Romela" >

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

  • 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
  • letshwao-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

E agilwe bjalo ka sprite

Go e na le go dira gore leswao le lengwe le le lengwe e be kgopelo e oketšegilego, re a kgobokeditše go ba sprite—sehlopha sa diswantšho ka faeleng e tee yeo e dirišago CSS go bea diswantšho ka background-position. Ye ke yona mokgwa wo re o šomišago go Twitter.com gomme o re šomile gabotse.

Diklase ka moka tša diaekhone di hlongwa pele ka .icon-bakeng sa go beakanya sekgoba sa maina le go dira sebaka se se swanetšego, go swana kudu le dikarolo tša rena tše dingwe. Se se tla thuša go phema dithulano le didirišwa tše dingwe.

Glyphicons e re file tšhomišo ya Halflings yeo e beilwego ka go sedirišwa sa rena sa mohlodi wo o bulegilego ge fela re fana ka kgokagano le mokitlana mo ka go docs. Hle nagana ka go dira se se swanago diprotšekeng tša lena.

Tsela ya go diriša

Bootstrap e diriša <i>tag bakeng sa diaekhone ka moka, eupša ga di na sehlopha sa mohlala—feela hlogo yeo e abelanwago. 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 yeo e lego gona bakeng sa diaekhone tše di fetotšwego (tše tšhweu), tšeo di dirilwego di lokile ka sehlopha se tee sa tlaleletšo:

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

Go na le diklase tše 120 tšeo o ka kgethago go tšona bakeng sa diaekhone tša gago. E no oketša <i>tag ka diklase tša maleba gomme o beakantšwe. O ka hwetša lenaneo ka botlalo go sprites.less goba thwi mo ka go tokomane ye.

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.

Diriša melato

Diaekhone di kgolo, eupša motho o be a tla di diriša kae? Dikgopolo tše sego kae ke tše:

  • Bjalo ka dipono tša go sepelasepela ga gago ga sidebar
  • Bakeng sa go sepelasepela mo go laolwago ke maswao ka mo go feletšego
  • Bakeng sa dikonope go thuša go fetišetša tlhalošo ya tiro
  • Ka dikgokagano tša go abelana seemo godimo ga lefelo leo mosediriši a yago go lona

Ge e le gabotse, kae le kae moo o ka beago <i>tag, o ka bea leswao.

Mehlala

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.