Tabelle
Dokumentasie en voorbeelde vir intekening-stilering van tabelle (gegewe hul algemene gebruik in JavaScript-inproppe) met Bootstrap.
Voorbeelde
As gevolg van die wydverspreide gebruik van tabelle oor derdeparty-legstukke soos kalenders en datumkiesers, het ons ons tabelle ontwerp om in te teken . Voeg net die basisklas .table
by enige <table>
, en brei dan uit met gepasmaakte style of ons verskillende ingesluit wysigerklasse.
Deur die mees basiese tabelopmaak te gebruik, is hier hoe .table
gebaseerde tabelle in Bootstrap lyk. Alle tabelstyle word in Bootstrap 4 geërf , wat beteken dat enige geneste tabelle op dieselfde manier as die ouer gestileer sal word.
# | Eerstens | Laaste | Hanteer |
---|---|---|---|
1 | Merk | Otto | @mdo |
2 | Jakob | Thornton | @vet |
3 | Larry | die voël |
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Jy kan ook die kleure omkeer—met ligte teks op donker agtergronde—met .table-dark
.
# | Eerstens | Laaste | Hanteer |
---|---|---|---|
1 | Merk | Otto | @mdo |
2 | Jakob | Thornton | @vet |
3 | Larry | die voël |
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Tafelkop opsies
Soortgelyk aan tabelle en donker tabelle, gebruik die wysigerklasse .thead-light
of .thead-dark
om <thead>
s lig of donkergrys te laat lyk.
# | Eerstens | Laaste | Hanteer |
---|---|---|---|
1 | Merk | Otto | @mdo |
2 | Jakob | Thornton | @vet |
3 | Larry | die voël |
# | Eerstens | Laaste | Hanteer |
---|---|---|---|
1 | Merk | Otto | @mdo |
2 | Jakob | Thornton | @vet |
3 | Larry | die voël |
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Gestreepte rye
Gebruik .table-striped
om sebrastrepe by enige tabelry binne die <tbody>
.
# | Eerstens | Laaste | Hanteer |
---|---|---|---|
1 | Merk | Otto | @mdo |
2 | Jakob | Thornton | @vet |
3 | Larry | die voël |
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>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 |
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Borderige tafel
Voeg by .table-bordered
vir grense aan alle kante van die tabel en selle.
# | Eerstens | Laaste | Hanteer |
---|---|---|---|
1 | Merk | Otto | @mdo |
2 | Jakob | Thornton | @vet |
3 | Larry die voël |
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">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 |
<table class="table table-bordered table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Borderlose tafel
Voeg by .table-borderless
vir 'n tafel sonder grense.
# | Eerstens | Laaste | Hanteer |
---|---|---|---|
1 | Merk | Otto | @mdo |
2 | Jakob | Thornton | @vet |
3 | Larry die voël |
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
.table-borderless
kan ook op donker tafels gebruik word.
# | Eerstens | Laaste | Hanteer |
---|---|---|---|
1 | Merk | Otto | @mdo |
2 | Jakob | Thornton | @vet |
3 | Larry die voël |
<table class="table table-borderless table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Beweegbare rye
Voeg .table-hover
by om 'n sweeftoestand op tabelrye binne 'n <tbody>
.
# | Eerstens | Laaste | Hanteer |
---|---|---|---|
1 | Merk | Otto | @mdo |
2 | Jakob | Thornton | @vet |
3 | Larry die voël |
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">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 |
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Klein tafeltjie
Voeg .table-sm
by om tafels meer kompak te maak deur selvulling in die helfte te sny.
# | Eerstens | Laaste | Hanteer |
---|---|---|---|
1 | Merk | Otto | @mdo |
2 | Jakob | Thornton | @vet |
3 | Larry die voël |
<table class="table table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">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 |
<table class="table table-sm table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Kontekstuele klasse
Gebruik kontekstuele klasse om tabelrye of individuele selle in te kleur.
Klas | Opskrif | Opskrif |
---|---|---|
Aktief | Sel | Sel |
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 rows -->
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="table-active">...</td>
<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td>
</tr>
Gereelde tafelagtergrondvariante is nie met die donker tafel beskikbaar nie, maar jy kan teks- of agtergrondhulpmiddels gebruik om soortgelyke style te bereik.
# | Opskrif | Opskrif |
---|---|---|
1 | Sel | Sel |
2 | Sel | Sel |
3 | Sel | Sel |
4 | Sel | Sel |
5 | Sel | Sel |
6 | Sel | Sel |
7 | Sel | Sel |
8 | Sel | Sel |
9 | Sel | Sel |
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="bg-primary">...</td>
<td class="bg-success">...</td>
<td class="bg-warning">...</td>
<td class="bg-danger">...</td>
<td class="bg-info">...</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 .sr-only
klas versteek is.
Skep responsiewe tabelle deur enige .table
met toe te draai .table-responsive{-sm|-md|-lg|-xl}
, sodat die tabel horisontaal by elke max-width
breekpunt van tot (maar nie ingesluit nie) 576px, 768px, 992px en 1120px onderskeidelik laat blaai.
Let daarop dat aangesien blaaiers tans nie reekskonteksnavrae ondersteun nie , werk ons om die beperkings van min-
en max-
voorvoegsels en kykvensters met fraksionele breedtes (wat byvoorbeeld onder sekere toestande op hoë-dpi-toestelle kan voorkom) deur waardes met hoër akkuraatheid vir hierdie vergelykings te gebruik .
Onderskrifte
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.
# | Eerstens | Laaste | Hanteer |
---|---|---|---|
1 | Merk | Otto | @mdo |
2 | Jakob | Thornton | @vet |
3 | Larry | die voël |
<table class="table">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="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 .table
met .table-responsive
. Of kies 'n maksimum breekpunt waarmee jy 'n responsiewe tabel moet hê deur .table-responsive{-sm|-md|-lg|-xl}
.
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-responsive
om tabelle horisontaal te blaai.
# | Opskrif | Opskrif | Opskrif | Opskrif | Opskrif | Opskrif | Opskrif | Opskrif | Opskrif |
---|---|---|---|---|---|---|---|---|---|
1 | Sel | Sel | Sel | Sel | Sel | Sel | Sel | Sel | Sel |
2 | Sel | Sel | Sel | Sel | Sel | Sel | Sel | Sel | Sel |
3 | Sel | Sel | Sel | Sel | Sel | Sel | Sel | Sel | Sel |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Breekpunt spesifiek
Gebruik .table-responsive{-sm|-md|-lg|-xl}
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.
# | Opskrif | Opskrif | Opskrif | Opskrif | Opskrif | Opskrif | Opskrif | Opskrif |
---|---|---|---|---|---|---|---|---|
1 | Sel | Sel | Sel | Sel | Sel | Sel | Sel | Sel |
2 | Sel | Sel | Sel | Sel | Sel | Sel | Sel | Sel |
3 | Sel | Sel | Sel | Sel | Sel | Sel | Sel | Sel |
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
# | Opskrif | Opskrif | Opskrif | Opskrif | Opskrif | Opskrif | Opskrif | Opskrif |
---|---|---|---|---|---|---|---|---|
1 | Sel | Sel | Sel | Sel | Sel | Sel | Sel | Sel |
2 | Sel | Sel | Sel | Sel | Sel | Sel | Sel | Sel |
3 | Sel | Sel | Sel | Sel | Sel | Sel | Sel | Sel |
<div class="table-responsive-md">
<table class="table">
...
</table>
</div>
# | Opskrif | Opskrif | Opskrif | Opskrif | Opskrif | Opskrif | Opskrif | Opskrif |
---|---|---|---|---|---|---|---|---|
1 | Sel | Sel | Sel | Sel | Sel | Sel | Sel | Sel |
2 | Sel | Sel | Sel | Sel | Sel | Sel | Sel | Sel |
3 | Sel | Sel | Sel | Sel | Sel | Sel | Sel | Sel |
<div class="table-responsive-lg">
<table class="table">
...
</table>
</div>
# | Opskrif | Opskrif | Opskrif | Opskrif | Opskrif | Opskrif | Opskrif | Opskrif |
---|---|---|---|---|---|---|---|---|
1 | Sel | Sel | Sel | Sel | Sel | Sel | Sel | Sel |
2 | Sel | Sel | Sel | Sel | Sel | Sel | Sel | Sel |
3 | Sel | Sel | Sel | Sel | Sel | Sel | Sel | Sel |
<div class="table-responsive-xl">
<table class="table">
...
</table>
</div>