Bootstrap Grund Tabelle
Eine grundlegende Bootstrap Tisch hat eine leichte Polsterung und nur horizontal Teiler.
Die .table Klasse fügt grundlegende Styling zu einer Tabelle:
Beispiel
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Gestreifte Zeilen
Die .table-striped Klasse fügt Zebra-Streifen in eine Tabelle:
Beispiel
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Grenzt Tabelle
Die .table-bordered Klasse fügt Grenzen auf allen Seiten des Tisches und Zellen:
Beispiel
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Hover Reihen
Die .table-hover - Klasse ermöglicht einen Schwebezustand auf Tabellenzeilen:
Beispiel
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Condensed Tabelle
Die .table-condensed Klasse macht eine Tabelle kompakter durch die Zellauffüllung halbiert:
Beispiel
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Kontext-bezogene Klassen
Kontext - bezogene Klassen können zu Farbtabellenzeilen verwendet werden ( <tr> ) oder Tabellenzellen ( <td> ):
Beispiel
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Die kontextuellen Klassen, die verwendet werden können, sind:
| Klasse | Beschreibung |
|---|---|
.active | Wendet die Hover-Farbe auf die Tabellenzeile oder einer Tabellenzelle |
.success | Zeigt einen erfolgreichen oder positive Wirkung |
.info | Weist auf eine neutrale informative Änderung oder Aktion |
.warning | Weist auf eine Warnung, die Aufmerksamkeit benötigen |
.danger | Weist auf eine gefährliche oder potentiell negative Handlung |
Responsive Tabellen
Die .table-responsive Klasse erstellt eine ansprechende Tabelle. Die Tabelle wird dann horizontal scrollen auf kleinen Geräten (unter 768px). Wenn auf etwas größer als 768px breit sehen, gibt es keinen Unterschied:
Beispiel
<div class="table-responsive">
<table class="table">
...
</table>
</div> Versuch es selber " Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 » Übung 6»
Komplette Bootstrap Table Reference Bootstrap Table Reference
Eine vollständige Referenz aller Tabellenklassen, gehen Sie auf unsere komplette Bootstrap Tabellen Referenz .