Bootstrap-Basis-Tutorial

Bootstrap-Plugins

Bootstrap-Warnung Bootstrap-Seiten-Titel

Bootstrap-Thumbnails

Dieses Kapitel erläutert die Bootstrap-Vorschaubilder. Die meisten Websites benötigen eine Grid-Layout für Bilder, Videos, Text usw. Bootstrap bietet eine einfache Möglichkeit, dies mit Vorschaubildern zu erreichen. Die Schritte, um ein Vorschaubild mit Bootstrap zu erstellen, sind wie folgt:

Umrandung mit der class .thumbnail den <a>-Tag.
Dies fügt vier Pixel Innenabstand (Padding) und eine graue Umrandung hinzu.
Wenn der Mauszeiger auf das Bild gehalten wird, wird der Umrandung des Bildes animiert angezeigt.

Das folgende Beispiel zeigt das Standard-Vorschaubild:

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　　<title>Bootstrap-Beispiel　-　Vorschaubild</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="row">
　　　　<div class="col-sm-6　col-md-3">
　　　　　　　　<a href="#" class="thumbnail">
　　　　　　　　　　　　<img src="/laufen/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Allgemeiner Platzhalter-Vorschaubild">
　　　　　　　　</a>
　　　　</div>
　　　　<div class="col-sm-6　col-md-3">
　　　　　　　　<a href="#" class="thumbnail">
　　　　　　　　　　　　<img src="/laufen/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Allgemeiner Platzhalter-Vorschaubild">
　　　　　　　　</a>
　　　　</div>
　　　　<div class="col-sm-6　col-md-3">
　　　　　　　　<a href="#" class="thumbnail">
　　　　　　　　　　　　<img src="/laufen/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Allgemeiner Platzhalter-Vorschaubild">
　　　　　　　　</a>
　　　　</div>
　　　　<div class="col-sm-6　col-md-3">
　　　　　　　　<a href="#" class="thumbnail">
　　　　　　　　　　　　<img src="/laufen/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Allgemeiner Platzhalter-Vorschaubild">
　　　　　　　　</a>
　　　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt gezeigt:

Benutzerdefinierte Inhalte hinzufügen

Nun haben wir eine grundlegende Vorschaubild, und wir können verschiedene HTML-Inhalte zu dem Vorschaubild hinzufügen, wie z.B. Titel, Absätze oder Schaltflächen. Die spezifischen Schritte sind wie folgt:

Den mit der 　class .thumbnail den <a>-Tag in ein <div> ändern.
Innerhalb dieses <div>, können Sie alles hinzufügen, was Sie hinzufügen möchten. Da dies ein <div> ist, können wir die Standard-named-based-Regeln für die Größenanpassung verwenden.
Wenn Sie mehrere Bilder gruppieren möchten, platzieren Sie sie in einer nicht aufgelisteten Liste und lassen Sie jeden Listenpunkt links fließen.

Der folgende Beispiel zeigt dies:

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　　<title>Bootstrap-Beispiel　-　Benutzerdefinierte Vorschaubilder</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="row">
　　　　<div class="col-sm-6　col-md-3">
　　　　　　　　<div class="thumbnail">
　　　　　　　　　　　　<img src="/laufen/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Allgemeiner Platzhalter-Vorschaubild">
　　　　　　　　　　　　<div class="caption">
　　　　　　　　　　　　　　　　<h2>Miniaturbild-Tags</h2>
　　　　　　　　　　　　　　　　<p>Einige Beispieltexte. Einige Beispieltexte.</p>
　　　　　　　　　　　　　　　　<p>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-primary"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Schaltfläche
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-default"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Schaltfläche
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　</div>
　　　　<div class="col-sm-6　col-md-3">
　　　　　　　　<div class="thumbnail">
　　　　　　　　　　　　<img src="/laufen/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Allgemeiner Platzhalter-Vorschaubild">
　　　　　　　　　　　　<div class="caption">
　　　　　　　　　　　　　　　　<h2>Miniaturbild-Tags</h2>
　　　　　　　　　　　　　　　　<p>Einige Beispieltexte. Einige Beispieltexte.</p>
　　　　　　　　　　　　　　　　<p>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-primary"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Schaltfläche
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-default"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Schaltfläche
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　</div>
　　　　<div class="col-sm-6　col-md-3">
　　　　　　　　<div class="thumbnail">
　　　　　　　　　　　　<img src="/laufen/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Allgemeiner Platzhalter-Vorschaubild">
　　　　　　　　　　　　<div class="caption">
　　　　　　　　　　　　　　　　<h2>Miniaturbild-Tags</h2>
　　　　　　　　　　　　　　　　<p>Einige Beispieltexte. Einige Beispieltexte.</p>
　　　　　　　　　　　　　　　　<p>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-primary"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Schaltfläche
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-default"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Schaltfläche
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　</div>
　　　　<div class="col-sm-6　col-md-3">
　　　　　　　　<div class="thumbnail">
　　　　　　　　　　　　<img src="/laufen/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Allgemeiner Platzhalter-Vorschaubild">
　　　　　　　　　　　　<div class="caption">
　　　　　　　　　　　　　　　　<h2>Miniaturbild-Tags</h2>
　　　　　　　　　　　　　　　　<p>Einige Beispieltexte. Einige Beispieltexte.</p>
　　　　　　　　　　　　　　　　<p>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-primary"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Schaltfläche
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-default"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Schaltfläche
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt gezeigt:

Bootstrap-Warnung Bootstrap-Seiten-Titel