Matafula
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.
Swikombiso
Hikwalaho ka ku tirhisiwa lokukulu ka matafula eka switirhisiwa swa vanhu va vunharhu ku fana na tikhalendara na vahlawuri va masiku, hi endlile matafula ya hina leswaku ya va yo hlawula ku nghena . Just add the base class .table
to any <table>
, kutani u andlala hi switayele swa ntolovelo kumbe titlilasi ta hina to hambana-hambana leti katsiweke ta vacinci.
Hi ku tirhisa xikombiso xa tafula xa xisekelo swinene, hi leyi ndlela leyi .table
matafula lama simekiweke eka -based ma langutekaka ha yona eka Bootstrap. Switayili hinkwaswo swa matafula swi dya ndzhaka eka Bootstrap 4 , leswi vulaka leswaku matafula wahi na wahi lama pfanganisiweke ya ta endliwa hi ndlela leyi fanaka na ya mutswari.
# . | Sungula | Hetelela | Khoma |
---|---|---|---|
1. | Marka | Otto | @mdo |
2. | Yakobe | Thornton | @mafurha |
3. | Larry | Xinyenyana |
U nga ha tlhela u hundzuluxa mihlovo—hi matsalwa yo olova eka swivumbeko swa ntima—hi .table-dark
.
# . | Sungula | Hetelela | Khoma |
---|---|---|---|
1. | Marka | Otto | @mdo |
2. | Yakobe | Thornton | @mafurha |
3. | Larry | Xinyenyana |
Swihlawulekisi swa nhloko ya tafula
Ku fana na matafula na matafula ya ntima, tirhisa titlilasi ta swihundzuluxi .thead-light
kumbe .thead-dark
ku endla leswaku <thead>
s yi vonaka yi ri ya grey yo vonikela kumbe ya ntima.
# . | Sungula | Hetelela | Khoma |
---|---|---|---|
1. | Marka | Otto | @mdo |
2. | Yakobe | Thornton | @mafurha |
3. | Larry | Xinyenyana |
# . | Sungula | Hetelela | Khoma |
---|---|---|---|
1. | Marka | Otto | @mdo |
2. | Yakobe | Thornton | @mafurha |
3. | Larry | Xinyenyana |
Tilayini leti nga ni mitila
Tirhisa .table-striped
ku 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 | Xinyenyana |
# . | Sungula | Hetelela | Khoma |
---|---|---|---|
1. | Marka | Otto | @mdo |
2. | Yakobe | Thornton | @mafurha |
3. | Larry | Xinyenyana |
Tafula leri nga ni ndzilakano
Engetelani .table-bordered
ku kuma mindzilakano eka matlhelo hinkwawo ya tafula na tisele.
# . | Sungula | Hetelela | Khoma |
---|---|---|---|
1. | Marka | Otto | @mdo |
2. | Yakobe | Thornton | @mafurha |
3. | Larry wa Xinyenyana |
# . | Sungula | Hetelela | Khoma |
---|---|---|---|
1. | Marka | Otto | @mdo |
2. | Yakobe | Thornton | @mafurha |
3. | Larry wa Xinyenyana |
Tafula leri nga riki na ndzilakano
Engetelani .table-borderless
tafula leri nga riki na mindzilakano.
# . | Sungula | Hetelela | Khoma |
---|---|---|---|
1. | Marka | Otto | @mdo |
2. | Yakobe | Thornton | @mafurha |
3. | Larry wa Xinyenyana |
.table-borderless
yi nga ha tlhela yi tirhisiwa eka matafula lama nga ni munyama.
# . | Sungula | Hetelela | Khoma |
---|---|---|---|
1. | Marka | Otto | @mdo |
2. | Yakobe | Thornton | @mafurha |
3. | Larry wa Xinyenyana |
Tilayini leti nga hoverable
Engetela .table-hover
ku endla leswaku xiyimo xa hover xi tirha eka tilayini ta tafula endzeni ka <tbody>
.
# . | Sungula | Hetelela | Khoma |
---|---|---|---|
1. | Marka | Otto | @mdo |
2. | Yakobe | Thornton | @mafurha |
3. | Larry wa Xinyenyana |
# . | Sungula | Hetelela | Khoma |
---|---|---|---|
1. | Marka | Otto | @mdo |
2. | Yakobe | Thornton | @mafurha |
3. | Larry wa Xinyenyana |
Tafula leritsongo
Engetelani .table-sm
ku endla leswaku matafula ya hlangana swinene hiku tsema cell padding hi hafu.
# . | Sungula | Hetelela | Khoma |
---|---|---|---|
1. | Marka | Otto | @mdo |
2. | Yakobe | Thornton | @mafurha |
3. | Larry wa Xinyenyana |
# . | Sungula | Hetelela | Khoma |
---|---|---|---|
1. | Marka | Otto | @mdo |
2. | Yakobe | Thornton | @mafurha |
3. | Larry wa Xinyenyana |
Titlilasi ta mongo
Tirhisa titlilasi ta mongo ku penda tilayini ta tafula kumbe tisele ha yin’we.
Tlilasi | Nhlokomhaka | Nhlokomhaka |
---|---|---|
Hanya | Sele | Sele |
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 |
Swihlawulekisi swa le ndzhaku swa tafula swa nkarhi na nkarhi a swi kumeki na tafula ra munyama, hambiswiritano, u nga tirhisa switirhisiwa swa tsalwa kumbe swa le ndzhaku ku fikelela switayele leswi fanaka.
# . | Nhlokomhaka | Nhlokomhaka |
---|---|---|
1. | Sele | Sele |
2. | Sele | Sele |
3. | Sele | Sele |
4. | Sele | Sele |
5. | Sele | Sele |
6. | Sele | Sele |
7. | Sele | Sele |
8. | Sele | Sele |
9. | Sele | Sele |
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 .sr-only
tlilasi.
Endla matafula lama hlamulaka hi ku phutsela rin’wana ni rin’wana .table
hi .table-responsive{-sm|-md|-lg|-xl}
, u endla leswaku tafula ri rhendzeleka hi ndlela yo olova eka ndhawu yin’wana ni yin’wana max-width
yo tsemakanya ku fika eka (kambe ku nga katsi) 576px, 768px, 992px, na 1120px, hi ku landzelelana.
Xiya leswaku tanihileswi swihlamusela-marito sweswi swi nga seketeliki swivutiso swa xiyimo xa rhengu , hi tirha ku rhendzela swipimelo swa min-
na max-
swirhangi na swivono leswi nga na ku anama ka xiphemu (leswi nga humelelaka ehansi ka swiyimo swo karhi eka switirhisiwa swa dpi ya le henhla, hi xikombiso) hi ku tirhisa mimpimo leyi nga na vukheta bya le henhla eka ku pimanisiwa loku .
Swifaniso swa le hansi
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.
# . | Sungula | Hetelela | Khoma |
---|---|---|---|
1. | Marka | Otto | @mdo |
2. | Yakobe | Thornton | @mafurha |
3. | Larry | Xinyenyana |
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 .table
hi .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}
.
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-responsive
eka matafula lama rhendzelekaka hi ndlela leyi nga etlhelo.
# . | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka |
---|---|---|---|---|---|---|---|---|---|
1. | Sele | Sele | Sele | Sele | Sele | Sele | Sele | Sele | Sele |
2. | Sele | Sele | Sele | Sele | Sele | Sele | Sele | Sele | Sele |
3. | Sele | Sele | Sele | Sele | Sele | Sele | Sele | Sele | Sele |
Breakpoint leyi kongomeke
Tirhisa .table-responsive{-sm|-md|-lg|-xl}
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.
# . | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka |
---|---|---|---|---|---|---|---|---|
1. | Sele | Sele | Sele | Sele | Sele | Sele | Sele | Sele |
2. | Sele | Sele | Sele | Sele | Sele | Sele | Sele | Sele |
3. | Sele | Sele | Sele | Sele | Sele | Sele | Sele | Sele |
# . | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka |
---|---|---|---|---|---|---|---|---|
1. | Sele | Sele | Sele | Sele | Sele | Sele | Sele | Sele |
2. | Sele | Sele | Sele | Sele | Sele | Sele | Sele | Sele |
3. | Sele | Sele | Sele | Sele | Sele | Sele | Sele | Sele |
# . | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka |
---|---|---|---|---|---|---|---|---|
1. | Sele | Sele | Sele | Sele | Sele | Sele | Sele | Sele |
2. | Sele | Sele | Sele | Sele | Sele | Sele | Sele | Sele |
3. | Sele | Sele | Sele | Sele | Sele | Sele | Sele | Sele |
# . | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka | Nhlokomhaka |
---|---|---|---|---|---|---|---|---|
1. | Sele | Sele | Sele | Sele | Sele | Sele | Sele | Sele |
2. | Sele | Sele | Sele | Sele | Sele | Sele | Sele | Sele |
3. | Sele | Sele | Sele | Sele | Sele | Sele | Sele | Sele |