Akwụkwọ na ihe atụ maka ịkebe ịke tebụl (nyere ha na-ejikarị na Javascript plugins) na Bootstrap.
Ihe atụ
N'ihi iji tebụl eme ihe n'ofe wijetị ndị ọzọ dị ka kalenda na ndị na- ahọrọ ụbọchị, anyị haziri tebụl anyị ka ọ bụrụ nbanye . Naanị tinye klas isi na nke .tableọ bụla <table>, wee gbasaa na ụdị omenala ma ọ bụ klaasị modifier gụnyere dị iche iche.
N'iji akara nrịbama tebụl kachasị, nke a bụ ka .tabletebụl dabere na Bootstrap. A na-eketa ụdị tebụl niile na Bootstrap 4 , nke pụtara na a ga-edozi tebụl ọ bụla akwụ ụgwọ n'otu ụzọ ahụ nne na nna.
Tinye .table-borderedmaka oke n'akụkụ niile nke tebụl na sel.
#
Mbụ
Ikpeazụ
Jikwaa
1
Mark
Otto
@mdo
2
Jekọb
Thornton
@abụba
3
Larry The Bird
@twitter
<tableclass="table table-bordered"><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>
#
Mbụ
Ikpeazụ
Jikwaa
1
Mark
Otto
@mdo
2
Jekọb
Thornton
@abụba
3
Larry The Bird
@twitter
<tableclass="table table-bordered table-dark"><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>
Tebụl enweghị oke
Tinye .table-borderlessmaka tebụl na-enweghị oke.
#
Mbụ
Ikpeazụ
Jikwaa
1
Mark
Otto
@mdo
2
Jekọb
Thornton
@abụba
3
Larry The Bird
@twitter
<tableclass="table table-borderless"><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>
.table-borderlessnwekwara ike iji na tebụl gbara ọchịchịrị.
#
Mbụ
Ikpeazụ
Jikwaa
1
Mark
Otto
@mdo
2
Jekọb
Thornton
@abụba
3
Larry The Bird
@twitter
<tableclass="table table-borderless table-dark"><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>
Ahịrị ndị nwere ike imegharị
Tinye .table-hoveriji mee ka ọnọdụ hover na ahịrị tebụl n'ime a <tbody>.
#
Mbụ
Ikpeazụ
Jikwaa
1
Mark
Otto
@mdo
2
Jekọb
Thornton
@abụba
3
Larry The Bird
@twitter
<tableclass="table table-hover"><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>
#
Mbụ
Ikpeazụ
Jikwaa
1
Mark
Otto
@mdo
2
Jekọb
Thornton
@abụba
3
Larry The Bird
@twitter
<tableclass="table table-hover table-dark"><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>
Obere okpokoro
Tinye .table-smka tebụl dịkwuo kọmpat site n'ịbelata ihe mgbochi cell na ọkara.
#
Mbụ
Ikpeazụ
Jikwaa
1
Mark
Otto
@mdo
2
Jekọb
Thornton
@abụba
3
Larry The Bird
@twitter
<tableclass="table table-sm"><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>
#
Mbụ
Ikpeazụ
Jikwaa
1
Mark
Otto
@mdo
2
Jekọb
Thornton
@abụba
3
Larry The Bird
@twitter
<tableclass="table table-sm table-dark"><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>
Klaasị ihe atụ
Jiri klaasị okirikiri mee ka ahịrị tebụl agba agba ma ọ bụ sel nke ọ bụla.
Klas
Isi
Isi
Na-arụ ọrụ
Cell
Cell
Ọ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 rows --><trclass="table-active">...</tr><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-active">...</td><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>
Ọdịiche dị n'okirikiri tebụl oge niile adịghị na tebụl gbara ọchịchịrị, agbanyeghị, ịnwere ike iji ederede ma ọ bụ akụrụngwa ndabere iji nweta ụdịrị ahụ.
#
Isi
Isi
1
Cell
Cell
2
Cell
Cell
3
Cell
Cell
4
Cell
Cell
5
Cell
Cell
6
Cell
Cell
7
Cell
Cell
8
Cell
Cell
9
Cell
Cell
<!-- On rows --><trclass="bg-primary">...</tr><trclass="bg-success">...</tr><trclass="bg-warning">...</tr><trclass="bg-danger">...</tr><trclass="bg-info">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="bg-primary">...</td><tdclass="bg-success">...</td><tdclass="bg-warning">...</td><tdclass="bg-danger">...</td><tdclass="bg-info">...</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 .sr-onlyklaasị.
Mepụta tebụl ndị na-anabata ya site na ijikọ nke ọ bụla , .tablena .table-responsive{-sm|-md|-lg|-xl}-eme ka tebụl pịgharịa n'ụzọ kwụ ọtọ n'ebe max-widthnkwụsịtụ nke ọ bụla ruru (ma ọ bụghị gụnyere) 576px, 768px, 992px, na 1120px, otu n'otu.
Rịba ama na ebe ọ bụ na ihe nchọgharị anaghị akwado
ajụjụ ọnọdụ mpaghara ugbu a , anyị na-arụ ọrụ na njedebe
min-na max-prefixes . viewport nwere obosara akụkụ (nke nwere ike ime n'okpuru ọnọdụ ụfọdụ na ngwaọrụ dpi dị elu, dịka ọmụmaatụ) site na iji ụkpụrụ nwere nkenke dị elu maka ntụnyere ndị a. .
Nkọwa okwu
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
Nnụnụ ahụ
@twitter
<tableclass="table"><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}.
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} 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.