Bootstrap Vorschaubilder
In diesem Kapitel werden Bootstrap-Vorschaubilder erläutert. Die meisten Websites müssen Bilder, Videos, Text usw. in einem Raster anordnen. Bootstrap bietet dafür eine einfache Möglichkeit mit Vorschaubildern. Die Schritte zum Erstellen eines Vorschaubildes mit Bootstrap sind wie folgt:
- Fügen Sie eine Klasse um das Bild.thumbnaildes <a>-Tags hinzu.
- Dadurch werden vier Pixel Innenabstand (Padding) und ein grauer Rand hinzugefügt.
- Wenn sich die Maus über das Bild bewegt, wird die Kontur des Bildes mit einer Animation angezeigt.
Das folgende Beispiel veranschaulicht das Standard-Vorschaubild:
Beispiel
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="Generisches Platzhalter-Vorschaubild">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="Generisches Platzhalter-Vorschaubild">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="Generisches Platzhalter-Vorschaubild">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="Generisches Platzhalter-Vorschaubild">
</a>
</div>
</div>
Selbst ausprobieren »
Das Ergebnis ist wie folgt:
Benutzerdefinierten Inhalt hinzufügen
Da wir nun ein einfaches Vorschaubild haben, können wir verschiedene HTML-Inhalte wie Überschriften, Absätze oder Schaltflächen hinzufügen. Die genauen Schritte sind wie folgt:
- Ändern Sie das Tag mit der Klasse.thumbnaildes <a>-Tags in <div>.
- Innerhalb des <div> können Sie alles hinzufügen, was Sie möchten. Da es sich um ein <div> handelt, können wir die standardmäßige span-basierte Benennungskonvention verwenden, um die Größe anzupassen.
- Wenn Sie mehrere Bilder gruppieren möchten, platzieren Sie diese in einer ungeordneten Liste, wobei jedes Listenelement nach links floatet.
Das folgende Beispiel demonstriert dies:
Beispiel
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="Generisches Platzhalter-Vorschaubild">
<div class="caption">
<h3>Vorschaubild-Beschriftung</h3>
<p>Etwas Beispieltext. Etwas Beispieltext.</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="/wp-content/uploads/2014/06/kittens.jpg"
alt="Generisches Platzhalter-Vorschaubild">
<div class="caption">
<h3>Vorschaubild-Beschriftung</h3>
<p>Etwas Beispieltext. Etwas Beispieltext.</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="/wp-content/uploads/2014/06/kittens.jpg"
alt="Generisches Platzhalter-Vorschaubild">
<div class="caption">
<h3>Vorschaubild-Beschriftung</h3>
<p>Etwas Beispieltext. Etwas Beispieltext.</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="/wp-content/uploads/2014/06/kittens.jpg"
alt="Generisches Platzhalter-Vorschaubild">
<div class="caption">
<h3>Vorschaubild-Beschriftung</h3>
<p>Etwas Beispieltext. Etwas Beispieltext.</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>
Selbst ausprobieren »
Das Ergebnis ist wie folgt:
