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.
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: @baseFontSize
le @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.
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.
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.
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 .initialism sehlopha bakeng sa dikgutsufatšo tša ditlhaka tše kgolo. |
<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> |
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.
Mehlala e mebedi ya kamoo <address>
leswao le ka dirišwago ka gona še:
Dikhutsofatšo tše di nago le title
seka 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 initialism
klase 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 .
Ntlha | Tšhomišo | Boikgethelo |
---|---|---|
<blockquote> |
Elemente ya maemo a thibelo ya go tsopola diteng go tšwa mothopong wo mongwe | Oketša .pull-left le .pull-right diklase 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 —
pele ga yona bakeng sa merero ya go dira setaele.
- <setsopolwa sa go thibela>
- <p> Lorem ipsum dolor dula amet, kgethehileng ya madipiscing elit. Palo e feletseng posuere erat e ante venenatis. </p>
- <small> Motho yo a tumilego </small>
- </blockquote> ya go tswalela
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
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
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.
Phuthelela dikarolwana tša ka gare ga mothaladi tša khoutu ka <code>
.
- Go fa mohlala , karolo ya <khoutu> </ khoutu > e swanetše go phuthelwa bjalo ka ka gare ga mothaladi .
Š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>
- <pele>
- <p>Mohlala wa sengwalwa mo...</p>
- </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-scrollable
sehlopha seo se tla beha max-bophahamo ba 350px le fana ka y-axis scrollbar.
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.
- <p> Mohlala wa sengwalwa mo... </p>
- <pre sehlopha = "prettyprint ."
- di-linenum" >
- <p>Mohlala wa sengwalwa mo...</p>
- </pre>
Download google-code-prettify le sheba readme bakeng sa kamoo ho sebelisa.
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 |
- <tafola>
- <hlogo>
- <tr>
- <th> ... </th>
- <th> ... </th>
- </tr>
- </thlogo>
- <motho>
- <tr>
- <td> ... </td>
- <td> ... </td>
- </tr>
- </tbody>
- </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 td le th elements |
Ditafola di rulagantšwe ka go iketla ka mellwane ye mmalwa fela go netefatša go balega le go hlokomela sebopego. Ka 2.0, .table
sehlopha se a hlokahala.
- < sehlopha sa tafole = "tafole" >
- ...
- </tafola>
# . | 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 |
Hwetša go se nene go makatša ka ditafola tša gago ka go oketša zebra-striping—e no oketša .table-striped
klase.
Ela hloko: Ditafola tša methalo di šomiša :nth-child
mokgethi wa CSS gomme ga di hwetšagale go IE7-IE8.
- <tafole sehlopha = "tafole tafole-methalo" >
- ...
- </tafola>
# . | 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 |
Oketša mellwane go dikologa tafola ka moka le dikhutlo tše di kgokologilego bakeng sa merero ya bothakga.
- <tafole sehlopha = "tafole tafole-bordered" >
- ...
- </tafola>
# . | 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 |
Dira gore ditafola tša gago di be tše kopana kudu ka go oketša .table-condensed
sehlopha go sega padding ya sele ya tafola ka bogare (go tloga go 8px go ya go 4px).
- <tafole sehlopha = "tafole tafole-condensed" >
- ...
- </tafola>
# . | 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 |
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.
- <tafole sehlopha = "tafole tafole-methalo tafole-bordered tafole-condensed" >
- ...
- </tafola>
Lebitso le feletseng | |||
---|---|---|---|
# . | 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 |
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.
Bootstrap e tla le thekgo ya mehuta ye mene ya dipeakanyo tša foromo:
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.
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.
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 le letshadi la go logaganya le ditaolo tša ka gare ga mothaladi 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 |
Smart le bobebe defaults ntle le markup e eketsehileng.
- < sehlopha sa foromo = "hantle" >
- <leibole> Leina la leina </leibole>
- < mohuta wa tsenyo = "sengwalwa" sehlopha = "span3" seswari sa lefelo = "Tlanya selo se sengwe ..." >
- <span class = "help-block" > Mohlala wa sengwalwa sa thušo sa maemo a thibelo mo. </span>
- <leibole sehlopha = "lepokisi la hlahloba" >
- <input type = "checkbox" > Ntlhahlobe
- </leibole>
- < mofuta wa konopo = "romela" sehlopha = "btn" > Romela </konopo>
- </form>
Oketša .form-search
go foromo le .search-query
go input
.
- <fomo sehlopha = "hantle foromo-batla" >
- < mohuta wa tsenyo = "sengwalwa" sehlopha = "potšišo ya nyakišišo-ya magareng ya tsenyo" >
- < mofuta wa konopo = "romela" sehlopha = "btn" > Batla </konopo>
- </form>
Oketša .form-inline
go finesse go logaganya go ema le sekgoba sa ditaolo tša foromo.
- < sehlopha sa foromo = "hantle foromo-inline" >
- < mohuta wa tsenyo = "sengwalwa" sehlopha = "tseno-se nnyane" seswari sa lefelo = "Email" >
- < mohuta wa tsenyo = "phasewete" sehlopha = "tseno-small" sebaka = "Phasewete" >
- <leibole sehlopha = "lepokisi la hlahloba" >
- <input type = "checkbox" > Nkgopole
- </leibole>
- < mofuta wa konopo = "romela" sehlopha = "btn" > Tsena </konopo>
- </form>
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:
E filwe mohlala wa ka godimo wa peakanyo ya foromo, mo ke go swaya mo go amanago le sehlopha sa mathomo sa go tsenya le sa taolo. Diklase tša .control-group
, .control-label
, le .controls
ka moka di a nyakega bakeng sa go dira setaele.
- < sehlopha sa foromo = "sebopeho-se rapameng" >
- <sete ya tšhemo>
- <nonwane> Sengwalwa sa nonwane </nonwane>
- <div sehlopha = "taolo-sehlopha" >
- <label class = "taolo-leibole" bakeng sa = "input01" > Tsenyo ya sengwalwa </label>
- <div sehlopha = "taolo" >
- < mohuta wa tsenyo = "sengwalwa" sehlopha = "tsenyo-xlarge" id = "tsenyo01" >
- <p class = "help-block" > Sengwalwa sa thušo sa thekgo </p>
- </div> e
- </div> e
- </sete ya tšhemo>
- </form>
Bootstrap litšobotsi tse mekgwa ya tshebetso bakeng sa sebadi-thekga tsepamisa maikutlo le disabled
e re. Re tloša Webkit ya go se fetoge outline
gomme re diriša a box-shadow
legatong la yona bakeng sa :focus
.
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
.
- <sete ya tšhemo
- class = "phošo ya sehlopha sa taolo" >
- ...
- </sete ya tšhemo>
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.
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 .inline
go efe goba efe .checkbox
goba .radio
gomme o feditše.
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-on
le input
mo moleng o tee, ntle le dikgoba.
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.
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.
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:
- <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:
- <i class = "letšoao-batla letshwao-tšoeu" ></i>
Go na le diklase tše 140 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.
Diaekhone di kgolo, eupša motho o be a tla di diriša kae? Dikgopolo tše sego kae ke tše:
Ge e le gabotse, kae le kae moo o ka beago <i>
tag, o ka bea leswao.
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.