Doiciméadú agus samplaí do stíleáil táblaí rogha an diúltaithe (i bhfianaise a n-úsáide forleithne i mbreiseáin JavaScript) le Bootstrap.
Ar an leathanach seo
Forbhreathnú
Mar gheall ar úsáid fhorleathan na n- eilimintí thar ghiuirléidí tríú páirtí cosúil le féilirí agus roghnóirí dáta, is rogha an diúltaithe<table> iad táblaí Bootstrap . Cuir an bunrang le haon , ansin leathnaigh lenár ranganna mionathraithe roghnacha nó ár stíleanna saincheaptha. Ní fhaightear gach stíl tábla le hoidhreacht i Bootstrap, rud a chiallaíonn gur féidir aon táblaí neadaithe a stíl neamhspleách ón tuismitheoir..table<table>
Ag baint úsáide as an marcáil tábla is bunúsaí, seo conas .tablea bhreathnaíonn táblaí bunaithe i Bootstrap.
#
Ar dtús
seo caite
Láimhseáil
1
Marcáil
Otto
@mdo
2
Iacób
Thornton
@saille
3
Larry an t-éan
@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>
Leaganacha
Úsáid ranganna comhthéacsúla chun táblaí, sraitheanna táblaí nó cealla aonair a dhathú.
Aicme
Ceannteideal
Ceannteideal
Réamhshocrú
cill
cill
Bunscoile
cill
cill
Tánaisteach
cill
cill
Rath
cill
cill
Contúirt
cill
cill
Rabhadh
cill
cill
Eolas
cill
cill
Solas
cill
cill
Dorcha
cill
cill
<!-- 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>
Brí a chur in iúl do theicneolaíochtaí cúnta
Ní thugann úsáid dath chun brí a chur leis ach tásc amhairc, nach gcuirfear in iúl d’úsáideoirí na dteicneolaíochtaí cúnta – mar léitheoirí scáileáin. Cinntigh go bhfuil an t-eolas atá sainaitheanta leis an dath soiléir ón ábhar féin (m.sh. an téacs infheicthe), nó go n-áirítear í ar mhodhanna eile, mar théacs breise i bhfolach leis an .visually-hiddenrang.
Táblaí accented
Sraitheanna stiallacha
Bain úsáid as .table-stripedchun stiallacha séabra a chur le haon ró tábla laistigh den <tbody>.
#
Ar dtús
seo caite
Láimhseáil
1
Marcáil
Otto
@mdo
2
Iacób
Thornton
@saille
3
Larry an t-éan
@twitter
<tableclass="table table-striped"> ...
</table>
Colúin stiallacha
Bain úsáid as .table-striped-columnschun stiallacha séabra a chur le haon cholún tábla.
Tosaímid trí chúlra cille tábla a shocrú leis an --bs-table-bgmaoin saincheaptha. Socraíonn gach leagan tábla an t-airí saincheaptha sin chun na cealla tábla a dhathú. Ar an mbealach seo, ní féidir linn a bheith i dtrioblóid má úsáidtear dathanna leath-trédhearcacha mar chúlraí tábla.
Ansin cuirimid scáth bhosca inset ar na cealla boird agus cuirimid an box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);ciseal ar bharr aon cheann sonraithe background-color. Toisc go n-úsáideann muid leathadh ollmhór agus gan aon doiléir, beidh an dath monotone. Ós rud --bs-table-accent-bgé nach bhfuil sé socraithe de réir réamhshocraithe, níl scáth bhosca réamhshocraithe againn.
Nuair a chuirtear ceachtar .table-striped, .table-striped-columns, .table-hovernó .table-activeranganna leis, --bs-table-accent-bgsocraítear an dath go leath-thrédhearcach chun an cúlra a dhathú.
I gcás gach malairt tábla, ginimid --bs-table-accent-bgdath leis an gcodarsnacht is airde ag brath ar an dath sin. Mar shampla, tá an dath accent do .table-primaryníos dorcha agus .table-darktá dath accent níos éadroime.
Gintear dathanna téacs agus teorann ar an mbealach céanna, agus faightear a gcuid dathanna le hoidhreacht de réir réamhshocraithe.
Cuir teorainn níos tibhe, níos dorcha idir grúpaí boird — <thead>, <tbody>, agus <tfoot>— le .table-group-divider. Saincheap an dath trí athrú border-top-colora dhéanamh ar an rang (nach bhfuil aicme áirgiúlachta á sholáthar againn dó faoi láthair).
#
Ar dtús
seo caite
Láimhseáil
1
Marcáil
Otto
@mdo
2
Iacób
Thornton
@saille
3
Larry an t-éan
@twitter
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>
Ailíniú ingearach
Tá cealla tábla <thead>ailínithe ingearach leis an mbun i gcónaí. Tá na cealla tábla ina <tbody>n-oidhreacht dá n-ailíniú ón <table>mbarr agus tá siad ailínithe leis an mbarr de réir réamhshocraithe. Úsáid na haicmí ailínithe ingearacha chun athailíniú a dhéanamh nuair is gá.
Ceannteideal 1
Ceannteideal 2
Ceannteideal 3
Ceannteideal 4
Faigheann an chill seo oidhreacht vertical-align: middle;ón tábla
Faigheann an chill seo oidhreacht vertical-align: middle;ón tábla
Faigheann an chill seo oidhreacht vertical-align: middle;ón tábla
Seo cuid de théacs coinneálaí áitribh, atá beartaithe chun go leor spáis ingearach a thógáil, chun a léiriú conas a oibríonn an t-ailíniú ingearach sna cealla roimhe seo.
Faigheann an chill seo oidhreacht vertical-align: bottom;ón tsraith tábla
Faigheann an chill seo oidhreacht vertical-align: bottom;ón tsraith tábla
Faigheann an chill seo oidhreacht vertical-align: bottom;ón tsraith tábla
Seo cuid de théacs coinneálaí áitribh, atá beartaithe chun go leor spáis ingearach a thógáil, chun a léiriú conas a oibríonn an t-ailíniú ingearach sna cealla roimhe seo.
Faigheann an chill seo oidhreacht vertical-align: middle;ón tábla
Faigheann an chill seo oidhreacht vertical-align: middle;ón tábla
Tá an chill seo ailínithe leis an mbarr.
Seo cuid de théacs coinneálaí áitribh, atá beartaithe chun go leor spáis ingearach a thógáil, chun a léiriú conas a oibríonn an t-ailíniú ingearach sna cealla roimhe seo.
<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>
Neadaithe
Ní fhaigheann táblaí neadaithe stíleanna teorann, stíleanna gníomhacha, agus leagan táblaí le hoidhreacht.
Chun aon stíleanna a chosc ó sceitheadh go táblaí neadaithe, bainimid úsáid as an >roghnóir combinator ( ) leanaí inár CSS. Ós rud é go gcaithfimid díriú ar na tds agus ths go léir sa thead, tbody, agus tfoot, bheadh cuma fhada ar ár roghnóir gan é. Mar sin, bainimid úsáid as an roghnóir cuma aisteach .table > :not(caption) > * > *chun díriú ar gach tdcuid thden .table, ach níl aon cheann de na táblaí neadaithe féideartha.
Tabhair faoi deara má chuireann tú <tr>s isteach mar leanaí díreacha boird, <tr>déanfar iad sin a fhilleadh i bhfoirm <tbody>réamhshocraithe, rud a fhágann go n-oibreoidh ár roghnóirí mar a bhí beartaithe.
Anatamaíocht
Ceann tábla
Cosúil le táblaí agus táblaí dorcha, bain úsáid as na haicmí mionathraithe .table-lightnó .table-darkchun <thead>cuma liath éadrom nó liath a chur ar s.
Feidhmíonn A <caption>cosúil le ceannteideal le haghaidh tábla. Cabhraíonn sé le húsáideoirí le léitheoirí scáileáin tábla a aimsiú agus a thuiscint cad atá i gceist leis agus cinneadh a dhéanamh an bhfuil siad ag iarraidh é a léamh.
Liosta na n-úsáideoirí
#
Ar dtús
seo caite
Láimhseáil
1
Marcáil
Otto
@mdo
2
Iacób
Thornton
@saille
3
Larry an t-éan
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead> ...
</thead><tbody> ...
</tbody></table>
Is féidir leat freisin an <caption>ar bharr an tábla le .caption-top.
Liosta na n-úsáideoirí
#
Ar dtús
seo caite
Láimhseáil
1
Marcáil
Otto
@mdo
2
Iacób
Thornton
@saille
3
Larry
an t-éan
@twitter
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>
Táblaí sofhreagracha
Ligeann táblaí sofhreagracha táblaí a scrollú go cothrománach gan stró. Déan tábla ar bith sofhreagrach thar gach radharc trí fhillteán a fhilleadh .tablele .table-responsive. Nó, roghnaigh brisphointe uasta chun tábla sofhreagrach a bheith agat suas go dtí trí úsáid a bhaint as .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Gearradh ingearach / teascadh
Baineann táblaí sofhreagracha úsáid as overflow-y: hidden, a ghearrann amach aon ábhar a théann thar imeall bun nó barr an tábla. Go háirithe, is féidir leis seo roghchláir anuas agus giuirléidí tríú páirtí eile a ghearradh amach.
I gcónaí sofhreagrach
Thar gach brisphointe, bain úsáid as .table-responsivele haghaidh táblaí scrollaithe cothrománach.
Bain úsáid as .table-responsive{-sm|-md|-lg|-xl|-xxl}mar is gá chun táblaí sofhreagracha a chruthú suas go brisphointe ar leith. Ón brisphointe sin agus suas, iompróidh an tábla féin de ghnáth agus ní scrollóidh sé go cothrománach.
Seans go mbeidh cuma briste ar na táblaí seo go dtí go mbeidh a stíleanna freagrúla i bhfeidhm ar leithid an amhairc ar leith.
Úsáidtear na hathróga fachtóir ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) chun an chodarsnacht i leagan táblaí a aimsiú.
Seachas na leaganacha táblaí éadroma agus dorcha, déantar dathanna téama a éadromú leis an $table-bg-scaleathróg.