Dokumentacija in primeri za izbirno oblikovanje tabel (glede na njihovo prevladujočo uporabo v vtičnikih JavaScript) z Bootstrapom.
Na tej strani
Pregled
Zaradi široke uporabe <table>elementov v pripomočkih tretjih oseb, kot so koledarji in izbirniki datumov, so tabele Bootstrap opt-in . Dodajte osnovni razred .tablekateremu koli <table>, nato razširite z našimi izbirnimi modifikatorskimi razredi ali slogi po meri. Vsi slogi tabel niso podedovani v Bootstrapu, kar pomeni, da je mogoče katero koli ugnezdeno tabelo oblikovati neodvisno od nadrejene.
Z uporabo najosnovnejšega označevanja tabel je prikazano, kako so .tabletabele na osnovi v Bootstrapu videti.
#
najprej
Zadnji
Ročaj
1
Mark
Otto
@mdo
2
Jacob
Thornton
@debela
3
Ptica Larry
@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>
Različice
Uporabite kontekstualne razrede za barvanje tabel, vrstic tabel ali posameznih celic.
Razred
Naslov
Naslov
Privzeto
Celica
Celica
Primarni
Celica
Celica
Sekundarno
Celica
Celica
Uspeh
Celica
Celica
Nevarnost
Celica
Celica
Opozorilo
Celica
Celica
Informacije
Celica
Celica
Svetloba
Celica
Celica
Temno
Celica
Celica
<!-- 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>
Prenos pomena za podporne tehnologije
Uporaba barve za dodajanje pomena zagotavlja le vizualno indikacijo, ki ne bo posredovana uporabnikom podpornih tehnologij – kot so bralniki zaslona. Zagotovite, da so informacije, označene z barvo, očitne iz same vsebine (npr. vidno besedilo) ali pa so vključene z alternativnimi sredstvi, kot je dodatno besedilo, skrito z .visually-hiddenrazredom.
Naglašene mize
Črtaste vrstice
Uporabite .table-stripedza dodajanje zebrastih črt v katero koli vrstico tabele znotraj <tbody>.
#
najprej
Zadnji
Ročaj
1
Mark
Otto
@mdo
2
Jacob
Thornton
@debela
3
Ptica Larry
@twitter
<tableclass="table table-striped">
...
</table>
Te razrede je mogoče dodati tudi različicam tabel:
Začnemo z nastavitvijo ozadja celice tabele z --bs-table-bglastnostjo po meri. Vse različice tabele nato nastavijo to lastnost po meri za barvanje celic tabele. Tako ne zaidemo v težave, če za ozadje mize uporabimo polprosojne barve.
Nato dodamo senco vstavljenega polja na celice tabele s box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);plastjo na vrhu katerega koli podanega background-color. Ker uporabljamo velik razmik in brez zamegljenosti, bo barva monotona. Ker --bs-table-accent-bgni privzeto nastavljen, nimamo privzete sence polja.
Ko dodate razrede ali .table-striped, je nastavljen na polprosojno barvo za barvanje ozadja..table-hover.table-active--bs-table-accent-bg
Za vsako različico tabele ustvarimo --bs-table-accent-bgbarvo z največjim kontrastom glede na to barvo. Na primer, poudarjena barva za .table-primaryje temnejša, medtem ko .table-darkima poudarjeno svetlejšo barvo.
Barve besedila in obrob so ustvarjene na enak način, njihove barve pa so privzeto podedovane.
Celice tabele <thead>so vedno navpično poravnane na dno. Celice tabele <tbody>podedujejo svojo poravnavo <table>in so privzeto poravnane na vrh. Uporabite razrede navpične poravnave za ponovno poravnavo, kjer je to potrebno.
Naslov 1
Naslov 2
Naslov 3
Naslov 4
Ta celica deduje vertical-align: middle;iz tabele
Ta celica deduje vertical-align: middle;iz tabele
Ta celica deduje vertical-align: middle;iz tabele
Tukaj je nekaj nadomestnega besedila, ki naj bi zavzelo kar nekaj navpičnega prostora, da bi prikazali, kako deluje navpična poravnava v prejšnjih celicah.
Ta celica deduje vertical-align: bottom;iz vrstice tabele
Ta celica deduje vertical-align: bottom;iz vrstice tabele
Ta celica deduje vertical-align: bottom;iz vrstice tabele
Tukaj je nekaj nadomestnega besedila, ki naj bi zavzelo kar nekaj navpičnega prostora, da bi prikazali, kako deluje navpična poravnava v prejšnjih celicah.
Ta celica deduje vertical-align: middle;iz tabele
Ta celica deduje vertical-align: middle;iz tabele
Ta celica je poravnana na vrh.
Tukaj je nekaj nadomestnega besedila, ki naj bi zavzelo kar nekaj navpičnega prostora, da bi prikazali, kako deluje navpična poravnava v prejšnjih celicah.
<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>
Gnezdenje
Slogov obrob, aktivnih slogov in različic tabel ne podedujejo ugnezdene tabele.
Da bi preprečili uhajanje kakršnih koli slogov v ugnezdene tabele, uporabljamo >izbirnik podrejenega kombinatorja ( ) v našem CSS. Ker moramo ciljati na vse tds in ths v thead, tbodyin tfoot, bi bil naš izbirnik videti precej dolg brez njega. Kot tak uporabljamo .table > :not(caption) > * > *izbirnik precej nenavadnega videza za ciljanje na vse tds in ths v .table, vendar na nobeno morebitno ugnezdeno tabelo.
Upoštevajte, da če dodate <tr>s kot neposredne podrejene tabele, bodo ti privzeto <tr>zaviti v a , tako da naši izbirniki delujejo, kot je predvideno.<tbody>
Anatomija
Glava mize
Podobno kot pri tabelah in temnih tabelah uporabite modifikatorske razrede .table-lightali .table-dark, da <thead>so videti svetlo ali temno sive.
A <caption>deluje kot naslov za tabelo. Uporabnikom z bralniki zaslona pomaga najti tabelo in razumeti, za kaj gre, ter se odločiti, ali jo želijo prebrati.
Seznam uporabnikov
#
najprej
Zadnji
Ročaj
1
Mark
Otto
@mdo
2
Jacob
Thornton
@debela
3
Ptica Larry
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Lahko tudi postavite <caption>na vrh tabele z .caption-top.
Seznam uporabnikov
#
najprej
Zadnji
Ročaj
1
Mark
Otto
@mdo
2
Jacob
Thornton
@debela
3
Larry
ptica
@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>
Odzivne mize
Odzivne tabele omogočajo enostavno vodoravno pomikanje po tabelah. Poskrbite, da bo katera koli tabela odzivna v vseh pogledih, tako da ovijete a .tablez .table-responsive. Ali pa z uporabo izberite največjo prekinitveno točko, do katere želite imeti odzivno tabelo .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Navpično striženje/prirezovanje
Odzivne mize uporabljajo overflow-y: hiddenfunkcijo , ki izreže vso vsebino, ki presega spodnji ali zgornji rob tabele. To lahko zlasti izloči spustne menije in druge pripomočke tretjih oseb.
Vedno odziven
Čez vsako prelomno točko uporabite .table-responsiveza vodoravno pomikanje tabel.
Po potrebi uporabite .table-responsive{-sm|-md|-lg|-xl|-xxl}za ustvarjanje odzivnih tabel do določene prekinitvene točke. Od te prelomne točke naprej se bo tabela obnašala normalno in se ne bo pomikala vodoravno.
Te tabele so lahko videti zlomljene, dokler njihovi odzivni slogi ne veljajo za določene širine vidnega polja.
Faktorske spremenljivke ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) se uporabljajo za določanje kontrasta v variantah tabele.
Poleg svetlih in temnih različic mize so barve teme posvetljene s $table-bg-levelspremenljivko.