Bootstrap 4- tabelle
Bootstrap 4 Basiese Tabel
'n Basiese Bootstrap 4-tafel het 'n ligte vulling en horisontale verdelers.
Die .tableklas voeg basiese stilering by 'n tafel:
Voorbeeld
| Firstname | Lastname | |
|---|---|---|
| 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 | |
|---|---|---|
| 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 | |
|---|---|---|
| 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 | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Swart/donker tafel
Die .table-darkklas voeg 'n swart agtergrond by die tabel:
Voorbeeld
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Donker gestreepte tafel
Kombineer .table-darken .table-stripedskep 'n donker, gestreepte tafel:
Voorbeeld
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Beweegbare Donker Tafel
Die .table-hoverklas voeg 'n sweef-effek (grys agtergrondkleur) op tabelrye by:
Voorbeeld
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Borderlose tafel
Die .table-borderlessklas verwyder grense van die tabel:
Voorbeeld
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Kontekstuele Klasse
Kontekstuele klasse kan gebruik word om die hele tabel ( <table>), die tabelrye ( <tr>) of tabelselle ( <td>) in te kleur.
Voorbeeld
| Firstname | Lastname | |
|---|---|---|
| Default | Defaultson | [email protected] |
| Primary | Joe | [email protected] |
| Success | Doe | [email protected] |
| Danger | Moe | [email protected] |
| Info | Dooley | [email protected] |
| Warning | Refs | [email protected] |
| Active | Activeson | [email protected] |
| Secondary | Secondson | [email protected] |
| Light | Angie | [email protected] |
| Dark | Bo | [email protected] |
Die kontekstuele klasse wat gebruik kan word is:
| Klas | Beskrywing |
|---|---|
.table-primary |
Blou: Dui 'n belangrike handeling aan |
.table-success |
Groen: Dui 'n suksesvolle of positiewe aksie aan |
.table-danger |
Rooi: Dui 'n gevaarlike of potensieel negatiewe aksie aan |
.table-info |
Ligblou: Dui 'n neutrale insiggewende verandering of aksie aan |
.table-warning |
Oranje: Dui 'n waarskuwing aan wat dalk aandag moet kry |
.table-active |
Grys: Pas die sweefkleur toe op die tabelry of tabelsel |
.table-secondary |
Grys: Dui 'n effens minder belangrike aksie aan |
.table-light |
Liggrys tafel- of tafelry-agtergrond |
.table-dark |
Donkergrys tafel- of tafelry-agtergrond |
Tafelkopkleure
Die .thead-darkklas voeg 'n swart agtergrond by tabelopskrifte, en die .thead-lightklas voeg 'n grys agtergrond by tabelopskrifte:
Voorbeeld
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Klein tafeltjie
Die .table-smklas maak die tafel kleiner deur selopvulling in die helfte te sny:
Voorbeeld
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Responsiewe tabelle
Die .table-responsiveklas voeg 'n skuifbalk by die tabel wanneer nodig (wanneer dit horisontaal te groot is):
Voorbeeld
<div class="table-responsive">
<table class="table">
...
</table>
</div>
U kan ook besluit wanneer die tabel 'n skuifbalk moet kry, afhangend van die skermwydte:
| Klas | Skermwydte |
|---|---|
.table-responsive-sm |
<576px |
.table-responsive-md |
<768px |
.table-responsive-lg |
<992px |
.table-responsive-xl |
< 1200 px |
Voorbeeld
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>