Akwụkwọ na ihe atụ maka ịkebe ịke tebụl (nyere ha na-ejikarị na Javascript plugins) na Bootstrap.
Na ibe a
Nchịkọta
N'ihi ojiji nke ihe n'ofe wijetị ndị ọzọ dị ka kalenda na ndị na- ahọrọ<table> ụbọchị, tebụl Bootstrap abanyela . Tinye klas isi na nke ọ bụla , wee gbasaa na klas mgbanwe nhọrọ anyị ma ọ bụ ụdị omenala. A naghị eketa ụdị tebụl niile na Bootstrap, nke pụtara na enwere ike ịhazi tebụl akwụrụ ọ bụla n'adabereghị na nne ma ọ bụ nna..table<table>
N'iji akara nrịbama tebụl kachasị, nke a bụ ka .tabletebụl dabere na Bootstrap.
#
Mbụ
Ikpeazụ
Jikwaa
1
Mark
Otto
@mdo
2
Jekọb
Thornton
@abụba
3
Larry The Bird
@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>
Ụdị dị iche iche
Jiri klaasị gburugburu mee ka tebụl, ahịrị tebụl ma ọ bụ sel dị iche iche agba agba.
Klas
Isi
Isi
Ọdabara
Cell
Cell
Isi
Cell
Cell
Secondary
Cell
Cell
Ihe ịga nke ọma
Cell
Cell
Ihe egwu
Cell
Cell
Ịdọ aka ná ntị
Cell
Cell
Ozi
Cell
Cell
Ìhè
Cell
Cell
Ọchịchịrị
Cell
Cell
<!-- 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>
Na-eme ka ọ pụta ìhè na teknụzụ enyemaka
Iji agba iji gbakwunye ihe ọ pụtara naanị na-enye ihe ngosi anya, nke a na-agaghị ebugara ndị ọrụ teknụzụ enyemaka - dị ka ndị na-agụ ihuenyo. Gbaa mbọ hụ na ozi nke agba gosipụtara pụtara ìhè site na ọdịnaya n'onwe ya (dịka ederede a na-ahụ anya), ma ọ bụ tinye ya site na ụzọ ọzọ, dị ka ederede agbakwunyere zoro ezo na .visually-hiddenklaasị.
Tebụl agbadoro anya
Ahịrị ndị dọwara adọwa
Jiri .table-stripedtinye eriri zebra na ahịrị tebụl ọ bụla n'ime <tbody>.
Mee ka ahịrị okpokoro ma ọ bụ cell pụta ìhè site na ịgbakwunye otu .table-activeklas.
#
Mbụ
Ikpeazụ
Jikwaa
1
Mark
Otto
@mdo
2
Jekọb
Thornton
@abụba
3
Larry The Bird
@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>
#
Mbụ
Ikpeazụ
Jikwaa
1
Mark
Otto
@mdo
2
Jekọb
Thornton
@abụba
3
Larry The Bird
@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>
Kedu ka ụdị dị iche iche na tebụl accented si arụ ọrụ?
Maka tebụl ndị nwere ụda olu ( ahịrị ndị nwere akara , ahịrị ndị nwere ike ịgbagharị , na tebụl arụ ọrụ ), anyị jiri usoro ụfọdụ mee ka mmetụta ndị a rụọ ọrụ maka ụdị tebụl anyị niile :
Anyị na-amalite site na ịtọ ndabere nke cell table na ihe --bs-table-bgonwunwe omenala. Ọdịiche dị iche iche nke tebụl wee dozie akụrụngwa omenala ahụ iji mee ka mkpụrụ ndụ tebụl dị agba. N'ụzọ dị otú a, anyị anaghị enweta nsogbu ma ọ bụrụ na-eji ọkara transperent agba dị ka okpokoro ndabere.
Mgbe ahụ, anyị na-agbakwunye inset igbe onyinyo na tebụl cell na box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);oyi akwa n'elu nke ọ bụla akọwapụtara background-color. N'ihi na anyị na-eji nnukwu mgbasa na enweghị ntụpọ, agba ga-abụ monotone. Ebe ọ --bs-table-accent-bgbụ na edoghị ya na ndabara, anyị enweghị onyinyo igbe ndabara.
Mgbe agbakwunyere otu .table-striped, .table-hoverma ọ bụ .table-activeklaasị, --bs-table-accent-bga na-edobe ya ka ọ bụrụ agba ọkara transperent iji mee ka ndabere ya dị agba.
Maka ụdị tebụl ọ bụla, anyị na-emepụta --bs-table-accent-bgagba nwere ọdịiche kachasị elu dabere na agba ahụ. Dịka ọmụmaatụ, agba ụda olu maka .table-primaryna-agba ọchịchịrị ka ọ .table-darknwere agba ụda olu dị ọkụ.
A na-emepụta agba ederede na oke oke n'otu ụzọ ahụ, a na-eketakwa agba ha na ndabara.
Selụ okpokoro nke <thead>na-adakọrịrị n'ala ala. Selụ okpokoro nọ na <tbody>-eketa nhazigharị ha site <table>na ndabara na-adaba n'elu. Jiri klaasị kwụ n'ahịrị kwụ n'ahịrị ka meziekwa ebe achọrọ ya.
Isi nke 1
Isi nke 2
Isi nke 3
Isi nke 4
Nke a cell ketara vertical-align: middle;na tebụl
Nke a cell ketara vertical-align: middle;na tebụl
Nke a cell ketara vertical-align: middle;na tebụl
Nke a bụ ụfọdụ ederede idobe, nke e bu n'obi were obere oghere kwụ ọtọ, iji gosi ka nkwekọ kwụ ọtọ si arụ ọrụ na sel ndị bu ụzọ.
Nke a cell na-eketa vertical-align: bottom;n'ahịrị okpokoro
Nke a cell na-eketa vertical-align: bottom;n'ahịrị okpokoro
Nke a cell na-eketa vertical-align: bottom;n'ahịrị okpokoro
Nke a bụ ụfọdụ ederede idobe, nke e bu n'obi were obere oghere kwụ ọtọ, iji gosi ka nkwekọ kwụ ọtọ si arụ ọrụ na sel ndị bu ụzọ.
Nke a cell ketara vertical-align: middle;na tebụl
Nke a cell ketara vertical-align: middle;na tebụl
A kwadoro cell a n'elu.
Nke a bụ ụfọdụ ederede idobe, nke e bu n'obi were obere oghere kwụ ọtọ, iji gosi ka nkwekọ kwụ ọtọ si arụ ọrụ na sel ndị bu ụzọ.
<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>
Akwu
Ụdị oke ala, ụdị na-arụsi ọrụ ike, na ụdị tebụl anaghị eketa site na tebụl akwụ ụgwọ.
Iji gbochie ụdị ọ bụla ịdaba na tebụl akwụkwụ, anyị na-eji ihe nchịkọta ụmụaka ( >) na CSS anyị. Ebe ọ bụ na anyị kwesịrị ilekwasị anya na tds na ths niile dị na thead, tbody, na tfoot, onye nhọpụta anyị ga-adị ogologo ogologo na-enweghị ya. Dị ka nke a, anyị na-eji onye na-ahọrọ ihe na-adịghị ahụkebe .table > :not(caption) > * > *iji gbado anya tds na ths nke s niile .table, mana ọ nweghị tebụl ọ bụla nwere ike ime.
Rịba ama na ọ bụrụ na ị gbakwunye <tr>s dị ka ụmụaka kpọmkwem nke tebụl, a <tr>ga-ekekọta <tbody>ndị ahụ na ndabara, si otú a na-eme ka ndị na-ahọrọ anyị rụọ ọrụ dịka e bu n'obi.
Anatomi
Isi tebụl
Yiri tebụl na tebụl gbara ọchịchịrị, jiri klaasị modifier .table-lightma ọ bụ .table-darkmee ka <thead>s yie ìhè ma ọ bụ isi awọ gbara ọchịchịrị.
A <caption>na-arụ ọrụ dị ka isi maka tebụl. Ọ na-enyere ndị ọrụ na ndị na-agụ ihuenyo aka ịchọta tebụl ma ghọta ihe ọ bụ ma kpebie ma ha chọrọ ịgụ ya.
Ndepụta ndị ọrụ
#
Mbụ
Ikpeazụ
Jikwaa
1
Mark
Otto
@mdo
2
Jekọb
Thornton
@abụba
3
Larry The Bird
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Ị nwekwara ike tinye <caption>n'elu tebụl na .caption-top.
Ndepụta ndị ọrụ
#
Mbụ
Ikpeazụ
Jikwaa
1
Mark
Otto
@mdo
2
Jekọb
Thornton
@abụba
3
Larry
Nnụnụ ahụ
@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>
Tebụl na-anabata
Tebụl ndị na-anabata ihe na-enye ohere ka a pịgharịa tebụl n'ahịrị n'ụzọ dị mfe. Mee ka tebụl ọ bụla na-anabata n'ofe ebe nlele niile site na .tableiji .table-responsive. Ma ọ bụ, họrọ ebe nkwụsịtụ kacha nke ị ga-eji nwee tebụl na-anabata ya site na iji .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Mkpọchi/ mkpọtu kwụ ọtọ
Tebụl na-anabata ihe na-eji overflow-y: hidden, nke na-ewepụ ọdịnaya ọ bụla na-agafe n'akụkụ ala ma ọ bụ elu nke tebụl. Karịsịa, nke a nwere ike ihichapụ menus dropdown na wijetị ndị ọzọ.
Na-anabata mgbe niile
N'ofe ebe nkwụsịtụ ọ bụla, jiri .table-responsivemaka tebụl mpịakọta kwụ ọtọ.
Jiri .table-responsive{-sm|-md|-lg|-xl|-xxl}dị ka ọ dị mkpa iji mepụta tebụl na-anabata ihe ruo otu ebe nkwụsịtụ. Site n'ebe nkwụsịtụ ahụ na elu, tebụl ga-akpa àgwà ka ọ na-adịghị pịgharịa na kehoraizin.
Tebụl ndị a nwere ike ịdị ka agbajiri agbaji ruo mgbe ụdị anabatara ha na-emetụta na obosara ihe nlele.