English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap-Basisanleitung

Bootstrap-Plugin

Bootstrap-Tabelle

Bootstrap bietet eine klare Layout-Struktur für die Erstellung von Tabellen. Nachfolgend sind einige von Bootstrap unterstützte Tabellen-Elemente aufgeführt:

TagKlasse
<table>Fügen Sie der Tabelle grundlegende Stile hinzu.
<thead>Containerelement für die Tabellenkopfzeile (<tr>), um Spalten zu kennzeichnen.
<tbody>Containerelement für Tabellenzeilen im Tabellenkörper (<tr>).
<tr>Ein Containerelement für eine Gruppe von Tabellenzellen auf einer Zeile (<td> oder <th>).
<td>Standardzelle der Tabelle.
<th>Spezielle Tabellenzellen, um Spalten oder Zeilen (je nach Bereich und Position) zu kennzeichnen. Muss in <thead> verwendet werden.
<caption>Beschreibung oder Zusammenfassung des Inhalts der Tabelle

Tabellenklassen

Die folgenden Stile können in Tabellen verwendet werden:

Die in der folgenden Tabelle aufgelisteten Kontextklassen erlauben es Ihnen, die Hintergrundfarbe von Tabellenzeilen oder einzelnen Zellen zu ändern.KlasseOnline-Beispiel
inFügen Sie eine grundlegende Stil für jeden <table> hinzu (nur horizontale Trennlinien)Probieren Sie es aus
in-stripedFügen Sie im <tbody> Zebra-Streifen hinzu (IE8 (Nicht unterstützt)Probieren Sie es aus
in-borderedFügen Sie für alle Tabellenzellen Rahmen hinzuProbieren Sie es aus
in-hoverAktivieren Sie den Mouseover-Status in jeder beliebigen Zeile innerhalb von <tbody>Probieren Sie es aus
in-condensedTabellen enger gestaltenProbieren Sie es aus
Verwendung aller Tabellenklassen gleichzeitigProbieren Sie es aus

<tr>, <th> und <td> Klassen

Die folgenden Klassen können für die Zeilen oder Zellen der Tabelle verwendet werden:

Die in der folgenden Tabelle aufgelisteten Kontextklassen erlauben es Ihnen, die Hintergrundfarbe von Tabellenzeilen oder einzelnen Zellen zu ändern.KlasseOnline-Beispiel
BeschreibungAnwenden der Hover-Farbe auf Zeilen oder ZellenProbieren Sie es aus
Einen bestimmten Zeilen- oder Zellenaufkleberfarbe anwendenStellt eine erfolgreiche Operation darProbieren Sie es aus
.infoStellt eine Informationsänderung darProbieren Sie es aus
Stellt eine erfolgreiche oder positive Aktion darStellt eine Warnungsoperation darProbieren Sie es aus
Stellt eine zu beachtende Warnung darStellt eine gefährliche Operation darProbieren Sie es aus

Grundlegende Tabellen<

Wenn Sie eine grundlegende Tabelle mit nur Innenabständen (Padding) und horizontalen Trennlinien haben möchten, fügen Sie die class hinzu in, wie im folgenden Beispiel gezeigt:

px Breite der großen Geräte, werden Sie keine Unterschiede sehen.

Beispiel
!DOCTYPE html>
<html>
	<head>-8<meta charset="utf　
	">　-　Grundlegende Tabellen</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table">
	<caption>Grundlegendes Tabellenlayout</caption>
　　　<thead>
　　　　　　<tr>
　　　　　　　　　<caption>Kompakte Tabellenlayout</<th>
　　　　　　　　　<th>Name</<th>
　　　　　　</tr>
　　　</<thead>
　　　<tbody>
　　　　　　<tr>
　　　　　　　　　<th>Postleitzahl</td>
　　　　　　　　　<td>Tanmay</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　　000/td>
　　　　　　　　　<td>Sachin</td>
　　　　　　</tr>
　　　</tbody>
</table>
</body>
</html>
Testen Sie es heraus ‹/›

Ergebnis wie folgt gezeigt:

Optionale Tabellenklassen

Neben den grundlegenden Tabellenmarken und der .table class gibt es einige Klassen, die zur Definition von Stilen für die Markierungen verwendet werden können. Diese Klassen werden Ihnen vorgestellt.

Tabellen mit Streifen<

Durch Hinzufügen in-striped class, Sie sehen Streifen auf den Zeilen innerhalb von <tbody>, wie im folgenden Beispiel gezeigt:

px Breite der großen Geräte, werden Sie keine Unterschiede sehen.

Beispiel
!DOCTYPE html>
<html>
	<head>-8<meta charset="utf　
	">　-　Tabellen mit Streifen</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
Kompakte Tabelle<-striped">
	<caption>Tabellenlayout mit Streifen</caption>
	<thead>
		<tr>
			<caption>Kompakte Tabellenlayout</<th>
			<th>Name</<th>
			<th>Stadt</<th>
		</tr>
	</<thead>
	<tbody>
		<tr>
			<th>Postleitzahl</td>
			<td>Tanmay</td>
			<td>56<td>Bangalore<1</td>
		</tr>
		<tr>
			000/td>
			<td>Sachin</td>
			<td>4<td>Mumbai<3</td>
		</tr>
		<tr>
			0000/td>
			<td>Uma</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>
Testen Sie es heraus ‹/›

Ergebnis wie folgt gezeigt:

Tabellen mit Rahmen<

Durch Hinzufügen in-bordered class, Sie sehen, dass jeder Element einen Rahmen hat und die Ecken der gesamten Tabelle abgerundet sind, wie im folgenden Beispiel gezeigt:

px Breite der großen Geräte, werden Sie keine Unterschiede sehen.

Beispiel
!DOCTYPE html>
<html>
	<head>-8<meta charset="utf　
	">　-　Tabellen mit Rahmen</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
Kompakte Tabelle<-bordered">
	<caption>Tabellenlayout mit Rahmen</caption>
	<thead>
		<tr>
			<caption>Kompakte Tabellenlayout</<th>
			<th>Name</<th>
			<th>Stadt</<th>
		</tr>
	</<thead>
	<tbody>
		<tr>
			<th>Postleitzahl</td>
			<td>Tanmay</td>
			<td>56<td>Bangalore<1</td>
		</tr>
		<tr>
			000/td>
			<td>Sachin</td>
			<td>4<td>Mumbai<3</td>
		</tr>
		<tr>
			0000/td>
			<td>Uma</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>
Testen Sie es heraus ‹/›

Ergebnis wie folgt gezeigt:

Tabellen mit Hover<

Durch Hinzufügen in-hover class, eine helle Graubackgrundfarbe erscheint, wenn der Zeiger auf einer Zeile gehalten wird, wie im folgenden Beispiel gezeigt:

px Breite der großen Geräte, werden Sie keine Unterschiede sehen.

Beispiel
!DOCTYPE html>
<html>
	<head>-8<meta charset="utf　
	">　-　Tabellen mit Hover</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
Kompakte Tabelle<-hover">
	<caption>Tabellenlayout mit Hover</caption>
	<thead>
		<tr>
			<caption>Kompakte Tabellenlayout</<th>
			<th>Name</<th>
			<th>Stadt</<th>
		</tr>
	</<thead>
	<tbody>
		<tr>
			<th>Postleitzahl</td>
			<td>Tanmay</td>
			<td>56<td>Bangalore<1</td>
		</tr>
		<tr>
			000/td>
			<td>Sachin</td>
			<td>4<td>Mumbai<3</td>
		</tr>
		<tr>
			0000/td>
			<td>Uma</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>
Testen Sie es heraus ‹/›

Ergebnis wie folgt gezeigt:

Tabellen vereinfachen

Durch Hinzufügen in-condensed Die Innenabstände (Padding) der Zeile werden halbiert, um den Tabellen einen engeren Eindruck zu verleihen, wie im folgenden Beispiel gezeigt. Dies ist sehr nützlich, wenn man Informationen enger darstellen möchte.

px Breite der großen Geräte, werden Sie keine Unterschiede sehen.

Beispiel
!DOCTYPE html>
<html>
	<head>-8<meta charset="utf　
	">　-　Kompakte Tabelle</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
Kompakte Tabelle<-<table class="table table
	condensed">/caption>
	<thead>
		<tr>
			<caption>Kompakte Tabellenlayout</<th>
			<th>Name</<th>
			<th>Stadt</<th>
		</tr>
	</<thead>
	<tbody>
		<tr>
			<th>Postleitzahl</td>
			<td>Tanmay</td>
			<td>56<td>Bangalore<1</td>
		</tr>
		<tr>
			000/td>
			<td>Sachin</td>
			<td>4<td>Mumbai<3</td>
		</tr>
		<tr>
			0000/td>
			<td>Uma</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>
Testen Sie es heraus ‹/›

Ergebnis wie folgt gezeigt:

<td>Pune<

Kontextklasse

Die in der folgenden Tabelle aufgelisteten Kontextklassen erlauben es Ihnen, die Hintergrundfarbe von Tabellenzeilen oder einzelnen Zellen zu ändern.Klasse
Beschreibung.active
Einen bestimmten Zeilen- oder Zellenaufkleberfarbe anwenden.success
Stellt eine erfolgreiche oder positive Aktion dar.warning
Stellt eine zu beachtende Warnung dar.danger

Stellt eine gefährliche oder potenziell negative Aktion dar

px Breite der großen Geräte, werden Sie keine Unterschiede sehen.

Beispiel
!DOCTYPE html>
<html>
	<head>-8<meta charset="utf
	">　-　Diese Klassen können auf <tr>、<td> oder <th> angewendet werden./title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table">
	Kontextklasse</caption>
	<thead>
		<tr>
			<th> Produkt</<th>
			<th> Zahlungsdatum</<th>
			<th> Status</<th>
		</tr>
	</<thead>
	<tbody>
		<caption>Contextuelle Tabellenlayout<
			<td>Produkt1</td>
			<td>23/11/2013</td>
			<td>Ausstehende Lieferung</td>
		</tr>
		<tr　class="active">
			<td>Produkt2</td>
			<td>10/11/2013</td>
			<td>Im Laufe der Lieferung</td>
		</tr>
		<tr　class="success">
			<td>Produkt3</td>
			<td>20/10/2013</td>
			<td>Abschließend bestätigen</td>
		</tr>
		<tr　　class="warning">
			<td>Produkt4</td>
			<td>20/10/2013</td>
			<td>Wiedererstattet</td>
		</tr>
	</tbody>
</table>
</body>
</html>
Testen Sie es heraus ‹/›

Ergebnis wie folgt gezeigt:

<tr　　class="danger">

responsive Tabelle in durch das Einfügen beliebiger in-.table responsive 768class innen, können Sie die Tabelle horizontal rollen, um sie auf kleinen Geräten (kleiner als 768px）。Wenn Sie über

px Breite der großen Geräte, werden Sie keine Unterschiede sehen.

Beispiel
!DOCTYPE html>
<html>
	<head>-8<meta charset="utf
	">　-　<title>Bootstrap Beispiel</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="table-responsive">
	<table class="table">
		<caption>Responsive Tabellenlayout</caption>
		<thead>
			<tr>
				<th> Produkt</<th>
				<th> Zahlungsdatum</<th>
				<th> Status</<th>
			</tr>
		</<thead>
		<tbody>
			<tr>
				<td>Produkt1</td>
				<td>23/11/2013</td>
				<td>Ausstehende Lieferung</td>
			</tr>
			<tr>
				<td>Produkt2</td>
				<td>10/11/2013</td>
				<td>Im Laufe der Lieferung</td>
			</tr>
			<tr>
				<td>Produkt3</td>
				<td>20/10/2013</td>
				<td>Abschließend bestätigen</td>
			</tr>
			<tr>
				<td>Produkt4</td>
				<td>20/10/2013</td>
				<td>Wiedererstattet</td>
			</tr>
		</tbody>
</table>
</div>　　	
</body>
</html>
Testen Sie es heraus ‹/›

Ergebnis wie folgt gezeigt:

Bootstrap-FormularBootstrap-Code