Dokumentasie en voorbeelde vir intekening-stilering van tabelle (gegewe hul algemene gebruik in JavaScript-inproppe) met Bootstrap.
Op hierdie bladsy
Oorsig
As gevolg van die wydverspreide gebruik van <table>elemente oor derdeparty-legstukke soos kalenders en datumkiesers, kan Bootstrap se tabelle ingeskryf word . Voeg die basisklas .tableby enige <table>, en brei dan uit met ons opsionele wysigerklasse of pasgemaakte style. Alle tabelstyle word nie in Bootstrap oorgeërf nie, wat beteken dat enige geneste tabelle onafhanklik van die ouer gestileer kan word.
Deur die mees basiese tabelopmaak te gebruik, is hier hoe .tablegebaseerde tabelle in Bootstrap lyk.
#
Eerstens
Laaste
Hanteer
1
Merk
Otto
@mdo
2
Jakob
Thornton
@vet
3
Larry die voël
@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>
Variante
Gebruik kontekstuele klasse om tabelle, tabelrye of individuele selle in te kleur.
Klas
Opskrif
Opskrif
Verstek
Sel
Sel
Primêr
Sel
Sel
Sekondêr
Sel
Sel
Sukses
Sel
Sel
Gevaar
Sel
Sel
Waarskuwing
Sel
Sel
Inligting
Sel
Sel
Lig
Sel
Sel
Donker
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>
Dra betekenis aan ondersteunende tegnologieë oor
Die gebruik van kleur om betekenis toe te voeg, verskaf slegs 'n visuele aanduiding, wat nie aan gebruikers van ondersteunende tegnologieë – soos skermlesers – oorgedra sal word nie. Maak seker dat inligting wat deur die kleur aangedui word óf duidelik uit die inhoud self (bv. die sigbare teks), óf op alternatiewe wyse ingesluit word, soos bykomende teks wat by die .visually-hiddenklas versteek is.
Geaksenteerde tafels
Gestreepte rye
Gebruik .table-stripedom sebrastrepe by enige tabelry binne die <tbody>.
#
Eerstens
Laaste
Hanteer
1
Merk
Otto
@mdo
2
Jakob
Thornton
@vet
3
Larry die voël
@twitter
<tableclass="table table-striped">
...
</table>
Hierdie klasse kan ook by tabelvariante gevoeg word:
Merk 'n tabelry of sel deur 'n .table-activeklas by te voeg.
#
Eerstens
Laaste
Hanteer
1
Merk
Otto
@mdo
2
Jakob
Thornton
@vet
3
Larry die voël
@twitter
<tableclass="table"><thead>
...
</thead><tbody><trclass="table-active">
...
</tr><tr>
...
</tr><tr><thscope="row">3</th><tdcolspan="2"class="table-active">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
#
Eerstens
Laaste
Hanteer
1
Merk
Otto
@mdo
2
Jakob
Thornton
@vet
3
Larry die voël
@twitter
<tableclass="table table-dark"><thead>
...
</thead><tbody><trclass="table-active">
...
</tr><tr>
...
</tr><tr><thscope="row">3</th><tdcolspan="2"class="table-active">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
Hoe werk die variante en aksenttabelle?
Vir die geaksenteerde tabelle ( gestreepte rye , rye wat kan beweeg en aktiewe tabelle ), het ons 'n paar tegnieke gebruik om hierdie effekte vir al ons tabelvariante te laat werk :
Ons begin deur die agtergrond van 'n tabelsel met die --bs-table-bgpasgemaakte eienskap te stel. Alle tabelvariante stel dan daardie pasgemaakte eienskap om die tabelselle in te kleur. Op hierdie manier kom ons nie in die moeilikheid as semi-deursigtige kleure as tafelagtergronde gebruik word nie.
Dan voeg ons 'n insetkasskaduwee op die tabelselle by box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);met 'n laag bo-op enige gespesifiseerde background-color. Omdat ons 'n groot verspreiding gebruik en geen vervaag nie, sal die kleur eentonig wees. Aangesien --bs-table-accent-bgdit by verstek gedeaktiveer is, het ons nie 'n verstekkasskadu nie.
Wanneer óf .table-striped, .table-hoveróf .table-activeklasse bygevoeg word, word die --bs-table-accent-bgop 'n semi-deursigtige kleur gestel om die agtergrond in te kleur.
Vir elke tabelvariant genereer ons 'n --bs-table-accent-bgkleur met die hoogste kontras, afhangende van daardie kleur. Byvoorbeeld, die aksentkleur vir .table-primaryis donkerder terwyl .table-darkdit 'n ligter aksentkleur het.
Teks- en randkleure word op dieselfde manier gegenereer, en hul kleure word by verstek geërf.
Tabel selle van <thead>is altyd vertikaal in lyn met die onderkant. Tabelselle in <tbody>erf hul belyning van <table>en is by verstek in lyn met die bokant. Gebruik die vertikale belyningsklasse om te herbelyn waar nodig.
Opskrif 1
Opskrif 2
Opskrif 3
Opskrif 4
Hierdie sel erf vertical-align: middle;van die tabel
Hierdie sel erf vertical-align: middle;van die tabel
Hierdie sel erf vertical-align: middle;van die tabel
Hierdie hier is 'n paar plekhouer-teks wat bedoel is om nogal 'n bietjie vertikale spasie op te neem, om te demonstreer hoe die vertikale belyning in die voorafgaande selle werk.
Hierdie sel erf vertical-align: bottom;van die tabelry
Hierdie sel erf vertical-align: bottom;van die tabelry
Hierdie sel erf vertical-align: bottom;van die tabelry
Hierdie hier is 'n paar plekhouer-teks wat bedoel is om nogal 'n bietjie vertikale spasie op te neem, om te demonstreer hoe die vertikale belyning in die voorafgaande selle werk.
Hierdie sel erf vertical-align: middle;van die tabel
Hierdie sel erf vertical-align: middle;van die tabel
Hierdie sel is na bo in lyn.
Hierdie hier is 'n paar plekhouer-teks wat bedoel is om nogal 'n bietjie vertikale spasie op te neem, om te demonstreer hoe die vertikale belyning in die voorafgaande selle werk.
<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>
Nestel
Randstyle, aktiewe style en tabelvariante word nie deur geneste tabelle geërf nie.
Om te verhoed dat enige style na geneste tabelle lek, gebruik ons die kinderkombineerder ( >)-kieser in ons CSS. Aangesien ons al die tds en ths in die thead, tbody, en tfoot, moet teiken, sal ons kieser redelik lank daarsonder lyk. As sodanig gebruik ons die .table > :not(caption) > * > *keurder wat nogal vreemd lyk om alle tds en ths van die te teiken .table, maar geen van enige potensiële geneste tabelle nie.
Let daarop dat as jy <tr>s as direkte kinders van 'n tabel byvoeg, dit by verstek <tr>in 'n toegedraai sal word <tbody>, wat ons keurders sal laat werk soos bedoel.
Anatomie
Tafelkop
Soortgelyk aan tabelle en donker tabelle, gebruik die wysigerklasse .table-lightof .table-darkom <thead>s lig of donkergrys te laat lyk.
A <caption>funksioneer soos 'n opskrif vir 'n tabel. Dit help gebruikers met skermlesers om 'n tabel te vind en te verstaan waaroor dit gaan en te besluit of hulle dit wil lees.
Lys van gebruikers
#
Eerstens
Laaste
Hanteer
1
Merk
Otto
@mdo
2
Jakob
Thornton
@vet
3
Larry die voël
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Jy kan ook <caption>die bo-op die tafel sit met .caption-top.
Lys van gebruikers
#
Eerstens
Laaste
Hanteer
1
Merk
Otto
@mdo
2
Jakob
Thornton
@vet
3
Larry
die voël
@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>
Responsiewe tabelle
Responsiewe tabelle laat tabelle toe om met gemak horisontaal te blaai. Maak enige tabel responsief oor alle kykpoorte deur 'n .tablemet .table-responsive. Of kies 'n maksimum breekpunt waarmee jy 'n responsiewe tabel moet hê deur .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Vertikale knip/afkapping
Responsiewe tabelle maak gebruik van overflow-y: hidden, wat enige inhoud afknip wat verder gaan as die onderste of boonste rande van die tabel. Dit kan veral aftrekkieslyste en ander derdeparty-legstukke afknip.
Altyd responsief
Oor elke breekpunt, gebruik .table-responsiveom tabelle horisontaal te blaai.
Gebruik .table-responsive{-sm|-md|-lg|-xl|-xxl}soos nodig om responsiewe tabelle tot by 'n spesifieke breekpunt te skep. Vanaf daardie breekpunt en hoër sal die tabel normaal optree en nie horisontaal blaai nie.
Hierdie tabelle kan dalk gebroke lyk totdat hul responsiewe style op spesifieke kykpoortwydtes van toepassing is.
Die faktorveranderlikes ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) word gebruik om die kontras in tabelvariante te bepaal.
Afgesien van die ligte en donker tafelvariante, word temakleure verlig deur die $table-bg-levelveranderlike.