Ditokomane le mehlala ya go kgetha-ka setaele sa ditafola (ge go fiwa tšhomišo ya tšona ye e atilego ka go di-plugin tša JavaScript) ka Bootstrap.
Letlakaleng le
Kakaretšo
Ka lebaka la tšhomišo ye e atilego ya <table>dielemente go ralala le didirišwa tša mokgatlo wa boraro go swana le dialmanaka le dikgethi tša letšatšikgwedi, ditafola tša Bootstrap di kgetha go tsena . Oketša sehlopha sa motheo .tablego efe goba efe <table>, ke moka o atološe ka diklase tša rena tša sefetoši tša boikhethelo goba mekgwa ya tlwaelo. Mekgwa ka moka ya tafola ga e abelwe ka go Bootstrap, go ra gore ditafola dife goba dife tše di tsentšwego di ka setaele ka go ikemela go tšwa go motswadi.
Ka go šomiša go swaya tafola ga motheo kudu, mo ke ka fao .tableditafola tše di theilwego godimo di lebelegago ka gona ka go Bootstrap.
# .
Mathomo
Mafelelo
Swara
1. 1.
Mareka
Otto o ile a re
@mdo
2.
Jakobo
Thornton o ile a hlokomela
@lekhura
3.
Larry ya Nonyana
@ twitter e le
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
Diphetogo tša go fapana
Šomiša diklase tša diteng go mebala ditafola, methaladi ya tafola goba disele ka botee.
Phapoši
Hlogo ya ditaba
Hlogo ya ditaba
Hlokomologa
Sele
Sele
Motheo
Sele
Sele
Bobedi
Sele
Sele
Katlego
Sele
Sele
Kotsi
Sele
Sele
Temošo
Sele
Sele
Info
Sele
Sele
Seetša
Sele
Sele
Leswiswi
Sele
Sele
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
Go fetišetša tlhalošo go theknolotši ya go thuša
Go šomiša mmala go oketša tlhalošo go fa fela taetšo ya go bonwa, yeo e ka se fetišwego go badiriši ba theknolotši ya go thuša – go swana le babadi ba skrine. Netefatša gore tshedimošo yeo e bontšhitšwego ka mmala e ka ba e bonagala gabotse go tšwa diteng ka botšona (mohlala, sengwalwa se se bonagalago), goba e akaretšwa ka mekgwa ye mengwe, go swana le sengwalwa sa tlaleletšo seo se utilwego le .visually-hiddensehlopha.
Ditafola tše di nago le ditlhaloso
Methaladi ya methalo
Šomiša .table-stripedgo oketša zebra-striping go mothaladi ofe goba ofe wa tafola ka gare ga <tbody>.
# .
Mathomo
Mafelelo
Swara
1. 1.
Mareka
Otto o ile a re
@mdo
2.
Jakobo
Thornton o ile a hlokomela
@lekhura
3.
Larry ya Nonyana
@ twitter e le
<tableclass="table table-striped">
...
</table>
Diklase tše di ka okeletšwa gape go diphetogo tša tafola:
Re thoma ka go beakanya mokokotlo wa sele ya tafola ka --bs-table-bgthepa ya tlwaelo. Diphetogo ka moka tša tafola ke moka di beakanya thepa yeo ya tlwaelo go dira mebala ya disele tša tafola. Ka tsela ye, ga re tsene mathateng ge e ba mebala ya go se bonagale gabotse e šomišwa bjalo ka dimelo tša tafola.
Ke moka re tlaleletša ka moriti wa lepokisi la go tsenya godimo ga disele tša tafola ka box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);go legato godimo ga efe goba efe ye e laeditšwego background-color. Ka ge re diriša go phatlalala mo gogolo gomme go se na go fifala, mmala o tla ba wa monotone. Ka ge --bs-table-accent-bge sa bewa ka go ikemela, ga re na moriti wa lepokisi la go se fetoge.
Ge e ka ba .table-striped, .table-hovergoba .table-activediklase di okeditšwe, the --bs-table-accent-bge beakantšwe go mmala wo o sa bonagalego gabotse go tsenya mmala wa mokokotlo.
Bakeng sa mohuta o mongwe le o mongwe wa tafola, re tšweletša --bs-table-accent-bgmmala wo o nago le phapano e phagamego kudu go ya ka mmala woo. Ka mohlala, mmala wa go hlaboša lentšu bakeng sa .table-primaryo lefsifsi mola .table-darko e-na le mmala wa go hlaboša lentšu o bofefo.
Mebala ya sengwalwa le ya mollwane e tšweletšwa ka tsela ye e swanago, gomme mebala ya yona e abelwa ka go ikemela.
Table lisele tsa <thead>ba kamehla paatsepama lolamisiwa ga ho tlase. Disele tša tafola ka di <tbody>ja go logaganya ga tšona go tšwa <table>gomme di logagantšwe go ya godimo ka go ikemela. Šomiša diklase tša go logaganya thwii go logaganya gape moo go nyakegago.
Hlogo ya 1
Hlogo ya 2
Hlogo ya 3
Hlogo ya 4
Sele ye e tšea bohwa vertical-align: middle;go tšwa tafoleng
Sele ye e tšea bohwa vertical-align: middle;go tšwa tafoleng
Sele ye e tšea bohwa vertical-align: middle;go tšwa tafoleng
Se mo ke sengwalwa se sengwe sa seswaro sa lefelo, seo se reretšwego go tšea sekgoba se segolo sa go ema thwii, go laetša ka fao go logaganya go emego go šoma ka gona ka diseleng tše di fetilego.
Sele ye e tšea bohwa vertical-align: bottom;go tšwa mothalong wa tafola
Sele ye e tšea bohwa vertical-align: bottom;go tšwa mothalong wa tafola
Sele ye e tšea bohwa vertical-align: bottom;go tšwa mothalong wa tafola
Se mo ke sengwalwa se sengwe sa seswaro sa lefelo, seo se reretšwego go tšea sekgoba se segolo sa go ema thwii, go laetša ka fao go logaganya go emego go šoma ka gona ka diseleng tše di fetilego.
Sele ye e tšea bohwa vertical-align: middle;go tšwa tafoleng
Sele ye e tšea bohwa vertical-align: middle;go tšwa tafoleng
Sele ye e logaganywa go ya godimo.
Se mo ke sengwalwa se sengwe sa seswaro sa lefelo, seo se reretšwego go tšea sekgoba se segolo sa go ema thwii, go laetša ka fao go logaganya go emego go šoma ka gona ka diseleng tše di fetilego.
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
Go dira dihlaga
Mekgwa ya mellwane, mekgwa ye e šomago, le diphetogo tša tafola ga di abelwe ke ditafola tše di tsentšwego ka gare ga sehlaga.
Go thibela ditaele dife goba dife go dutla go ditafola tše di tsentšwego ka gare ga sehlaga, re šomiša mokgethi wa motswako wa ngwana ( >) ka go CSS ya rena. Ka ge re swanetše go nepiša tds le ths ka moka ka go thead, tbody, le tfoot, mokgethi wa rena o be a tla bonagala e le e telele kudu ntle le yona. Ka ge go le bjalo, re šomiša .table > :not(caption) > * > *mokgethi wa go lebelela wo o sa tlwaelegago go nepiša tds le ths ka moka ya .table, eupša ga go le e tee ya ditafola tše di ka bago gona tša go tsenywa ka gare ga sehlaga.
Hlokomela gore ge o tlaleletša <tr>s bjalo ka bana ba thwii ba tafola, tšeo <tr>di tla phuthelwa ka a <tbody>ka go ikemela, ka go realo tša dira gore bakgethi ba rena ba šome bjalo ka ge go be go reretšwe.
Anatomy ya mmele
Hlogo ya tafola
Go swana le ditafola le ditafola tše lefsifsi, šomiša diklase tša sefetoši .table-lightgoba .table-darkgo dira gore <thead>s e bonagale e le bohlokwa bjo bo bofefo goba bjo bo fifetšego.
A e <caption>šoma bjalo ka hlogo ya tafola. E thuša badiriši bao ba nago le dibadi tša skrine go hwetša tafola le go kwešiša gore e mabapi le eng le go tšea sephetho sa ge e ba ba nyaka go e bala.
Lenaneo la badiriši
# .
Mathomo
Mafelelo
Swara
1. 1.
Mareka
Otto o ile a re
@mdo
2.
Jakobo
Thornton o ile a hlokomela
@lekhura
3.
Larry ya Nonyana
@ twitter e le
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
O ka bea gape le <caption>ka godimo ga tafola ka .caption-top.
Lenaneo la badiriši
# .
Mathomo
Mafelelo
Swara
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
<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>
Ditafola tše di arabelago
Ditafola tše di arabelago di dumelela ditafola go kgokološwa ka go rapalala gabonolo. Dira gore tafola efe goba efe e arabele go ralala le dipono ka moka ka go phuthela .tableka .table-responsive. Goba, kgetha palo e kgolo ya go kgaotša yeo o ka bago le tafola yeo e arabelago go fihla go yona ka go diriša .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Go kgaola/go kgaola ka go ema thwii
Ditafola tše di arabelago di diriša overflow-y: hidden, yeo e kgaolago diteng dife goba dife tšeo di fetago mapheko a ka tlase goba a godimo a tafola. Ka mo go kgethegilego, se se ka kgaola dimenu tša go theoga le didirišwa tše dingwe tša mokgatlo wa boraro.
Ka mehla o arabela
Go putla ntlha ye nngwe le ye nngwe ya go kgaotša, šomiša .table-responsivebakeng sa ditafola tša go kgokološa ka go rapalala.
Šomiša .table-responsive{-sm|-md|-lg|-xl|-xxl}ka moo go nyakegago go hlama ditafola tše di arabelago go fihla go ntlha ye e itšego ya go kgaotša. Go tloga ntlheng yeo ya go kgaotša go ya godimo, tafola e tla itshwara ka tlwaelo gomme e se ke ya sepelasepela ka go rapalala.
Ditafola tše di ka bonagala di senyegile go fihlela mekgwa ya tšona ya go arabela e šoma ka bophara bjo bo itšego bja lefelo la go lebelela.
Diphetogo tša mabaka ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) di šomišwa go laetša phapano ka go diphetogo tša tafola.
Ka ntle le diphetogo tša tafola ya seetša & lefsifsi, mebala ya sehlogo e bofefošwa ke $table-bg-levelphetogo.