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- tabelle

❮ Vorige Volgende ❯

Bootstrap Basiese Tabel

'n Basiese Bootstrap-tafel het 'n ligte vulling en slegs horisontale verdelers.

Die .tableklas voeg basiese stilering by 'n tafel:

Voorbeeld

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

Gestreepte rye

Die .table-stripedklas voeg sebrastrepe by 'n tabel:

Voorbeeld

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

Bordered Tafel

Die .table-borderedklas voeg grense aan alle kante van die tabel en selle by:

Voorbeeld

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

Beweeg rye

Die .table-hoverklas voeg 'n sweef-effek (grys agtergrondkleur) op tabelrye by:

Voorbeeld

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

Gekondenseerde tafel

Die .table-condensedklas maak 'n tafel meer kompak deur selopvulling in die helfte te sny:

Voorbeeld

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

Kontekstuele Klasse

Kontekstuele klasse kan gebruik word om tabelrye ( <tr>) of tabelselle ( <td>) in te kleur:

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]

Die kontekstuele klasse wat gebruik kan word is:

Klas Beskrywing
.active Pas die sweefkleur toe op die tabelry of tabelsel
.success Dui 'n suksesvolle of positiewe aksie aan
.info Dui 'n neutrale insiggewende verandering of aksie aan
.warning Dui 'n waarskuwing aan wat dalk aandag moet kry
.danger Dui 'n gevaarlike of potensieel negatiewe aksie aan

Responsiewe tabelle

Die .table-responsiveklas skep 'n responsiewe tabel. Die tabel sal dan horisontaal blaai op klein toestelle (onder 768 px). As jy na enigiets groter as 768px wyd kyk, is daar geen verskil nie:

Voorbeeld

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

Toets jouself met oefeninge

Oefening:

Voeg 'n klaskenmerk by om die tabel as 'n basiese Bootstrap-tabel te styl.

<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>

Voltooi Bootstrap-tabelverwysing

Vir 'n volledige verwysing van alle tabelklasse, gaan na ons volledige Bootstrap Tables Reference .


❮ Vorige Volgende ❯