Litokomane le mehlala ea ho khetha ho kenya litafole (ho fanoe ka tšebeliso e atileng ho li-plugins tsa JavaScript) ka Bootstrap.
Leqepheng lena
Kakaretso
Ka lebaka la ts'ebeliso e atileng ea <table>likarolo ho li-widget tsa mokha oa boraro joalo ka khalendara le likhetho tsa matsatsi, litafole tsa Bootstrap li khetha ho kena . Kenya sehlopha sa mantlha .tableho efe kapa efe <table>, ebe u atolosa ka litlelase tsa rona tsa boikhethelo tsa ho feto-fetoha kapa mekhoa ea tloaelo. Mefuta eohle ea litafole ha e futsitsoe ho Bootstrap, ho bolelang hore litafole life kapa life tse hahelletsoeng li ka ngoloa ntle le motsoali.
U sebelisa letšoao la motheo la tafole, mona ke hore na .tablelitafole tse thehiloeng ho Bootstrap li shebahala joang.
#
Ea pele
Qetellong
Tšoara
1
Tšoaea
Otto
@mdo
2
Jakobo
Thornton
@mafura
3
Larry Nonyana
@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>
Mefuta e fapaneng
Sebelisa litlelase tsa maemo ho litafole tsa mebala, mela ea litafole kapa lisele tse ikemetseng.
Sehlopha
Sehlooho
Sehlooho
Ea kamehla
Sele
Sele
Ea mantlha
Sele
Sele
Ea bobeli
Sele
Sele
Katleho
Sele
Sele
Kotsi
Sele
Sele
Tlhokomediso
Sele
Sele
Info
Sele
Sele
Leseli
Sele
Sele
Lefifi
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>
Ho fetisa moelelo ho litheknoloji tse thusang
Ho sebelisa mebala ho eketsa moelelo ho fana feela ka pontšo ea pono, e ke keng ea fetisetsoa ho basebelisi ba theknoloji e thusang - joalo ka sebali sa skrine. Netefatsa hore tlhahisoleseding e hlahisitsweng ke mmala e ka ba e totobetseng ho tswa ho dikahare ka boyona (mohlala, mongolo o bonahalang), kapa e kenyeleditswe ka mekgwa e meng, e kang mongolo o tlatsetso o patilweng le .visually-hiddensehlopha.
Litafole tse phahamisitsoeng
Mela e methalo
Sebelisa .table-stripedho kenya liqoaha-striping moleng ofe kapa ofe oa tafole ka har'a <tbody>.
#
Ea pele
Qetellong
Tšoara
1
Tšoaea
Otto
@mdo
2
Jakobo
Thornton
@mafura
3
Larry Nonyana
@twitter
<tableclass="table table-striped">
...
</table>
Lihlopha tsena li ka eketsoa ho mefuta e fapaneng ea litafole:
Re qala ka ho beha bokamorao ba sele ea tafole e nang le --bs-table-bgthepa ea moetlo. Mefuta eohle ea litafole ebe e beha thepa eo e tloaelehileng ho etsa mebala ea lisele tsa tafole. Ka tsela ena, ha re kene mathateng haeba mebala e sa bonahaleng e sebelisoa e le semelo sa tafole.
Ebe re kenya moriti oa lebokose la inset holim'a lisele tsa tafole ka ho beha box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);holim'a ntho leha e le efe e boletsoeng background-color. Hobane re sebelisa sekhahla se seholo mme ha se na lefifi, 'mala o tla ba monotone. Kaha --bs-table-accent-bge sa hlophisoa ka ho sa feleng, ha re na moriti oa lebokose la kamehla.
Ha e 'ngoe ea .table-striped, .table-hoverkapa .table-activelitlelase li eketsoa, --bs-table-accent-bge behiloe ho 'mala o semitransparent ho etsa mebala e ka morao.
Bakeng sa phapang e 'ngoe le e' ngoe ea tafole, re hlahisa --bs-table-accent-bg'mala o nang le phapang e phahameng ka ho fetisisa ho itšetlehile ka' mala oo. Mohlala, 'mala oa lentsoe o .table-primarylefifi ha .table-darko na le' mala o bobebe.
Mebala le mebala ea moeli li hlahisoa ka tsela e ts'oanang, 'me mebala ea tsona e futsitsoe ka mokhoa o tloaelehileng.
Lisele tsa tafole <thead>li lula li theohile li le ka tlase. Lisele tsa tafole li <tbody>rua tekano ea tsona ho tloha <table>'me li hlophisitsoe ho ea holimo ka ho sa feleng. Sebelisa lihlopha tse otlolohileng ho ikamahanya hape moo ho hlokahalang.
Sehlooho sa 1
Sehlooho sa 2
Sehlooho sa 3
Sehlooho sa 4
Sele ena e rua vertical-align: middle;ho tloha tafoleng
Sele ena e rua vertical-align: middle;ho tloha tafoleng
Sele ena e rua vertical-align: middle;ho tloha tafoleng
Mona ke mongolo oa setšoantšisi, o reretsoeng ho nka sebaka se otlolohileng, ho bonts'a hore na tekano e otlolohileng e sebetsa joang liseleng tse tlang pele.
Sele ena e rua vertical-align: bottom;ho tloha moleng oa tafole
Sele ena e rua vertical-align: bottom;ho tloha moleng oa tafole
Sele ena e rua vertical-align: bottom;ho tloha moleng oa tafole
Mona ke mongolo oa setšoantšisi, o reretsoeng ho nka sebaka se otlolohileng, ho bonts'a hore na tekano e otlolohileng e sebetsa joang liseleng tse tlang pele.
Sele ena e rua vertical-align: middle;ho tloha tafoleng
Sele ena e rua vertical-align: middle;ho tloha tafoleng
Sele ena e ikamahanya le hodimo.
Mona ke mongolo oa setšoantšisi, o reretsoeng ho nka sebaka se otlolohileng, ho bonts'a hore na tekano e otlolohileng e sebetsa joang liseleng tse tlang pele.
<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>
Nesting
Litaele tsa moeli, mekhoa e sebetsang, le mefuta e fapaneng ea litafole ha li futsoe ke litafole tse behiloeng.
Ho thibela mefuta efe kapa efe hore e se ke ea lutla ho litafole tse behiloeng, re sebelisa sekhetho sa bana ( >) ho CSS ea rona. Kaha re hloka ho shebisisa tsohle tds le ths ho thead, tbody, le tfoot, mokhethoa oa rona o tla shebahala a le telele haholo ntle le eona. Ka hona, re sebelisa sekhetho se shebahalang se sa tloaeleha ho shebisisa .table > :not(caption) > * > *tsohle tdtsa , empa thha .tableho le e 'ngoe ea litafole tse ka bang teng.
Hlokomela hore haeba u eketsa <tr>s joalo ka bana ba tafole ka kotloloho, bao ba <tr>tla koaheloa ka ho sa <tbody>feleng, ka hona ho etsa hore bakhethoa ba rona ba sebetse joalo ka ha ho reriloe.
Anatomy
Hlooho ea tafole
Joalo ka litafole le litafole tse lefifi, sebelisa litlelase tsa ho fetola .table-lightkapa .table-darkho etsa hore <thead>e bonahale e le bobebe kapa boputsoa bo lefifi.
E <caption>sebetsa joalo ka sehlooho sa tafole. E thusa basebelisi ba nang le libali tsa skrine ho fumana tafole le ho utloisisa hore na e bua ka eng le ho etsa qeto ea hore na ba batla ho e bala.
Lenane la basebelisi
#
Ea pele
Qetellong
Tšoara
1
Tšoaea
Otto
@mdo
2
Jakobo
Thornton
@mafura
3
Larry Nonyana
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
U ka boela ua beha <caption>ka holim'a tafole ka .caption-top.
Lenane la basebelisi
#
Ea pele
Qetellong
Tšoara
1
Tšoaea
Otto
@mdo
2
Jakobo
Thornton
@mafura
3
Larry
Nonyana
@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>
Litafole tse arabelang
Litafole tse arabelang li lumella litafole ho tsamaisoa ka mokhoa o tšekaletseng habonolo. Etsa hore tafole efe kapa efe e arabele libakeng tsohle tsa pono ka ho phuthela .tableka .table-responsive. Kapa, khetha sebaka se seholo seo u ka bang le tafole e arabelang ho fihlela ka ho sebelisa .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Keketso e emeng e otlolohileng
Litafole tse arabelang li sebelisa overflow-y: hidden, e tlosang litaba life kapa life tse fetang bokatlase kapa lipheletsong tse kaholimo tsa tafole. Haholo-holo, sena se ka fokotsa menyetla ea ho theoha le li-widget tse ling tsa motho oa boraro.
Kamehla e arabela
Hohle sebakeng se seng le se seng, sebelisa .table-responsivelitafole tse otlolohileng.
Sebelisa .table-responsive{-sm|-md|-lg|-xl|-xxl}kamoo ho hlokahalang ho theha litafole tse arabelang ho fihlela sebakeng se itseng. Ho tloha sebakeng seo ho ea holimo ho ea holimo, tafole e tla itšoara ka mokhoa o tloaelehileng 'me e se ke ea tsamaea e tšekaletse.
Litafole tsena li ka 'na tsa bonahala li robehile ho fihlela mekhoa ea bona ea ho arabela e sebetsa ho bophara bo itseng ba pono.