Dokumentacioni dhe shembuj për stilimin e tabelave (duke pasur parasysh përdorimin e tyre të përhapur në shtojcat JavaScript) me Bootstrap.
Në këtë faqe
Vështrim i përgjithshëm
Për shkak të përdorimit të gjerë të <table>elementeve nëpër miniaplikacionet e palëve të treta si kalendarët dhe zgjedhësit e datave, tabelat e Bootstrap janë të zgjedhura . Shtoni klasën bazë .tablenë ndonjë<table> , pastaj zgjerojeni me klasat tona të modifikuesve opsionalë ose stilet e personalizuara. Të gjitha stilet e tabelave nuk trashëgohen në Bootstrap, që do të thotë se çdo tabelë e vendosur mund të stilohet e pavarur nga prindi.
Duke përdorur shënjimin më bazë të tabelës, ja se si .tableduken tabelat e bazuara në Bootstrap.
#
Së pari
E fundit
Doreza
1
shenjë
Oto
@mdo
2
Jakobi
Thornton
@yndyrë
3
Larry Zogu
@Cicëroj
<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>
Variantet
Përdorni klasa kontekstuale për të ngjyrosur tabelat, rreshtat e tabelave ose qelizat individuale.
Klasa
Drejtimi
Drejtimi
E paracaktuar
Qelizë
Qelizë
fillore
Qelizë
Qelizë
E mesme
Qelizë
Qelizë
Sukses
Qelizë
Qelizë
Rrezik
Qelizë
Qelizë
Paralajmërim
Qelizë
Qelizë
Informacion
Qelizë
Qelizë
Drita
Qelizë
Qelizë
E errët
Qelizë
Qelizë
<!-- 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>
Përcjellja e kuptimit tek teknologjitë ndihmëse
Përdorimi i ngjyrës për të shtuar kuptimin ofron vetëm një tregues vizual, i cili nuk do t'u transmetohet përdoruesve të teknologjive ndihmëse - siç janë lexuesit e ekranit. Sigurohuni që informacioni i shënuar nga ngjyra të jetë ose i dukshëm nga vetë përmbajtja (p.sh. teksti i dukshëm), ose të përfshihet përmes mjeteve alternative, si teksti shtesë i fshehur me .visually-hiddenklasën.
Tabelat e theksuara
Rreshtat me vija
Përdoreni .table-stripedpër të shtuar vija zebra në çdo rresht tabele brenda <tbody>.
#
Së pari
E fundit
Doreza
1
shenjë
Oto
@mdo
2
Jakobi
Thornton
@yndyrë
3
Larry Zogu
@Cicëroj
<tableclass="table table-striped"> ...
</table>
Kolona me vija
Përdoreni .table-striped-columnspër të shtuar vija zebra në çdo kolonë tabele.
Fillojmë duke vendosur sfondin e një qelize tabele me --bs-table-bgvetinë e personalizuar. Të gjitha variantet e tabelës vendosin më pas atë veti të personalizuar për të ngjyrosur qelizat e tabelës. Në këtë mënyrë, ne nuk futemi në telashe nëse ngjyrat gjysmë transparente përdoren si sfond tavoline.
Më pas shtojmë një hije të kutisë së futur në qelizat e tabelës me box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);shtresën në krye të cilësdo të specifikuar background-color. Për shkak se ne përdorim një përhapje të madhe dhe pa turbullira, ngjyra do të jetë monotone. Që nga viti--bs-table-accent-bg është i pacaktuar si parazgjedhje, ne nuk kemi një hije kutie të paracaktuar.
Kur shtohen klasat .table-striped, .table-striped-columns, .table-hoverose , caktohet në një ngjyrë gjysmë transparente për të ngjyrosur sfondin..table-active--bs-table-accent-bg
Për çdo variant tabele, ne gjenerojmë një --bs-table-accent-bgngjyrë me kontrastin më të lartë në varësi të asaj ngjyre. Për shembull, ngjyra e theksit për .table-primaryështë më e errët ndërsa .table-darkka një ngjyrë të theksuar më të lehtë.
Ngjyrat e tekstit dhe kufirit gjenerohen në të njëjtën mënyrë dhe ngjyrat e tyre trashëgohen si parazgjedhje.
Shtoni një kufi më të trashë, më të errët midis grupeve të tabelave— <thead>, <tbody>, dhe <tfoot>—me .table-group-divider. Personalizojeni ngjyrën duke ndryshuar border-top-color(për të cilën aktualisht nuk ofrojmë një klasë të shërbimeve në këtë moment).
#
Së pari
E fundit
Doreza
1
shenjë
Oto
@mdo
2
Jakobi
Thornton
@yndyrë
3
Larry Zogu
@Cicëroj
html
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbodyclass="table-group-divider"><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>
Rreshtimi vertikal
Qelizat e tabelës <thead>janë gjithmonë të rreshtuara vertikale në fund. Qelizat e tabelës <tbody>trashëgojnë shtrirjen e tyre nga <table>dhe janë të rreshtuara në krye si parazgjedhje. Përdorni klasat e rreshtimit vertikal për t'u rilidhur aty ku nevojitet.
Kreu 1
Kreu 2
Kreu 3
Kreu 4
Kjo qelizë trashëgon vertical-align: middle;nga tabela
Kjo qelizë trashëgon vertical-align: middle;nga tabela
Kjo qelizë trashëgon vertical-align: middle;nga tabela
Ky këtu është një tekst mbajtës vendi, i synuar të zërë mjaft hapësirë vertikale, për të demonstruar se si funksionon shtrirja vertikale në qelizat e mëparshme.
Kjo qelizë trashëgon vertical-align: bottom;nga rreshti i tabelës
Kjo qelizë trashëgon vertical-align: bottom;nga rreshti i tabelës
Kjo qelizë trashëgon vertical-align: bottom;nga rreshti i tabelës
Ky këtu është një tekst mbajtës vendi, i synuar të zërë mjaft hapësirë vertikale, për të demonstruar se si funksionon shtrirja vertikale në qelizat e mëparshme.
Kjo qelizë trashëgon vertical-align: middle;nga tabela
Kjo qelizë trashëgon vertical-align: middle;nga tabela
Kjo qelizë është rreshtuar në krye.
Ky këtu është një tekst mbajtës vendi, i synuar të zërë mjaft hapësirë vertikale, për të demonstruar se si funksionon shtrirja vertikale në qelizat e mëparshme.
<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>
Folezimi
Stilet e kufirit, stilet aktive dhe variantet e tabelave nuk trashëgohen nga tabelat e mbivendosura.
Për të parandaluar rrjedhjen e ndonjë stili në tabelat e mbivendosura, ne përdorim >përzgjedhësin e kombinuesit të fëmijëve ( ) në CSS tonë. Meqenëse duhet të synojmë të gjitha tds dhe ths në thead, tbody, dhe tfoot, përzgjedhësi ynë do të dukej goxha i gjatë pa të. Si i tillë, ne përdorim përzgjedhësin me pamje mjaft të çuditshme .table > :not(caption) > * > *për të synuar të gjitha tds dhe ths të.table , por asnjë nga tabelat e mbivendosura të mundshme.
Vini re se nëse shtoni <tr>s si fëmijë të drejtpërdrejtë të një tabele, ato <tr>do të mbështillen në një <tbody>si parazgjedhje, duke i bërë kështu përzgjedhësit tanë të funksionojnë siç synohet.
Anatomia
Kreu i tavolinës
Ngjashëm me tabelat dhe tabelat e errëta, përdorni klasat e modifikuesve .table-lightose .table-darkpër ta bërë <thead>s të duket gri e hapur ose e errët.
Një <caption>funksionon si një titull për një tabelë. Ai i ndihmon përdoruesit me lexues ekrani të gjejnë një tabelë dhe të kuptojnë se për çfarë bëhet fjalë dhe të vendosin nëse duan ta lexojnë atë.
Lista e përdoruesve
#
Së pari
E fundit
Doreza
1
shenjë
Oto
@mdo
2
Jakobi
Thornton
@yndyrë
3
Larry Zogu
@Cicëroj
<tableclass="table table-sm"><caption>List of users</caption><thead> ...
</thead><tbody> ...
</tbody></table>
Ju gjithashtu mund të vendosni <caption>në krye të tabelës me .caption-top.
Lista e përdoruesve
#
Së pari
E fundit
Doreza
1
shenjë
Oto
@mdo
2
Jakobi
Thornton
@yndyrë
3
Larry
Zogu
@Cicëroj
html
<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>
Tabelat e përgjegjshme
Tabelat e përgjegjshme lejojnë që tabelat të lëvizin me lehtësi horizontalisht. Bëni çdo tabelë të përgjegjshme në të gjitha portat e shikimit duke e mbështjellë një .tableme .table-responsive. Ose, zgjidhni një pikë ndërprerjeje maksimale me të cilën do të keni një tabelë të përgjegjshme deri në duke përdorur .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Prerje/prerje vertikale
Tabelat e përgjegjshme përdorin overflow-y: hidden, e cila heq çdo përmbajtje që shkon përtej skajeve të poshtme ose të sipërme të tabelës. Në veçanti, kjo mund të fshijë menytë rënëse dhe pajisje të tjera të palëve të treta.
Gjithmonë i përgjegjshëm
Për çdo pikë ndërprerjeje, përdoret .table-responsivepër tabelat me lëvizje horizontale.
Përdorni .table-responsive{-sm|-md|-lg|-xl|-xxl}sipas nevojës për të krijuar tabela të përgjegjshme deri në një pikë të caktuar ndërprerjeje. Nga ajo pikë e ndërprerjes e lart, tabela do të sillet normalisht dhe nuk do të lëvizë horizontalisht.
Këto tabela mund të duken të thyera derisa stilet e tyre reaguese të zbatohen në gjerësi të veçanta të portave të pamjes.
Variablat e faktorit ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) përdoren për të përcaktuar kontrastin në variantet e tabelës.
Përveç varianteve të tabelave të lehta dhe të errëta, ngjyrat e temës ndriçohen nga $table-bg-scalendryshorja.