Dokumentado kaj ekzemploj por enskribstilado de tabeloj (konsiderante ilia ĝenerala uzo en JavaScript-kromaĵoj) kun Bootstrap.
Sur ĉi tiu paĝo
Superrigardo
Pro la disvastigita uzo de <table>elementoj tra triaj uzaĵoj kiel kalendaroj kaj dato-elektiloj, la tabeloj de Bootstrap estas elekteblaj . Aldonu la bazan klason .tableal iu ajn <table>, tiam etendu per niaj laŭvolaj modifklasoj aŭ kutimaj stiloj. Ĉiuj tabelstiloj ne estas hereditaj en Bootstrap, tio signifas, ke ĉiuj nestitaj tabeloj povas esti stilitaj sendepende de la gepatro.
Uzante la plej bazan tabelmarkadon, jen kiel .table-bazitaj tabeloj aspektas en Bootstrap.
#
Unue
Laste
Tenilo
1
Mark
Otto
@mdo
2
Jakobo
Thornton
@graso
3
Larry la Birdo
@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>
Variantoj
Uzu kuntekstajn klasojn por kolorigi tabelojn, tabelvicojn aŭ individuajn ĉelojn.
Klaso
Titolo
Titolo
Defaŭlte
Ĉelo
Ĉelo
Primaraj
Ĉelo
Ĉelo
Sekundara
Ĉelo
Ĉelo
Sukceso
Ĉelo
Ĉelo
Danĝero
Ĉelo
Ĉelo
Averto
Ĉelo
Ĉelo
Info
Ĉelo
Ĉelo
Lumo
Ĉelo
Ĉelo
Mallumo
Ĉelo
Ĉelo
<!-- 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>
Transdonante signifon al helpaj teknologioj
Uzi koloron por aldoni signifon nur provizas vidan indikon, kiu ne estos transdonita al uzantoj de helpaj teknologioj - kiel ekranlegiloj. Certigu, ke informoj indikitaj per la koloro estas aŭ evidentaj el la enhavo mem (ekz. la videbla teksto), aŭ estas inkluzivitaj per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .visually-hiddenklaso.
Akcentitaj tabloj
Striitaj vicoj
Uzu .table-stripedpor aldoni zebro-striadon al iu tabelvico ene de la <tbody>.
#
Unue
Laste
Tenilo
1
Mark
Otto
@mdo
2
Jakobo
Thornton
@graso
3
Larry la Birdo
@twitter
<tableclass="table table-striped">
...
</table>
Ĉi tiuj klasoj ankaŭ povas esti aldonitaj al tabelvariaĵoj:
Ni komencas fiksante la fonon de tabelĉelo kun la --bs-table-bgpropra propraĵo. Ĉiuj tabelvariaĵoj tiam agordu tiun kutiman posedaĵon por kolorigi la tabelĉelojn. Tiel, ni ne havas problemojn se duontravideblaj koloroj estas uzataj kiel tabelfonoj.
Tiam ni aldonas enmetitan skatolon-ombron sur la tabelĉelojn kun box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);al tavolo super iu ajn specifita background-color. Ĉar ni uzas grandegan disvastigon kaj neniun malklariĝon, la koloro estos monotona. Ĉar --bs-table-accent-bgestas neagordita defaŭlte, ni ne havas defaŭltan keston-ombron.
Kiam aŭ .table-striped, .table-hoveraŭ .table-activeklasoj estas aldonitaj, la --bs-table-accent-bgestas agordita al duontravidebla koloro por kolorigi la fonon.
Por ĉiu tabelvariaĵo, ni generas --bs-table-accent-bgkoloron kun la plej alta kontrasto depende de tiu koloro. Ekzemple, la akcentkoloro por .table-primaryestas pli malhela dum .table-darkhavas pli helan akcentkoloron.
Tekstaj kaj randkoloroj estas generitaj same, kaj iliaj koloroj estas hereditaj defaŭlte.
Tabelĉeloj de <thead>estas ĉiam vertikalaj vicigitaj al la fundo. Tabelĉeloj <tbody>heredas sian vicigon de <table>kaj estas vicigitaj al la supro defaŭlte. Uzu la vertikalajn vicigklasojn por realigi kie necesas.
Titolo 1
Titolo 2
Titolo 3
Titolo 4
Ĉi tiu ĉelo heredas vertical-align: middle;de la tabelo
Ĉi tiu ĉelo heredas vertical-align: middle;de la tabelo
Ĉi tiu ĉelo heredas vertical-align: middle;de la tabelo
Jen iu lokokupilo teksto, celita por okupi sufiĉe da vertikala spaco, por montri kiel funkcias la vertikala vicigo en la antaŭaj ĉeloj.
Ĉi tiu ĉelo heredas vertical-align: bottom;de la tabelvico
Ĉi tiu ĉelo heredas vertical-align: bottom;de la tabelvico
Ĉi tiu ĉelo heredas vertical-align: bottom;de la tabelvico
Jen iu lokokupilo teksto, celita por okupi sufiĉe da vertikala spaco, por montri kiel funkcias la vertikala vicigo en la antaŭaj ĉeloj.
Ĉi tiu ĉelo heredas vertical-align: middle;de la tabelo
Ĉi tiu ĉelo heredas vertical-align: middle;de la tabelo
Ĉi tiu ĉelo estas vicigita al la supro.
Jen iu lokokupilo teksto, celita por okupi sufiĉe da vertikala spaco, por montri kiel funkcias la vertikala vicigo en la antaŭaj ĉeloj.
<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>
Nestumado
Bordaj stiloj, aktivaj stiloj kaj tabelvariaĵoj ne estas hereditaj de nestitaj tabeloj.
Por malhelpi ajnajn stilojn liki al nestitaj tabeloj, ni uzas la infanan kombinilon ( >) elektilon en nia CSS. Ĉar ni devas celi ĉiujn tds kaj ths en la thead, tbody, kaj tfoot, nia elektilo aspektus sufiĉe longe sen ĝi. Kiel tia, ni uzas la sufiĉe strangan aspektantan .table > :not(caption) > * > *elektilon por celi ĉiujn tds kaj ths de la .table, sed neniu el eventualaj nestitaj tabeloj.
Notu, ke se vi aldonas <tr>s kiel rektajn filojn de tablo, tiuj <tr>estos envolvitaj en a <tbody>defaŭlte, tiel igante niajn elektilojn funkcii kiel celite.
Anatomio
Tablokapo
Simile al tabeloj kaj malhelaj tabeloj, uzu la modifklasojn .table-lightaŭ .table-darkpor ke <thead>s aperi hele aŭ malhelgrizaj.
A <caption>funkcias kiel titolo por tabelo. Ĝi helpas uzantojn kun ekranlegiloj trovi tabelon kaj kompreni pri kio temas kaj decidi ĉu ili volas legi ĝin.
Listo de uzantoj
#
Unue
Laste
Tenilo
1
Mark
Otto
@mdo
2
Jakobo
Thornton
@graso
3
Larry la Birdo
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Vi ankaŭ povas meti la <caption>sur la supro de la tablo kun .caption-top.
Listo de uzantoj
#
Unue
Laste
Tenilo
1
Mark
Otto
@mdo
2
Jakobo
Thornton
@graso
3
Larry
la birdo
@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>
Respondema tabeloj
Respondema tabeloj permesas tabelojn rulumi horizontale kun facileco. Faru ajnan tabelon respondema tra ĉiuj vidfenestroj envolvante .tableper .table-responsive. Aŭ elektu maksimuman rompopunkton kun kiu havi respondeman tabelon ĝis uzante .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Vertikala tondado/tranĉado
Respondema tabeloj uzas overflow-y: hidden, kiu detranĉas ajnan enhavon kiu iras preter la malsupraj aŭ supraj randoj de la tabelo. Aparte, ĉi tio povas detranĉi falmenuojn kaj aliajn triajn fenestraĵojn.
Ĉiam respondema
Tra ĉiu rompopunkto, uzu .table-responsivepor horizontale ruliĝantaj tabloj.
Uzu .table-responsive{-sm|-md|-lg|-xl|-xxl}laŭbezone por krei respondemajn tabelojn ĝis aparta rompopunkto. De tiu rompopunkto kaj supren, la tablo kondutos normale kaj ne rulumo horizontale.
Ĉi tiuj tabeloj povas ŝajni rompitaj ĝis iliaj respondemaj stiloj validas ĉe specifaj vidfenestrolarĝoj.
La faktoraj variabloj ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) estas uzataj por determini la kontraston en tabelvariaĵoj.
Krom la mallumaj kaj malhelaj tabelvariaĵoj, etoskoloroj estas malpezigitaj de la $table-bg-levelvariablo.