ʻO ka palapala a me nā laʻana no ke koho ʻana i nā papa (e hāʻawi ʻia i kā lākou hoʻohana maʻamau i nā plugins JavaScript) me Bootstrap.
Ma kēia ʻaoʻao
Nānā nui
Ma muli o ka hoʻohana nui ʻana o nā mea ma waena o nā hāmeʻa ʻaoʻao ʻekolu e like me nā kalena a me nā mea koho lā, koho<table> ʻia nā papa ʻaina o Bootstrap . E hoʻohui i ka papa kumu i kekahi , a laila e hoʻonui me kā mākou mau papa hoʻololi koho a i ʻole nā ʻano maʻamau. ʻAʻole i hoʻoili ʻia nā ʻano papa ʻaina a pau ma Bootstrap, ʻo ia hoʻi, hiki ke kapa ʻia nā papa pūnana a pau mai ka makua..table<table>
Ke hoʻohana nei i ka hōʻailona papa maʻamau, eia ke ʻano o ka .tablenānā ʻana o nā papa ma Bootstrap.
#
Ka mua
hope loa
Kalima
1
Maka
Otto
@mdo
2
ʻO Iakoba
Thornton
@momona
3
Larry ka Manu
@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>
Nā ʻano like ʻole
E hoʻohana i nā papa pōʻaiapili e kala i nā papa ʻaina, nā lālani pākaukau a i ʻole nā pūnaewele pākahi.
Papa
Poʻomanaʻo
Poʻomanaʻo
Default
Kelepona
Kelepona
Papahana
Kelepona
Kelepona
lua
Kelepona
Kelepona
Pōmaikaʻi
Kelepona
Kelepona
ʻO ka pōʻino
Kelepona
Kelepona
ʻŌlelo aʻo
Kelepona
Kelepona
ʻIke
Kelepona
Kelepona
Māmā
Kelepona
Kelepona
Poʻeleʻele
Kelepona
Kelepona
<!-- 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>
Ka hōʻike ʻana i ka manaʻo i nā ʻenehana kōkua
ʻO ka hoʻohana ʻana i ke kala e hoʻohui i ka manaʻo e hāʻawi wale i kahi hōʻailona ʻike, ʻaʻole e hāʻawi ʻia i nā mea hoʻohana i nā ʻenehana kōkua - e like me nā mea heluhelu pale. E hōʻoia i ka ʻike i hōʻike ʻia e ke kala i ʻike ʻia mai ka ʻike ponoʻī (e laʻa i ke kikokikona ʻike ʻia), a i ʻole e hoʻokomo ʻia ma o nā ala ʻē aʻe, e like me nā kikokikona hou i hūnā ʻia me ka .visually-hiddenpapa.
Nā papa kuhikuhi
Nā lālani kaha
E hoʻohana .table-stripede hoʻohui i ka zebra-striping i kēlā me kēia lālani pākaukau i loko o ka <tbody>.
#
Ka mua
hope loa
Kalima
1
Maka
Otto
@mdo
2
ʻO Iakoba
Thornton
@momona
3
Larry ka Manu
@twitter
<tableclass="table table-striped">
...
</table>
Hiki ke hoʻohui ʻia kēia mau papa i nā ʻano ʻano papa:
E kaila i ka lālani papaʻaina a i ʻole ke kelepona ma ka hoʻohui ʻana i kahi .table-activepapa.
#
Ka mua
hope loa
Kalima
1
Maka
Otto
@mdo
2
ʻO Iakoba
Thornton
@momona
3
Larry ka Manu
@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>
#
Ka mua
hope loa
Kalima
1
Maka
Otto
@mdo
2
ʻO Iakoba
Thornton
@momona
3
Larry ka Manu
@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>
Pehea ka hana ʻana o nā ʻano like ʻole a me nā papa i hoʻopaʻa ʻia?
No nā papa i hoʻopaʻa ʻia ( nā lālani kaha ʻia , nā lālani hoverable , a me nā papa hana ), ua hoʻohana mākou i kekahi mau ʻenehana e hana i kēia mau hopena no nā ʻano like ʻole o kā mākou papaʻaina :
Hoʻomaka mākou ma ka hoʻonohonoho ʻana i ke kāʻei o kahi cell table me ka --bs-table-bgwaiwai maʻamau. A laila hoʻonoho nā ʻano ʻano papa ʻaina a pau i kēlā waiwai maʻamau e waihoʻoluʻu i nā cell table. Ma kēia ala, ʻaʻole mākou e pilikia inā hoʻohana ʻia nā kala semi-transparent ma ke ʻano he papa ʻaina.
A laila hoʻohui mākou i kahi aka pahu hoʻokomo ma luna o ka papa ʻaina me box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);ka papa ma luna o nā mea i kuhikuhi ʻia background-color. No ka mea, hoʻohana mākou i kahi pālahalaha nui a ʻaʻohe blur, e monotone ke kala. No --bs-table-accent-bgka mea ʻaʻole i hoʻonohonoho ʻia e ka paʻamau, ʻaʻohe o mākou pahu pahu paʻamau.
Ke hoʻohui ʻia nā .table-striped, a i .table-hoverʻole .table-activenā papa, --bs-table-accent-bgua hoʻonohonoho ʻia ka kala semitransparent e kala i ke kua.
No kēlā me kēia ʻano papaʻaina, hana mākou i kahi --bs-table-accent-bgkala me ka ʻokoʻa kiʻekiʻe loa e pili ana i kēlā kala. No ka laʻana, ʻoi aku ka ʻeleʻele o ka leo no .table-primaryka mea, ʻoi aku .table-darkka māmā o ke kala leo.
Hana ʻia nā waihoʻoluʻu kikokikona a me nā palena ma ke ʻano like, a ua hoʻoili ʻia ko lākou mau kala ma ke ʻano paʻamau.
Hoʻopololei mau <thead>ʻia nā ʻāpana papa o ka papa i lalo. Ua hoʻoili ʻia nā pūnaewele papa i <tbody>ko lākou alignment mai <table>a hoʻopaʻa ʻia i ka luna ma ke ʻano paʻamau. E hoʻohana i nā papa align vertical e hoʻoponopono hou i kahi e pono ai.
Poʻomanaʻo 1
Poʻomanaʻo 2
Poʻomanaʻo 3
Poʻomanaʻo 4
Loaʻa kēia cell vertical-align: middle;mai ka papaʻaina
Loaʻa kēia cell vertical-align: middle;mai ka papaʻaina
Loaʻa kēia cell vertical-align: middle;mai ka papaʻaina
Eia kekahi wahi kikokikona, i manaʻo ʻia e lawe i kahi ākea ākea, e hōʻike i ke ʻano o ka hana ʻana o ka hoʻopololei kū i nā keena ma mua.
Loaʻa kēia cell vertical-align: bottom;mai ka lālani papaʻaina
Loaʻa kēia cell vertical-align: bottom;mai ka lālani papaʻaina
Loaʻa kēia cell vertical-align: bottom;mai ka lālani papaʻaina
Eia kekahi wahi kikokikona, i manaʻo ʻia e lawe i kahi ākea ākea, e hōʻike i ke ʻano o ka hana ʻana o ka hoʻopololei kū i nā keena ma mua.
Loaʻa kēia cell vertical-align: middle;mai ka papaʻaina
Loaʻa kēia cell vertical-align: middle;mai ka papaʻaina
Hoʻopili ʻia kēia kelepona i luna.
Eia kekahi wahi kikokikona, i manaʻo ʻia e lawe i kahi ākea ākea, e hōʻike i ke ʻano o ka hana ʻana o ka hoʻopololei kū i nā keena ma mua.
<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
ʻAʻole hoʻoili ʻia nā kaila palena, nā ʻano hana, a me nā ʻano ʻano papaʻaina e nā papa pūnana.
No ka pale ʻana i nā ʻano ʻano mai ka hū ʻana i nā pākaukau pūnana, hoʻohana mākou i ka >mea koho keiki combinator ( ) ma kā mākou CSS. No ka mea pono mākou e hoʻopaʻa i nā tds a me nā s a thpau i loko o ka thead, tbody, a me tfoot, e nānā lōʻihi loa kā mākou mea koho me ka ʻole o ia. No laila, hoʻohana mākou i ka mea .table > :not(caption) > * > *koho ʻano ʻē aʻe e hoʻopaʻa i nā tds a me nā s a thpau o ka .table, akā ʻaʻohe o nā papa hoʻopaʻa ʻia.
E hoʻomaopopo inā hoʻohui ʻoe i <tr>s ma ke ʻano he keiki pololei o ka papaʻaina, <tr>e hoʻopili ʻia ia mau mea i kahi <tbody>maʻamau, no laila e hana ai kā mākou mea koho e like me ka mea i manaʻo ʻia.
Anatomy
Poʻo papaʻaina
E like me nā papa ʻaina a me nā papa ʻeleʻele, e hoʻohana i nā papa hoʻololi a i .table-lightʻole .table-darke <thead>hoʻomāmā a ʻeleʻele paha.
ʻO kahi <caption>hana e like me ke poʻo no kahi papaʻaina. Kōkua ia i nā mea hoʻohana me nā mea heluhelu pale e ʻimi i kahi papaʻaina a hoʻomaopopo i ke ʻano o ia mea a hoʻoholo inā makemake lākou e heluhelu.
Papa inoa o nā mea hoʻohana
#
Ka mua
hope loa
Kalima
1
Maka
Otto
@mdo
2
ʻO Iakoba
Thornton
@momona
3
Larry ka Manu
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Hiki iā ʻoe ke kau i ka <caption>ma luna o ka papaʻaina me .caption-top.
Papa inoa o nā mea hoʻohana
#
Ka mua
hope loa
Kalima
1
Maka
Otto
@mdo
2
ʻO Iakoba
Thornton
@momona
3
Larry
ka Manu
@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>
Nā papa pane
Hāʻawi nā papa pane i nā papa e ʻōwili ʻia me ka maʻalahi. E hana i kekahi papa ʻaina e pane mai i nā ʻāpana ʻike āpau ma ke kāʻei ʻana i kahi .tableme .table-responsive. A i ʻole, e koho i kahi haʻihaʻi kiʻekiʻe loa e loaʻa ai kahi papa pane ma ka hoʻohana ʻana i .table-responsive{-sm|-md|-lg|-xl|-xxl}.
ʻoki ʻoki/ʻoki ʻia
Hoʻohana nā papa pane i ka overflow-y: hidden, kahi e hoʻopaʻa ai i nā ʻike ma waho aʻe o nā ʻaoʻao lalo a i luna paha o ka papaʻaina. ʻO ka mea kūikawā, hiki i kēia ke ʻoki i nā menus dropdown a me nā widget ʻaoʻao ʻekolu.
Pane mau
Ma kēlā me kēia wahi haʻihaʻi, e hoʻohana .table-responsiveno nā papa ʻauʻau ākea.
E hoʻohana .table-responsive{-sm|-md|-lg|-xl|-xxl}e like me ka mea e pono ai no ka hana ʻana i nā papa pane a hiki i kahi breakpoint. Mai kēlā haʻihaʻi a piʻi aʻe, e hana maʻamau ka papaʻaina a ʻaʻole e ʻōwili i ka pae.
Ua haki paha kēia mau papa ʻaina a hiki i ka hoʻohana ʻana o ko lākou mau ʻano pane i nā ākea kikoʻī.
Hoʻohana ʻia nā mea hoʻololi kumu ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) no ka hoʻoholo ʻana i ka ʻokoʻa o nā ʻano ʻano papa.
Ma waho aʻe o nā ʻano papaʻaina māmā a me nā pōʻeleʻele, hoʻomālamalama ʻia nā kala kumuhana e ka $table-bg-levelloli.