Iwe ati awọn apẹẹrẹ fun ijade-iṣafihan awọn tabili (fifun lilo lilo wọn ni awọn afikun JavaScript) pẹlu Bootstrap.
Lori iwe yi
Akopọ
Nitori lilo awọn <table>eroja kaakiri kọja awọn ẹrọ ailorukọ ẹnikẹta bi awọn kalẹnda ati awọn oluyan ọjọ, awọn tabili Bootstrap ti yọkuro . Ṣafikun kilasi ipilẹ .tablesi eyikeyi <table>, lẹhinna faagun pẹlu awọn kilasi modifier yiyan tabi awọn aza aṣa. Gbogbo awọn aza tabili ni a ko jogun ni Bootstrap, afipamo pe awọn tabili itẹle eyikeyi le jẹ ara ominira lati ọdọ obi.
Lilo isamisi tabili ipilẹ julọ, eyi ni bii awọn .tabletabili orisun ṣe wo ni Bootstrap.
#
Akoko
Ikẹhin
Mu
1
Samisi
Otto
@mdo
2
Jakobu
Thornton
@sanra
3
Larry Eye
@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>
Awọn iyatọ
Lo awọn kilasi ọrọ-ọrọ si awọn tabili awọ, awọn ori ila tabili tabi awọn sẹẹli kọọkan.
Kilasi
Akori
Akori
Aiyipada
Ẹyin sẹẹli
Ẹyin sẹẹli
Alakoko
Ẹyin sẹẹli
Ẹyin sẹẹli
Atẹle
Ẹyin sẹẹli
Ẹyin sẹẹli
Aseyori
Ẹyin sẹẹli
Ẹyin sẹẹli
Ijamba
Ẹyin sẹẹli
Ẹyin sẹẹli
Ikilo
Ẹyin sẹẹli
Ẹyin sẹẹli
Alaye
Ẹyin sẹẹli
Ẹyin sẹẹli
Imọlẹ
Ẹyin sẹẹli
Ẹyin sẹẹli
Dudu
Ẹyin sẹẹli
Ẹyin sẹẹli
<!-- 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>
Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ
Lilo awọ lati ṣafikun itumọ nikan n pese itọkasi wiwo, eyiti kii yoo gbe lọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju. Rii daju pe alaye ti o tọka si nipasẹ awọ jẹ eyiti o han gbangba lati inu akoonu funrararẹ (fun apẹẹrẹ ọrọ ti o han), tabi pẹlu pẹlu awọn ọna omiiran, gẹgẹbi afikun ọrọ ti o farapamọ pẹlu .visually-hiddenkilasi naa.
Awọn tabili accented
Awọn ori ila ti o ya
Lo .table-stripedlati ṣafikun abila-fikun si ori ila tabili eyikeyi laarin <tbody>.
#
Akoko
Ikẹhin
Mu
1
Samisi
Otto
@mdo
2
Jakobu
Thornton
@sanra
3
Larry Eye
@twitter
<tableclass="table table-striped">
...
</table>
Awọn kilasi wọnyi tun le ṣafikun si awọn iyatọ tabili:
A bẹrẹ nipa siseto abẹlẹ ti sẹẹli tabili pẹlu --bs-table-bgohun-ini aṣa. Gbogbo awọn iyatọ tabili lẹhinna ṣeto ohun-ini aṣa yẹn lati ṣe awọ awọn sẹẹli tabili. Ni ọna yi, a ko gba sinu wahala ti o ba ti ologbele-sihin awọn awọ ti wa ni lo bi tabili backgrounds.
Lẹhinna a ṣafikun ojiji apoti inset lori awọn sẹẹli tabili pẹlu box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);lati fẹlẹfẹlẹ lori eyikeyi pato background-color. Nitoripe a lo itankale nla ati pe ko si blur, awọ yoo jẹ monotone. Niwọn igba --bs-table-accent-bgti ko ṣeto nipasẹ aiyipada, a ko ni ojiji apoti aiyipada.
Nigbati boya .table-striped, .table-hovertabi .table-activeawọn kilasi ti wa ni afikun, --bs-table-accent-bga ṣeto si awọ olominira lati ṣe awọ abẹlẹ.
Fun iyatọ tabili kọọkan, a ṣe ina --bs-table-accent-bgawọ kan pẹlu iyatọ ti o ga julọ ti o da lori awọ yẹn. Fun apẹẹrẹ, awọ asẹnti fun .table-primarydudu nigba .table-darkti o ni awọ asẹnti fẹẹrẹfẹ.
Ọrọ ati awọn awọ aala jẹ ipilẹṣẹ ni ọna kanna, ati pe awọn awọ wọn jẹ jogun nipasẹ aiyipada.
Awọn sẹẹli tabili ti <thead>wa ni inaro nigbagbogbo ni ibamu si isalẹ. Awọn sẹẹli tabili ni <tbody>jogun titete wọn lati <table>ati pe wọn ṣe deede si oke nipasẹ aiyipada. Lo awọn kilasi isọpọ inaro lati tun ṣe deede ni ibiti o nilo.
Akọle 1
Akole 2
Akole 3
Akole 4
Yi sẹẹli jogun vertical-align: middle;lati tabili
Yi sẹẹli jogun vertical-align: middle;lati tabili
Yi sẹẹli jogun vertical-align: middle;lati tabili
Eyi ni diẹ ninu ọrọ ibi-aye, ti a pinnu lati gba diẹ ninu aaye inaro, lati ṣe afihan bii titete inaro ṣe n ṣiṣẹ ninu awọn sẹẹli ti o ṣaju.
Yi cell jogun vertical-align: bottom;lati tabili kana
Yi cell jogun vertical-align: bottom;lati tabili kana
Yi cell jogun vertical-align: bottom;lati tabili kana
Eyi ni diẹ ninu ọrọ ibi-aye, ti a pinnu lati gba diẹ ninu aaye inaro, lati ṣe afihan bii titete inaro ṣe n ṣiṣẹ ninu awọn sẹẹli ti o ṣaju.
Yi sẹẹli jogun vertical-align: middle;lati tabili
Yi sẹẹli jogun vertical-align: middle;lati tabili
Seli yi wa ni deedee si oke.
Eyi ni diẹ ninu ọrọ ibi-aye, ti a pinnu lati gba diẹ ninu aaye inaro, lati ṣe afihan bii titete inaro ṣe n ṣiṣẹ ninu awọn sẹẹli ti o ṣaju.
<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>
Itẹle
Awọn ara aala, awọn aza ti nṣiṣe lọwọ, ati awọn iyatọ tabili ni a ko jogun nipasẹ awọn tabili itẹ-ẹiyẹ.
Lati yago fun eyikeyi ara lati jijo si awọn tabili itẹ-ẹiyẹ, a lo ọmọ akojọpọ ( >) oluyan ninu CSS wa. Niwọn igba ti a nilo lati fojusi gbogbo awọn tds ati ths ninu thead, tbody, ati tfoot, oluyan wa yoo dabi lẹwa gun laisi rẹ. Bi iru bẹẹ, a lo .table > :not(caption) > * > *oluyan yiyan ti ko dara lati dojukọ gbogbo awọn tds ati ths ti .table, ṣugbọn ko si eyikeyi awọn tabili itẹle ti o pọju.
Ṣe akiyesi pe ti o ba ṣafikun <tr>s bi awọn ọmọde taara ti tabili kan, awọn <tr>naa yoo we sinu <tbody>aiyipada, nitorinaa jẹ ki awọn yiyan wa ṣiṣẹ bi a ti pinnu.
Anatomi
ori tabili
Iru awọn tabili ati awọn tabili dudu, lo awọn kilasi modifier .table-lighttabi .table-darklati jẹ ki <thead>s han ina tabi grẹy dudu.
Awọn <caption>iṣẹ kan bi akọle fun tabili kan. O ṣe iranlọwọ fun awọn olumulo pẹlu awọn oluka iboju lati wa tabili kan ati loye ohun ti o jẹ nipa ati pinnu boya wọn fẹ ka.
Akojọ ti awọn olumulo
#
Akoko
Ikẹhin
Mu
1
Samisi
Otto
@mdo
2
Jakobu
Thornton
@sanra
3
Larry Eye
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
O tun le fi awọn <caption>lori oke ti awọn tabili pẹlu .caption-top.
Akojọ ti awọn olumulo
#
Akoko
Ikẹhin
Mu
1
Samisi
Otto
@mdo
2
Jakobu
Thornton
@sanra
3
Larry
Eye
@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>
Awọn tabili idahun
Awọn tabili idahun gba awọn tabili laaye lati yi lọ ni ita pẹlu irọrun. Jẹ ki tabili eyikeyi ṣe idahun kọja gbogbo awọn ibudo wiwo nipa fifi ipari si .tablepẹlu .table-responsive. Tabi, mu aaye isinmi ti o pọju pẹlu eyiti o le ni tabili idahun si nipa lilo .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Inaro clipping/truncation
Awọn tabili idahun ṣe lilo overflow-y: hidden, eyi ti awọn agekuru kuro ni eyikeyi akoonu ti o lọ kọja isalẹ tabi awọn egbegbe oke ti tabili. Ni pataki, eyi le ge awọn akojọ aṣayan silẹ ati awọn ẹrọ ailorukọ ẹnikẹta miiran.
Nigbagbogbo idahun
Kọja gbogbo aaye fifọ, lo .table-responsivefun awọn tabili lilọ kiri ni petele.
Lo .table-responsive{-sm|-md|-lg|-xl|-xxl}bi o ṣe nilo lati ṣẹda awọn tabili idahun si aaye fifọ kan pato. Lati aaye fifọ yẹn ati si oke, tabili yoo huwa deede kii yoo yi lọ ni ita.
Awọn tabili wọnyi le han fifọ titi awọn aza idahun wọn yoo waye ni awọn iwọn iwoye kan pato.