Dokumentazzjoni u eżempji għall-grafika opt-in tat-tabelli (minħabba l-użu prevalenti tagħhom fil-plugins JavaScript) b'Bootstrap.
Fuq din il-paġna
Ħarsa ġenerali
Minħabba l-użu mifrux ta' <table>elementi fuq widgets ta' partijiet terzi bħal kalendarji u pickers tad-data, it-tabelli ta' Bootstrap huma opt-in . Żid il-klassi bażi .tablema 'kwalunkwe <table>, imbagħad testendi bil-klassijiet modifikaturi fakultattivi tagħna jew stili tad-dwana. L-istili tal-mejda kollha ma jintirtux f'Bootstrap, li jfisser li kwalunkwe tabelli nested jistgħu jiġu stilati indipendenti mill-ġenitur.
Bl-użu tal-markup tat-tabella l-aktar bażiku, hawn kif .tablejidhru t-tabelli bbażati fuq Bootstrap.
#
L-ewwel
L-aħħar
Manku
1
Mark
Otto
@mdo
2
Ġakobb
Thornton
@xaħam
3
Larry l-Għasfur
@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>
Varjanti
Uża klassijiet kuntestwali biex tikkuluri tabelli, ringieli ta 'tabelli jew ċelloli individwali.
Klassi
Intestatura
Intestatura
Default
Ċellula
Ċellula
Primarja
Ċellula
Ċellula
Sekondarja
Ċellula
Ċellula
Suċċess
Ċellula
Ċellula
Periklu
Ċellula
Ċellula
Twissija
Ċellula
Ċellula
Info
Ċellula
Ċellula
Dawl
Ċellula
Ċellula
Dlam
Ċellula
Ċellula
<!-- 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>
Twassal tifsira għal teknoloġiji ta' assistenza
L-użu tal-kulur biex iżżid it-tifsira jipprovdi biss indikazzjoni viżwali, li mhux se tiġi mgħoddija lill-utenti ta 'teknoloġiji ta' assistenza - bħal screen readers. Kun żgur li l-informazzjoni indikata bil-kulur hija jew ovvja mill-kontenut innifsu (eż. it-test viżibbli), jew tkun inkluża permezz ta' mezzi alternattivi, bħal test addizzjonali moħbi mal- .visually-hiddenklassi.
Tabelli b'aċċent
Ringieli strixxi
Uża .table-stripedbiex iżżid zebra-striping ma' kwalunkwe ringiela tal-mejda fi ħdan il- <tbody>.
#
L-ewwel
L-aħħar
Manku
1
Mark
Otto
@mdo
2
Ġakobb
Thornton
@xaħam
3
Larry l-Għasfur
@twitter
<tableclass="table table-striped">
...
</table>
Dawn il-klassijiet jistgħu wkoll jiġu miżjuda mal-varjanti tat-tabella:
Nibdew billi nissettjaw l-isfond ta 'ċellula tal-mejda bil- --bs-table-bgproprjetà tad-dwana. Il-varjanti kollha tat-tabella mbagħad issettjaw dik il-proprjetà tad-dwana biex tikkulurit iċ-ċelloli tat-tabella. Dan il-mod, aħna ma jsibux fl-inkwiet jekk kuluri semi-trasparenti huma użati bħala sfondi tabella.
Imbagħad inżidu dell kaxxa inset fuq iċ-ċelluli tal-mejda box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);b'saff fuq kwalunkwe speċifikat background-color. Minħabba li nużaw firxa enormi u l-ebda ċajpra, il-kulur se jkun monotone. Peress --bs-table-accent-bgli mhux issettjat b'mod awtomatiku, m'għandniex dell tal-kaxxa default.
Meta jew .table-striped, .table-hoverjew .table-activeklassijiet huma miżjuda, il- --bs-table-accent-bghuwa ssettjat għal kulur semitrasparenti biex ikkulurit l-isfond.
Għal kull varjant tal-mejda, niġġeneraw --bs-table-accent-bgkulur bl-ogħla kuntrast skont dak il-kulur. Pereżempju, il-kulur tal-aċċent għal .table-primaryhuwa aktar skur filwaqt li .table-darkgħandu kulur tal-aċċent eħfef.
Il-kuluri tat-test u l-borduri huma ġġenerati bl-istess mod, u l-kuluri tagħhom jintirtu awtomatikament.
Iċ-ċelloli tat-tabella <thead>huma dejjem vertikali allinjati mal-qiegħ. Iċ-ċelloli tat-tabella <tbody>jirtu l-allinjament tagħhom minn <table>u huma allinjati mal-parti ta' fuq b'mod awtomatiku. Uża l - klassijiet tal -allinjament vertikali biex tallinja mill-ġdid fejn meħtieġ.
Intestatura 1
Intestatura 2
Intestatura 3
Intestatura 4
Din iċ-ċellula tirret vertical-align: middle;mit-tabella
Din iċ-ċellula tirret vertical-align: middle;mit-tabella
Din iċ-ċellula tirret vertical-align: middle;mit-tabella
Dan hawnhekk huwa xi test placeholder, maħsub biex jieħu pjuttost ftit spazju vertikali, biex juri kif jaħdem l-allinjament vertikali fiċ-ċelloli preċedenti.
Din iċ-ċellula tirret vertical-align: bottom;mir-ringiela tat-tabella
Din iċ-ċellula tirret vertical-align: bottom;mir-ringiela tat-tabella
Din iċ-ċellula tirret vertical-align: bottom;mir-ringiela tat-tabella
Dan hawnhekk huwa xi test placeholder, maħsub biex jieħu pjuttost ftit spazju vertikali, biex juri kif jaħdem l-allinjament vertikali fiċ-ċelloli preċedenti.
Din iċ-ċellula tirret vertical-align: middle;mit-tabella
Din iċ-ċellula tirret vertical-align: middle;mit-tabella
Din iċ-ċellula hija allinjata mal-quċċata.
Dan hawnhekk huwa xi test placeholder, maħsub biex jieħu pjuttost ftit spazju vertikali, biex juri kif jaħdem l-allinjament vertikali fiċ-ċelloli preċedenti.
<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>
Ibejtu
L-istili tal-fruntiera, l-istili attivi u l-varjanti tal-mejda ma jintirtux minn tabelli nested.
Biex tipprevjeni kwalunkwe stili milli jnixxu għal tabelli nested, nużaw is- >selettur tat-tfal combinator ( ) fis-CSS tagħna. Peress li rridu nimmiraw is- tds u l- thi kollha fil- thead, tbody, u tfoot, is-selettur tagħna jkun jidher pjuttost twil mingħajru. Bħala tali, nużaw is- .table > :not(caption) > * > *selettur li tħares pjuttost fard biex nimmiraw is- tds u l- thi kollha tal- .table, iżda l-ebda tabelli potenzjali nested.
Innota li jekk iżżid <tr>s bħala tfal diretti ta 'tabella, dawk <tr>se jkunu mgeżwra b'mod <tbody>awtomatiku, u b'hekk is-seletturi tagħna jaħdmu kif maħsub.
Anatomija
Kap tal-mejda
Simili għal tabelli u tabelli skuri, uża l-klassijiet modifikaturi .table-lightjew .table-darkbiex tagħmel <thead>s jidhru griż ċar jew skur.
A <caption>jiffunzjona bħal intestatura għal tabella. Jgħin lill-utenti bi screen readers biex isibu tabella u jifhmu dwar xiex tkun u jiddeċiedu jekk iridux jaqrawha.
Lista ta' utenti
#
L-ewwel
L-aħħar
Manku
1
Mark
Otto
@mdo
2
Ġakobb
Thornton
@xaħam
3
Larry l-Għasfur
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Tista 'wkoll tpoġġi <caption>fuq il-quċċata tat-tabella b' .caption-top.
Lista ta' utenti
#
L-ewwel
L-aħħar
Manku
1
Mark
Otto
@mdo
2
Ġakobb
Thornton
@xaħam
3
Larry
l-ghasfur
@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>
Tabelli li jirrispondu
Tabelli li jirrispondu jippermettu li t-tabelli jiġu skrollati orizzontalment b'faċilità. Agħmel kwalunkwe mejda li tirreaġixxi fil-viewports kollha billi tgeżwer .tableb ' .table-responsive. Jew, agħżel breakpoint massimu li bih ikollok tabella li tirrispondi sa billi tuża .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Qtugħ/qtugħ vertikali
It-tabelli li jirrispondu jagħmlu użu minn overflow-y: hidden, li jaqta' kull kontenut li jmur lil hinn mit-truf ta' isfel jew ta' fuq tat-tabella. B'mod partikolari, dan jista' jaqtgħu menus dropdown u widgets oħra ta 'partijiet terzi.
Dejjem jirrispondi
F'kull breakpoint, uża .table-responsivegħal tabelli li tiskrolljaw orizzontalment.
Uża .table-responsive{-sm|-md|-lg|-xl|-xxl}kif meħtieġ biex toħloq tabelli responsivi sa breakpoint partikolari. Minn dak il-breakpoint u 'l fuq, it-tabella se taġixxi b'mod normali u mhux tiskrollja orizzontalment.
Dawn it-tabelli jistgħu jidhru mkissra sakemm l-istili reattivi tagħhom japplikaw f'wisgħat ta' viewport speċifiċi.