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

Bootstrap 基础教程

Bootstrap 插件

Bootstrap-Panels

本章将讲解 Bootstrap 面板(Panels)。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可，如下面的示例所示：

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　　<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="panel panel-default">
　　　　<div class="panel-body">
　　　　　　　　Dies ist ein grundlegendes Panel
　　　　</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt gezeigt:

面板标题

我们可以通过以下两种方式来添加面板标题：

  • 使用 .panel-heading class 可以很简单地向面板添加标题容器。

  • 使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题。

下面的示例演示了这两种方式：

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<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="panel panel-default">
	<div class="panel-heading">
		不带　title　的面板标题
	</div>
	<div class="panel-body">
		面板内容
	</div>
</div>
<div class="panel panel-default">
	<div class="panel-heading">
		<h2　class="panel-title">
			带有　title　的面板标题
		</h2>
	</div>
	<div class="panel-body">
		面板内容
	</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt gezeigt:

面板脚注

我们可以在面板中添加脚注，只需要把按钮或者副文本放在带有 class .panel-footer 的 <div> 中即可。下面的示例演示了这点：

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<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="panel panel-default">
	<div class="panel-body">
		Dies ist ein grundlegendes Panel
	</div>
	<div class="panel-footer">面板脚注</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt gezeigt:

面板脚注不会从带语境色彩的面板中继承颜色和边框，因为它不是前景中的内容。

带语境色彩的面板

使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-dangerverwenden, um Panels mit kontextbezogenen Farben zu setzen, Beispiel unten:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　mit kontextbezogenen Farben-Panels</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="panel panel-primary">
	<div class="panel-heading">
		<h2　class="panel-title">Panel-Titel</h2>
	</div>
	<div class="panel-body">
		Dies ist ein grundlegendes Panel
	</div>
</div>
<div class="panel panel-success">
	<div class="panel-heading">
		<h2　class="panel-title">Panel-Titel</h2>
	</div>
	<div class="panel-body">
		Dies ist ein grundlegendes Panel
	</div>
</div>
<div class="panel panel-info">
	<div class="panel-heading">
		<h2　class="panel-title">Panel-Titel</h2>
	</div>
	<div class="panel-body">
		Dies ist ein grundlegendes Panel
	</div>
</div>
<div class="panel panel-warning">
	<div class="panel-heading">
		<h2　class="panel-title">Panel-Titel</h2>
	</div>
	<div class="panel-body">
		Dies ist ein grundlegendes Panel
	</div>
</div>
<div class="panel panel-danger">
	<div class="panel-heading">
		<h2　class="panel-title">Panel-Titel</h2>
	</div>
	<div class="panel-body">
		Dies ist ein grundlegendes Panel
	</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt gezeigt:

mit Tabellen-Panels

Um eine Rahmenlose Tabelle im Panel zu erstellen, können wir im Panel die Klasse .table。Angenommen, es gibt einen <div>, der .panel-body，können wir zusätzliche Ränder zur Trennung am oberen Rand der Tabelle hinzufügen. Wenn das .panel-body des <div>, dann bewegt sich das Komponente ohne Unterbrechung vom Panelkopf zur Tabelle.

Der folgende Beispiel zeigt dies:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　mit Tabellen-Panels</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="panel panel-default">
	<div class="panel-heading">
		<h2　class="panel-title">Panel-Titel</h2>
	</div>
	<div class="panel-body">
		Dies ist ein grundlegendes Panel
	</div>
	<table class="table">
		<th>Produkt</th><th>Preis　</th>
		<tr><td>Produkt A</td><td>200</td></tr>
		<tr><td>Produkt B</td><td>400</td></tr>
	</table>
</div>
<div class="panel panel-default">
	<div class="panel-heading">Panel-Titel</div>
	<table class="table">
		<th>Produkt</th><th>Preis　</th>
		<tr><td>Produkt A</td><td>200</td></tr>
		<tr><td>Produkt B</td><td>400</td></tr>
	</table>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt gezeigt:

mit Listengruppen-Panels

Man kann Listengruppen in jedem Panel enthalten, indem man im <div>-Element hinzufügt .panel und .panel-default Klasse, um ein Panel zu erstellen und Listengruppen im Panel hinzuzufügen. Man kann von Listengruppen in einem Kapitel, wie man Listengruppen erstellt.

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　mit Listengruppen-Panels</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="panel panel-default">
	<div class="panel-heading">Panel-Titel</div>
	<div class="panel-body">
		<p>Dies ist ein grundlegendes Panel-Inhalt. Dies ist ein grundlegendes Panel-Inhalt.
			Dies ist ein grundlegendes Panel-Inhalt. Dies ist ein grundlegendes Panel-Inhalt.
			Dies ist ein grundlegendes Panel-Inhalt. Dies ist ein grundlegendes Panel-Inhalt.
			Dies ist ein grundlegendes Panel-Inhalt. Dies ist ein grundlegendes Panel-Inhalt.
		</p>
	</div>
	<ul class="list-gruppe">
		<li class="list-gruppe-item">Kostenlose Domänename Registrierung</li>
		<li class="list-gruppe-item">Kostenlose Windows-Webspace-Hosting</li>
		<li class="list-gruppe-item">Anzahl der Bilder</li>
		<li class="list-gruppe-item">24*7　unterstützt</li>
		<li class="list-gruppe-item">Jährliche Aktualisierungskosten</li>
	</ul>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt gezeigt:

Bootstrap-WellBootstrap-Listengruppe