Matsalwa na swikombiso swa ku hlawula ku endla xitayili xa matafula (hi ku nyikiwa ku tirhisiwa ka wona loku tolovelekeke eka ti-plugin ta JavaScript) na Bootstrap.
Eka tluka leri
Nkatsakanyo
Hikwalaho ka ku tirhisiwa lokukulu ka <table>swiaki eka switirhisiwa swa vanhu va vunharhu ku fana na tikhalendara na vahlawuri va masiku, matafula ya Bootstrap i ku hlawula ku nghena . Engetelani tlilasi ya le hansi .tableeka yin’wana ni yin’wana <table>, kutani u andlala hi titlilasi ta hina ta mucinci leti nga hlawuriki kumbe switayele swa ntolovelo. Switayili hinkwaswo swa matafula a swi dyi ndzhaka eka Bootstrap, leswi vulaka leswaku matafula wahi na wahi lama pfanganisiweke ya nga endliwa xitayili hi yoxe eka mutswari.
Hi ku tirhisa xikombiso xa tafula xa xisekelo swinene, hi leyi ndlela leyi .tablematafula lama simekiweke eka -based ma langutekaka ha yona eka Bootstrap.
# .
Sungula
Hetelela
Khoma
1.
Marka
Otto
@mdo
2.
Yakobe
Thornton
@mafurha
3.
Larry wa Xinyenyana
@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>
Swihlawulekisi swa swilo
Tirhisa titlilasi ta mongo ku penda matafula, tilayini ta tafula kumbe tisele ha yin’we.
Tlilasi
Nhlokomhaka
Nhlokomhaka
Ku tlula
Sele
Sele
Phurayimari
Sele
Sele
Xikolo xa vumbirhi
Sele
Sele
Humelela
Sele
Sele
Nghozi
Sele
Sele
Xilemukisi
Sele
Sele
Info
Sele
Sele
Rivoni
Sele
Sele
Xinyama
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>
Ku hundzisela nhlamuselo eka thekinoloji yo pfuneta
Ku tirhisa muvala ku engetela nhlamuselo swi nyika ntsena xikombiso xa xivono, lexi nga ta ka xi nga hundziseriwi eka vatirhisi va thekinoloji yo pfuneta – ku fana na swihlaya swa xikirini. Tiyisisa leswaku mahungu lama kombisiweke hi muvala ya le rivaleni eka nhundzu hi yoxe (xikombiso tsalwa leri vonakaka), kumbe ya katsiwile hi tindlela tin’wana, ku fana na tsalwa ro engetela leri fihliweke na .visually-hiddentlilasi.
Matafula lama nga ni switlhokovetselo
Tilayini leti nga ni mitila
Tirhisa .table-stripedku engetela zebra-striping eka layini yihi na yihi ya tafula endzeni ka <tbody>.
# .
Sungula
Hetelela
Khoma
1.
Marka
Otto
@mdo
2.
Yakobe
Thornton
@mafurha
3.
Larry wa Xinyenyana
@twitter
<tableclass="table table-striped">
...
</table>
Titlilasi leti ti nga tlhela ti engeteriwa eka tinxaka ta tafula:
Hi sungula hi ku veka ndzhaku ka sele ya tafula hi --bs-table-bgnhundzu ya ntolovelo. Swihlawulekisi hinkwaswo swa tafula swi tlhela swi veka nhundzu yoleyo ya ntolovelo ku penda tisele ta tafula. Hi ndlela leyi, a hi ngheni ekhombyeni loko mihlovo leyi nga vonakiki ngopfu yi tirhisiwa tanihi swifaniso swa le ndzhaku swa tafula.
Kutani hi engetela ndzhuti wa bokisi ra inset eka tisele ta tafula na box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);to layer ehenhla ka yin'wana na yin'wana leyi boxiweke background-color. Hikuva hi tirhisa spread leyikulu naswona hi nga ri na blur, muvala wu ta va wa monotone. Leswi --bs-table-accent-bgyi nga set hi default, a hi na ndzhuti wa bokisi ra default.
Loko ku engeteriwa either .table-striped, .table-hoverkumbe .table-activetitlilasi, the --bs-table-accent-bgyi vekiwa eka muvala lowu nga vonakiki ngopfu ku endla mihlovo ya le ndzhaku.
Eka muxaka wun’wana ni wun’wana wa tafula, hi humesa --bs-table-accent-bgmuvala lowu nga ni ku hambana lokukulu swinene ku ya hi muvala wolowo. Hi xikombiso, muvala wa accent for .table-primaryi wa ntima kasi .table-darkwu na muvala wa accent wo vonikela.
Mihlovo ya tsalwa ni ya ndzilakano yi endliwa hi ndlela leyi fanaka, naswona mihlovo ya yona yi kumiwa ndzhaka hi ku tiyimisela.
Endzhaku ka swifaniso swi languteka hi ndlela leyi:
Ti cells ta tafula ta <thead>ti tshama tiri vertical aligned kuya ehansi. Tisele ta tafula eka ti <tbody>dya ndzhaka ya ku ringanana ka tona ku suka <table>naswona ti ringanisiwa eka the the top hi ku tiyimisela. Tirhisa titlilasi ta ku ringanisa loku yimisiweke ku tlhela u ringanisa laha swi lavekaka kona.
Nhlokomhaka ya 1
Nhlokomhaka ya 2
Nhlokomhaka ya 3
Nhlokomhaka ya 4
Sele leyi yi dya ndzhaka vertical-align: middle;eka tafula
Sele leyi yi dya ndzhaka vertical-align: middle;eka tafula
Sele leyi yi dya ndzhaka vertical-align: middle;eka tafula
Leswi laha i tsalwa rin’wana ra xikhomela-ndhawu, leri kunguhatiweke ku teka ndhawu yo tala swinene yo yima, ku kombisa ndlela leyi ku ringanisa loku yimisiweke ku tirhaka ha yona eka tisele leti hundzeke.
Sele leyi yi dya ndzhaka vertical-align: bottom;ku suka eka layini ya tafula
Sele leyi yi dya ndzhaka vertical-align: bottom;ku suka eka layini ya tafula
Sele leyi yi dya ndzhaka vertical-align: bottom;ku suka eka layini ya tafula
Leswi laha i tsalwa rin’wana ra xikhomela-ndhawu, leri kunguhatiweke ku teka ndhawu yo tala swinene yo yima, ku kombisa ndlela leyi ku ringanisa loku yimisiweke ku tirhaka ha yona eka tisele leti hundzeke.
Sele leyi yi dya ndzhaka vertical-align: middle;eka tafula
Sele leyi yi dya ndzhaka vertical-align: middle;eka tafula
Sele leyi yi ringaniseriwe ehenhla.
Leswi laha i tsalwa rin’wana ra xikhomela-ndhawu, leri kunguhatiweke ku teka ndhawu yo tala swinene yo yima, ku kombisa ndlela leyi ku ringanisa loku yimisiweke ku tirhaka ha yona eka tisele leti hundzeke.
<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>
Ku endla swisaka
Switayili swa ndzilakano, switayele leswi tirhaka, na ku hambana ka tafula a swi dyi ndzhaka hi matafula lama pfanganisiweke.
Ku sivela switayele swihi na swihi ku vupfa eka matafula lama pfanganisiweke, hi tirhisa xihlawulekisi xa xihlanganisi xa n’wana ( >) eka CSS ya hina. Tanihi leswi hi lavaka ku kongomisa ti- tds na thti-s hinkwato eka thead, tbody, na tfoot, xihlawulekisi xa hina a xi ta languteka xi lehe swinene handle ka xona. Hi ndlela yaleyo, hi tirhisa xihlawulekisi lexi langutekaka xi nga tolovelekanga .table > :not(caption) > * > *ku kongomisa hinkwaswo swa tds na ths swa .table, kambe ku hava na yin’we ya matafula wahi na wahi lama nga vaka kona lama pfanganisiweke.
Xiya leswaku loko u engetela <tr>s tanihi vana vo kongoma va tafula, sweswo <tr>swi ta phutseriwe hi a <tbody>hi ku tiyimisela, xisweswo swi endla leswaku swihlawulekisi swa hina swi tirha hilaha swi kunguhatiweke hakona.
Anatomy
Nhloko ya tafula
Ku fana na matafula na matafula ya ntima, tirhisa titlilasi ta swihundzuluxi .table-lightkumbe .table-darkku endla leswaku <thead>s yi vonaka yi ri ya grey yo vonikela kumbe ya ntima.
A <caption>yi tirha ku fana na nhlokomhaka ya tafula. Yi pfuna vatirhisi lava nga ni swihlaya-swikirini leswaku va kuma tafula ni ku twisisa leswaku ri vulavula hi yini ni ku endla xiboho xa loko va lava ku ri hlaya.
Nxaxamelo wa vatirhisi
# .
Sungula
Hetelela
Khoma
1.
Marka
Otto
@mdo
2.
Yakobe
Thornton
@mafurha
3.
Larry wa Xinyenyana
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
U nga ha tlhela u veka <caption>ehenhla ka tafula hi .caption-top.
Nxaxamelo wa vatirhisi
# .
Sungula
Hetelela
Khoma
1.
Marka
Otto
@mdo
2.
Yakobe
Thornton
@mafurha
3.
Larry
Xinyenyana
@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>
Matafula lama hlamulaka
Matafula lama hlamulaka ma pfumelela matafula ku rhendzeleka hi ndlela yo olova hi ku olova. Endla tafula rihi na rihi ri hlamula eka swivono hinkwaswo hi ku phutsela a .tablehi .table-responsive. Kumbe, hlawula ndhawu leyikulu yo wisa leyi u nga ta va ni tafula leri hlamulaka ha yona hi ku tirhisa .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Ku tsemiwa/ku tsemiwa loku yimisiweke
Matafula lama hlamulaka ma tirhisa overflow-y: hidden, lama tsemaka rungula rihi na rihi leri hundzaka emakumu ya le hansi kumbe ya le henhla ya tafula. Ngopfu-ngopfu, leswi swi nga tsema timenyu leti nga ehansi ni switirhisiwa swin’wana swa vanhu van’wana.
Minkarhi hinkwayo u hlamula
Ku tsemakanya ndhawu yin’wana ni yin’wana yo wisa, tirhisa .table-responsiveeka matafula lama rhendzelekaka hi ndlela leyi nga etlhelo.
Tirhisa .table-responsive{-sm|-md|-lg|-xl|-xxl}hilaha swi lavekaka hakona ku tumbuluxa matafula lama hlamulaka ku fikela eka ndhawu yo karhi yo wisa. Ku suka eka ndhawu yoleyo yo tshoveka ku ya ehenhla, tafula ri ta tikhoma hi ndlela leyi tolovelekeke naswona ri nga rhendzeleki hi ndlela leyi nga etlhelo.
Matafula lawa ya nga ha vonaka ya tshovekile ku kondza switayele swa wona swo hlamula swi tirha eka ku anama ko karhi ka xivono.