Source

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 .tableby enige <table>, en brei dan uit met gepasmaakte style of ons verskillende ingesluit wysigerklasse.

Deur die mees basiese tabelopmaak te gebruik, is hier hoe .tablegebaseerde 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 @twitter 
<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 @twitter 
<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-lightof .thead-darkom <thead>s lig of donkergrys te laat lyk.

# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter
# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<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-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 
<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 @twitter 
<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-borderedvir 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 @twitter 
<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 @twitter 
<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-borderlessvir 'n tafel sonder grense.

# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<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-borderlesskan ook op donker tafels gebruik word.

# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<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-hoverby om 'n sweeftoestand op tabelrye binne 'n <tbody>.

# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<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 @twitter 
<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-smby 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 @twitter 
<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 @twitter 
<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>
Betekenis oordra aan ondersteunende tegnologieë

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-onlyklas versteek is.

Skep responsiewe tabelle deur enige .tablemet toe te draai .table-responsive{-sm|-md|-lg|-xl}, sodat die tabel horisontaal by elke max-widthbreekpunt 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.

Lys van gebruikers
# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<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 .tablemet .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-responsiveom 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>