HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap- tabellen

❮ Vorig Volgende ❯

Bootstrap-basistabel

Een basis Bootstrap-tafel heeft een lichte vulling en alleen horizontale verdelers.

De .tableklasse voegt een basisstijl toe aan een tabel:

Voorbeeld

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Gestreepte rijen

De .table-stripedklas voegt zebrastrepen toe aan een tabel:

Voorbeeld

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Begrensde tafel

De .table-borderedklasse voegt randen toe aan alle kanten van de tabel en cellen:

Voorbeeld

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Beweeg rijen

De .table-hoverklasse voegt een zweefeffect (grijze achtergrondkleur) toe aan tabelrijen:

Voorbeeld

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Verkorte tabel

De .table-condensedklasse maakt een tafel compacter door de celvulling in tweeën te snijden:

Voorbeeld

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Contextuele lessen

Contextuele klassen kunnen worden gebruikt om tabelrijen ( <tr>) of tabelcellen ( <td>) te kleuren:

Voorbeeld

Firstname Lastname Email
Default Defaultson [email protected]
Success Doe [email protected]
Danger Moe [email protected]
Info Dooley [email protected]
Warning Refs [email protected]
Active Activeson [email protected]

De contextuele klassen die kunnen worden gebruikt zijn:

Klas Beschrijving
.active Past de zweefkleur toe op de tabelrij of tabelcel
.success Geeft een succesvolle of positieve actie aan
.info Geeft een neutrale informatieve verandering of actie aan
.warning Geeft een waarschuwing aan die mogelijk aandacht behoeft
.danger Geeft een gevaarlijke of mogelijk negatieve actie aan

Responsieve tabellen

De .table-responsiveklas maakt een responsieve tabel. De tabel zal dan horizontaal scrollen op kleine apparaten (onder 768px). Bij het bekijken op iets dat groter is dan 768px breed, is er geen verschil:

Voorbeeld

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Test jezelf met oefeningen

Oefening:

Voeg een class-attribuut toe om de tabel op te maken als een standaard Bootstrap-tabel.

<table >
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
  <tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>[email protected]</td>
  </tr>
<table>

Volledige Bootstrap-tabelreferentie

Voor een volledige referentie van alle tabelklassen, ga naar onze volledige Bootstrap Tables Reference .


❮ Vorig Volgende ❯