Ebiwandiiko n'ebyokulabirako by'okulonda-mu sitayiro y'emmeeza (okusinziira ku nkozesa yazo emanyiddwa mu JavaScript plugins) ne Bootstrap.
Ku muko guno
Okulaba okutwalira awamu
Olw'okukozesa ennyo <table>ebintu mu widgets ez'ekibiina eky'okusatu nga kalenda n'abalonda ennaku, emmeeza za Bootstrap zibeera opt-in . Yongera ku kiraasi y’omusingi .tableku yonna <table>, olwo ogaziye ne kiraasi zaffe ez’okukyusakyusa ez’okwesalirawo oba emisono egy’ennono. Sitayiro zonna ez'emmeeza tezisikira mu Bootstrap, ekitegeeza nti emmeeza zonna eziteekeddwa mu kisenge zisobola okukolebwa sitayiro nga zeetongodde ku muzadde.
Nga okozesa akabonero k'emmeeza akasinga obukulu, wuuno engeri .table-emmeeza ezisinziira ku ngeri gye zirabika mu Bootstrap.
# .
Okusooka
Okusembayo
Okukwaata
1.
Mark
Otto bwe yabadde
@mdo
2.
Yakobo
Thornton nga bwe kiri
@obunene
3.
Larry Ekinyonyi
@twitter
<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>
Enjawulo
Kozesa kiraasi ezikwata ku mbeera okukuba langi ku mmeeza, ennyiriri z’emmeeza oba obutoffaali obw’enjawulo.
Essomo
Omutwe
Omutwe
Okukosamu
Ekatoffaali
Ekatoffaali
Pulayimale
Ekatoffaali
Ekatoffaali
Ekyokubiri
Ekatoffaali
Ekatoffaali
Okuyita
Ekatoffaali
Ekatoffaali
Akabi
Ekatoffaali
Ekatoffaali
Okulabula
Ekatoffaali
Ekatoffaali
Info
Ekatoffaali
Ekatoffaali
Koleeza
Ekatoffaali
Ekatoffaali
Ekizikiza
Ekatoffaali
Ekatoffaali
<!-- 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>
Okutuusa amakulu mu tekinologiya ayamba
Okukozesa langi okwongera amakulu kiwa ekiraga ekirabika kyokka, ekitajja kutuusibwa eri abakozesa tekinologiya ayamba – gamba ng’ebisoma ku ssirini. Kakasa nti amawulire agalagirwa langi oba geeyoleka okuva mu birimu byennyini (okugeza ekiwandiiko ekirabika), oba gateekebwamu okuyita mu ngeri endala, gamba ng’ebiwandiiko ebirala ebikwekebwa ne .visually-hiddenkiraasi.
Emmeeza eziriko ennukuta
Ennyiriri eziriko emisono
Kozesa .table-stripedokwongera ku zebra-striping ku lunyiriri lwonna olw'emmeeza munda mu <tbody>.
# .
Okusooka
Okusembayo
Okukwaata
1.
Mark
Otto bwe yabadde
@mdo
2.
Yakobo
Thornton nga bwe kiri
@obunene
3.
Larry Ekinyonyi
@twitter
<tableclass="table table-striped">
...
</table>
Ebika bino era bisobola okugattibwa ku nkyukakyuka z’emmeeza:
Laga olunyiriri oba akasenge k’emmeeza ng’ossaako .table-activeekibiina.
# .
Okusooka
Okusembayo
Okukwaata
1.
Mark
Otto bwe yabadde
@mdo
2.
Yakobo
Thornton nga bwe kiri
@obunene
3.
Larry Ekinyonyi
@twitter
<tableclass="table"><thead>
...
</thead><tbody><trclass="table-active">
...
</tr><tr>
...
</tr><tr><thscope="row">3</th><tdcolspan="2"class="table-active">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
# .
Okusooka
Okusembayo
Okukwaata
1.
Mark
Otto bwe yabadde
@mdo
2.
Yakobo
Thornton nga bwe kiri
@obunene
3.
Larry Ekinyonyi
@twitter
<tableclass="table table-dark"><thead>
...
</thead><tbody><trclass="table-active">
...
</tr><tr>
...
</tr><tr><thscope="row">3</th><tdcolspan="2"class="table-active">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
Enjawulo n’emmeeza eziriko ennukuta zikola zitya?
Ku mmeeza eziriko ennukuta ( ennyiriri eziriko emisono , ennyiriri eziwuubaala , n'emmeeza ezikola ), twakozesa obukodyo obumu okufuula ebikolwa bino okukola ku nkyukakyuka zaffe zonna ez'emmeeza :
Tutandika nga tuteeka emabega w’akasengejja k’emmeeza n’ekintu --bs-table-bgeky’ennono. Enkyukakyuka zonna ez'emmeeza olwo ziteekawo ekintu ekyo eky'ennono okukuba langi ku butoffaali bw'emmeeza. Mu ngeri eno, tetufuna buzibu singa langi ezitali zitangaavu zikozesebwa nga emmeeza ennyuma.
Olwo ne twongerako ekisiikirize ky'akabokisi akayingiza ku butoffaali bw'emmeeza nga tulina box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);to layer waggulu wa kyonna ekiragiddwa background-color. Olw’okuba tukozesa spread ennene ennyo ate nga tewali blur, langi ejja kuba monotone. Okuva bwe kiri --bs-table-accent-bgnti is unset by default, tetulina kisiikirize kya box ekisookerwako.
Bwe oba .table-striped, .table-hoveroba .table-activekiraasi zigattibwako, the --bs-table-accent-bgeteekebwa ku langi ya semitransparent okuteeka langi ku mugongo.
Ku buli nkyukakyuka y’emmeeza, tukola --bs-table-accent-bglangi erimu enjawulo esinga okusinziira ku langi eyo. Okugeza langi ya accent for .table-primaryesingako enzirugavu ate .table-darkng’erina langi ya accent eyaka.
Langi z'ebiwandiiko n'ensalosalo zikolebwa mu ngeri y'emu, era langi zazo zisikira mu butonde.
Obutoffaali bw’emmeeza obwa <thead>bulijjo buba bukwatagana mu nneekulungirivu wansi. Obutoffaali bw'emmeeza mu <tbody>busikira okulaganya kwabwo okuva <table>era bukwatagana ku the top by default. Kozesa kiraasi za vertical align okuddamu okulaganya we kyetaagisa.
Omutwe 1
Omutwe 2
Omutwe 3
Omutwe 4
Akatoffaali kano kasikira vertical-align: middle;okuva ku mmeeza
Akatoffaali kano kasikira vertical-align: middle;okuva ku mmeeza
Akatoffaali kano kasikira vertical-align: middle;okuva ku mmeeza
Kino wano waliwo ebiwandiiko ebimu eby’ekifo, ebigendereddwamu okutwala ekifo ekitono ennyo ekyesimbye, okulaga engeri ensengeka eyeesimbye gy’ekola mu butoffaali obusoose.
Akatoffaali kano kasikira vertical-align: bottom;okuva mu lunyiriri lw'emmeeza
Akatoffaali kano kasikira vertical-align: bottom;okuva mu lunyiriri lw'emmeeza
Akatoffaali kano kasikira vertical-align: bottom;okuva mu lunyiriri lw'emmeeza
Kino wano waliwo ebiwandiiko ebimu eby’ekifo, ebigendereddwamu okutwala ekifo ekitono ennyo ekyesimbye, okulaga engeri ensengeka eyeesimbye gy’ekola mu butoffaali obusoose.
Akatoffaali kano kasikira vertical-align: middle;okuva ku mmeeza
Akatoffaali kano kasikira vertical-align: middle;okuva ku mmeeza
Akatoffaali kano kakwatagana okutuuka waggulu.
Kino wano waliwo ebiwandiiko ebimu eby’ekifo, ebigendereddwamu okutwala ekifo ekitono ennyo ekyesimbye, okulaga engeri ensengeka eyeesimbye gy’ekola mu butoffaali obusoose.
<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>
Okuziyiza sitayiro zonna okukulukuta ku mmeeza eziteekeddwa mu kisenge, tukozesa ekisunsula eky’okugatta omwana ( >) mu CSS yaffe. Okuva bwe twetaaga okutunuulira tds ne ths zonna mu thead, tbody, ne tfoot, selector yaffe yandirabise nga mpanvu nnyo awatali yo. Nga bwe kiri, tukozesa .table > :not(caption) > * > *ekisunsula ekirabika obulungi ennyo okutunuulira tds ne ths zonna eza .table, naye tewali ku mmeeza yonna eyinza okubeera nested.
Weetegereze nti bw’ogattako <tr>s ng’abaana obutereevu ab’emmeeza, abo <tr>bajja kuzingibwa mu a <tbody>nga bwe kibadde, bwe kityo ne kifuula abasunsula baffe okukola nga bwe kigendereddwa.
A <caption>ekola nga omutwe gw’emmeeza. Kiyamba abakozesa abalina screen readers okuzuula emmeeza n’okutegeera kye kikwatako ne basalawo oba baagala okugisoma.
Olukalala lw'abakozesa
# .
Okusooka
Okusembayo
Okukwaata
1.
Mark
Otto bwe yabadde
@mdo
2.
Yakobo
Thornton nga bwe kiri
@obunene
3.
Larry Ekinyonyi
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Osobola n'okuteeka <caption>waggulu ku mmeeza nga .caption-top.
Olukalala lw'abakozesa
# .
Okusooka
Okusembayo
Okukwaata
1.
Mark
Otto bwe yabadde
@mdo
2.
Yakobo
Thornton nga bwe kiri
@obunene
3.
Larry
Ekinyonyi
@twitter
<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>
Emmeeza eziddamu
Emmeeza eziddamu zisobozesa emmeeza okutambula mu bbanga mu ngeri ennyangu. Fuula emmeeza yonna okuddamu mu bifo byonna eby'okulaba ng'ozinga a .tablene .table-responsive. Oba, londa ekifo ekisinga obunene eky’okumenyawo kw’olina okuba n’emmeeza eddamu okutuukako ng’okozesa .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Okusala/okusalako mu ngeri eyeesimbye
Emmeeza eziddamu zikozesa overflow-y: hidden, esalako ebirimu byonna ebisukka wansi oba waggulu ku mbiriizi z’emmeeza. Okusingira ddala, kino kiyinza okusalako menu ezikka wansi ne widgets endala ez’ekibiina eky’okusatu.
Bulijjo addamu
Across buli breakpoint, kozesa .table-responsiveku horizontally scrolling emmeeza.
Kozesa .table-responsive{-sm|-md|-lg|-xl|-xxl}nga bwe kyetaagisa okukola emmeeza eziddamu okutuuka ku kifo ekimu eky’okumenyawo. Okuva ku kifo ekyo eky’okumenya n’okudda waggulu, emmeeza ejja kweyisa mu ngeri eya bulijjo so si kutambula mu bbanga.
Emmeeza zino ziyinza okulabika nga zimenyese okutuusa nga sitayiro zazo ez'okuddamu zikola ku bugazi bw'ekifo eky'okulaba obw'enjawulo.