Dokumintaasje en foarbylden foar opt-in styling fan tabellen (jûn har foarkommende gebrûk yn JavaScript-plugins) mei Bootstrap.
Op dizze side
Oersicht
Fanwegen it wiidferspraat gebrûk fan <table>eleminten oer widgets fan tredden lykas kalinders en datumkiezers, binne Bootstrap's tabellen opt-in . Foegje de basisklasse .tableta oan elke <table>, wreidzje dan út mei ús opsjonele modifikaasjeklassen as oanpaste stilen. Alle tabelstilen wurde net erfd yn Bootstrap, wat betsjuttet dat alle nestede tabellen ûnôfhinklik kinne wurde styleare fan 'e âlder.
Mei help fan de meast basale tabelmarkearring, hjir is hoe .table-basearre tabellen der útsjen yn Bootstrap.
#
Earste
Lêst
Handle
1
Merk
Otto
@mdo
2
Jacob
Thornton
@fet
3
Larry de Fûgel
@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>
Farianten
Brûk kontekstuele klassen om tabellen, tabelrijen of yndividuele sellen te kleurjen.
Klasse
Heading
Heading
Standert
Sel
Sel
Primêr
Sel
Sel
Sekundêr
Sel
Sel
Sukses
Sel
Sel
Gefaar
Sel
Sel
Warskôging
Sel
Sel
Info
Sel
Sel
Ljocht
Sel
Sel
Tsjuster
Sel
Sel
<!-- 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>
Betsjutting oerbringe oan assistinte technologyen
It brûken fan kleur om betsjutting ta te foegjen jout allinich in fisuele yndikaasje, dy't net sil wurde oerbrocht oan brûkers fan assistinte technologyen - lykas skermlêzers. Soargje derfoar dat ynformaasje oanjûn troch de kleur óf dúdlik is út de ynhâld sels (bgl. de sichtbere tekst), óf wurdt opnommen troch alternative middels, lykas ekstra tekst ferburgen mei de .visually-hiddenklasse.
Accented tabellen
Striped rigen
Brûk .table-stripedom sebra-striping ta te foegjen oan elke tabelrige binnen de <tbody>.
#
Earste
Lêst
Handle
1
Merk
Otto
@mdo
2
Jacob
Thornton
@fet
3
Larry de Fûgel
@twitter
<tableclass="table table-striped">
...
</table>
Dizze klassen kinne ek tafoege wurde oan tabelfarianten:
Wy begjinne mei it ynstellen fan de eftergrûn fan in tabelsel mei de --bs-table-bgoanpaste eigenskip. Alle tabelfarianten set dan dat oanpaste eigenskip yn om de tabelsellen te kleurjen. Op dizze manier komme wy net yn problemen as semy-transparante kleuren wurde brûkt as tafeleftergrûnen.
Dan foegje wy in ynsetfakskaad ta oan 'e tabelsellen mei box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);in laach boppe op elke opjûne background-color. Om't wy in enoarme sprieding brûke en gjin wazige, sil de kleur monoton wêze. Sûnt --bs-table-accent-bgis standert net ynsteld, hawwe wy gjin standert fakskaad.
As ien .table-stripedof klassen wurde tafoege, wurdt it .table-hoverynsteld op in semytransparante kleur om de eftergrûn te kleurjen..table-active--bs-table-accent-bg
Foar elke tabelfariant generearje wy in --bs-table-accent-bgkleur mei it heechste kontrast ôfhinklik fan dy kleur. Bygelyks, de aksintkleur foar .table-primaryis donkerder, wylst .table-darkin lichtere aksintkleur hat.
Tekst- en rânekleuren wurde op deselde manier generearre, en har kleuren wurde standert erfd.
Tabel sellen fan <thead>binne altyd fertikaal ôfstimd nei de boaiem. Tabelsellen yn <tbody>ervje har ôfstimming fan <table>en binne standert ôfstimd nei de top. Brûk de fertikale ôfstimmingsklassen om opnij ôfstimme wêr't it nedich is.
Koptekst 1
Koptekst 2
Opskrift 3
Opskrift 4
Dizze sel erft vertical-align: middle;fan 'e tabel
Dizze sel erft vertical-align: middle;fan 'e tabel
Dizze sel erft vertical-align: middle;fan 'e tabel
Dit hjir is wat plakhâldertekst, bedoeld om nochal wat fertikale romte yn te nimmen, om te demonstrearjen hoe't de fertikale ôfstimming wurket yn 'e foargeande sellen.
Dizze sel erft vertical-align: bottom;fan 'e tabelrige
Dizze sel erft vertical-align: bottom;fan 'e tabelrige
Dizze sel erft vertical-align: bottom;fan 'e tabelrige
Dit hjir is wat plakhâldertekst, bedoeld om nochal wat fertikale romte yn te nimmen, om te demonstrearjen hoe't de fertikale ôfstimming wurket yn 'e foargeande sellen.
Dizze sel erft vertical-align: middle;fan 'e tabel
Dizze sel erft vertical-align: middle;fan 'e tabel
Dizze sel is rjochte op 'e top.
Dit hjir is wat plakhâldertekst, bedoeld om nochal wat fertikale romte yn te nimmen, om te demonstrearjen hoe't de fertikale ôfstimming wurket yn 'e foargeande sellen.
<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>
Nesting
Rânestilen, aktive stilen en tabelfarianten wurde net erfd troch geneste tabellen.
Om foar te kommen dat stilen lekken nei nestede tabellen, brûke wy de >seleksje fan bernekombinator ( ) yn ús CSS. Sûnt wy moatte rjochtsje op alle tds en ths yn de thead, tbody, en tfoot, soe ús selector sjen moai lang sûnder it. As sadanich brûke wy de nochal ûneven looking .table > :not(caption) > * > *selector foar in doel alle tds en ths fan de .table, mar net ien fan alle potinsjele nested tabellen.
Tink derom dat as jo tafoegje <tr>s as direkte bern fan in tabel, dy <tr>sille wurde ferpakt yn in <tbody>standert, sadat ús selectors wurkje as bedoeld.
Anatomy
Tafelkop
Similar to tabellen en tsjustere tabellen, brûk de modifier klassen .table-lightof .table-darkte meitsje <thead>s ferskine ljocht of tsjuster griis.
A <caption>funksjonearret as in kop foar in tabel. It helpt brûkers mei skermlêzers om in tabel te finen en te begripen wêr't it oer giet en beslute as se it lêze wolle.
List fan brûkers
#
Earste
Lêst
Handle
1
Merk
Otto
@mdo
2
Jacob
Thornton
@fet
3
Larry de Fûgel
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Jo kinne ek sette de <caption>boppe op 'e tafel mei .caption-top.
List fan brûkers
#
Earste
Lêst
Handle
1
Merk
Otto
@mdo
2
Jacob
Thornton
@fet
3
Larry
de fûgel
@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>
Responsive tabellen
Responsive tabellen kinne tabellen mei gemak horizontaal rôlje. Meitsje eltse tafel responsyf oer alle viewports troch wrapping in .tablemei .table-responsive. Of kies in maksimale brekpunt wêrmei't jo in responsive tabel moatte hawwe mei .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Fertikale clipping / trunkaasje
Responsive tabellen meitsje gebrûk fan overflow-y: hidden, dy't elke ynhâld ôfknipt dy't boppe de ûnder- of bopperâne fan 'e tabel giet. Dit kin benammen dropdownmenu's en oare widgets fan tredden ôfknippe.
Altyd responsyf
Brûk elk brekpunt .table-responsivefoar horizontaal rôljen fan tabellen.
Brûk .table-responsive{-sm|-md|-lg|-xl|-xxl}as nedich om responsive tabellen te meitsjen oant in bepaald brekpunt. Fan dat brekpunt en omheech, sil de tabel normaal gedrage en net horizontaal rôlje.
Dizze tabellen kinne brutsen ferskine oant har responsive stilen jilde op spesifike sichtportbreedtes.
De faktorfariabelen ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) wurde brûkt om de kontrast yn tabelfarianten te bepalen.
Neist de ljochte en tsjustere tafelfarianten wurde temakleuren ferljochte troch de $table-bg-levelfariabele.