Bootstrap-Formular
Bootstrap bietet ein übersichtliches Layout erstellte Tabelle. Die folgende Tabelle enthält einige Tabellenelemente Bootstrap-Unterstützung:
| Etikett | Beschreibung |
|---|---|
| <Table> | Das Hinzufügen der Basis von Stil zu bilden. |
| <Thead> | Tabelle Containerelement Kopfzeile (<tr>) verwendet, um die Tabellenspalten zu identifizieren. |
| <Tbody> | Tabelle Containerelement im Körper der Tabellenzeile (<tr>). |
| <Tr> | Eine Gruppe erscheinen auf einer einzigen Zeile in dem Containerelement der Tabellenzelle (<td> oder <th>). |
| <Td> | Die Standard-Tabellenzelle. |
| <Th> | Spezielle Tabellenzelle, verwendet, um die Spalte zu identifizieren oder Zeile (je nach Umfang und Ort). Sie müssen die <thead> innen verwenden. |
| <Caption> | Über Tabellenspeicherinhalt Beschreibung oder Zusammenfassung. |
Form-Klasse
In der folgenden Tabelle Stil Tabellen können verwendet werden:
| Kategorie | Beschreibung | Beispiele |
|---|---|---|
| .table | Willkürliche <table> Hinzufügen Basisstil (nur horizontale Trenn) | versuchen |
| .table-gestreift | In der <tbody> in der Form Zebrastreifen hinzufügen (IE8 nicht unterstützt) | versuchen |
| .table umrandete | Fügen Sie eine Grenze für alle Tabellenzellen | versuchen |
| .table-Hover | Im <tbody> innerhalb einer Zeile ermöglichen schweben Zustand | versuchen |
| .table-kondensiert | Machen kompakter Form | versuchen |
| Gemeinsame Nutzung aller Formen Klassen | versuchen | |
<Tr> <th> und <td> Klasse
Klassen Die folgende Tabelle kann verwendet werden, um eine Zeile oder Zelle zu bilden:
| Kategorie | Beschreibung | Beispiele |
|---|---|---|
| .active | Die Hover-Farbauftrag auf Linie oder Zelle | versuchen |
| .success | Es zeigt einen erfolgreichen Betrieb | versuchen |
| .info | Informationen wechselnden Betriebs darstellt | versuchen |
| .warning | Es stellt eine Warnung Betrieb | versuchen |
| .danger | Es stellt eine gefährliche Operation | versuchen |
Die Grundform
Wenn Sie nur mit einer Polsterung (padding) und Basistabelle Ebene geteilt, fügenKlasse.table, wie in den folgenden Beispielen gezeigt:
Beispiele
Versuchen »
Die Ergebnisse sind wie folgt:
Optional Form-Klasse
Neben der Basistabelle Markup und .table Klasse, und einige können als Marker verwendet werden, um die Style-Klassen zu definieren. Nachfolgend erhalten Sie auf diese Klassen einzuführen.
Gestreifte Tabelle
Durch die Zugabe von.table-gestreifte Klasse,werden Sie die Streifen auf der Linie <tbody> innerhalb, wie das folgende Beispiel zeigt:
Beispiele
Versuchen »
Die Ergebnisse sind wie folgt:
Tabellenrahmen
Durch die Zugabe von.table umrandete Klasse,werden Sie sehen , dass jedes Element einen Rahmen hat sich um, und die Summe wird Form gerundet, wie im folgenden Beispiel gezeigt:
Beispiele
Versuchen »
Die Ergebnisse sind wie folgt:
Hover Tisch
Durch die Zugabe von.table-Hover-Klasse,wenn der Mauszeiger über die Zeile ist , wenn es einen hellgrauen Hintergrund sein, wie in den folgenden Beispielen gezeigt:
Beispiele
Versuchen »
Die Ergebnisse sind wie folgt:
kompakter Form
Durch die Zugabe von.table kondensierte Klasseinline Polsterung (padding) in zwei Hälften geschnitten, so dass der Tisch kompaktere sieht, wie im folgenden Beispiel gezeigt. Diese Informationen sind nützlich, wenn Sie kompakter zu suchen.
Beispiele
Versuchen »
Die Ergebnisse sind wie folgt:
Context-Klasse
Context-Klasse in der folgenden Tabelle aufgeführt können Sie die Hintergrundfarbe von Tabellenzeilen oder einzelne Zellen zu ändern.
| 类 | 描述 |
|---|---|
| .active | 对某一特定的行或单元格应用悬停颜色 |
| .success | 表示一个成功的或积极的动作 |
| .warning | 表示一个需要注意的警告 |
| .danger | 表示一个危险的或潜在的负面动作 |
Diese Klassen können auf die <tr> angewendet werden, <td> oder <th>.
Beispiele
Versuchen »
Die Ergebnisse sind wie folgt:
Responsive Tisch
Mit jedem.tablein.table-responsive Klasse verpackt,können Sie die Tabelle haben , horizontal zu scrollen kleinen Geräten zu ermöglichen (weniger als 768px). Wenn sie auf einem Großgeräte betrachtet größer als 768px breit, werden Sie keinen Unterschied sehen.
Beispiele
Versuchen »
Die Ergebnisse sind wie folgt:
