Bootstrap Thumbnail
In diesem Kapitel wird Bootstrap Thumbnails erklären. Die meisten Websites erfordern Layout Bild, Video, Text, usw. in das Netz. Bootstrap Thumbnail für diese bietet eine einfache Möglichkeit. So verwenden Bootstrap Thumbnails erstellen, wie folgt:
- In <a> um das Image - Tag mit derKlasse .thumbnail.
- Dies wird Polsterung (padding) vier Pixel und einen grauen Rand hinzuzufügen.
- Wenn die Maus über das Bild schwebt, wird die Animation die Umrisse eines Bildes zeigen.
Das folgende Beispiel zeigt das Standard-Miniaturbild:
Beispiele
<Div class = "Zeile">
<Div class = "col-sm-6 col-md-3">
<A href = "#" class = "Miniatur">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generische Platzhalter Thumbnail">
</ A>
</ Div>
<Div class = "col-sm-6 col-md-3">
<A href = "#" class = "Miniatur">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generische Platzhalter Thumbnail">
</ A>
</ Div>
<Div class = "col-sm-6 col-md-3">
<A href = "#" class = "Miniatur">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generische Platzhalter Thumbnail">
</ A>
</ Div>
<Div class = "col-sm-6 col-md-3">
<A href = "#" class = "Miniatur">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generische Platzhalter Thumbnail">
</ A>
</ Div>
</ Div>
Versuchen »
Die Ergebnisse sind wie folgt:
Fügen Sie benutzerdefinierte Inhalte
Nun, da wir eine grundlegende Thumbnail haben, können wir eine Vielzahl von Inhalten in HTML-Thumbnails, wie Überschriften, Absätze oder Schaltflächen hinzufügen. Spezifischen Schritte sind wie folgt:
- Die <a> Label mitKlasse .thumbnail geändert <div>.
- In der <div> innen, können Sie hinzufügen etwas Sie hinzufügen möchten. Da es sich um eine <div>, können wir die Standardnamensregeln auf Spanne basiert, um die Größe anzupassen.
- Wenn Sie mehrere Bilder gruppieren möchten, benutzen Sie bitte diese in einer ungeordneten Liste setzen, und jeder Listenpunkt links schweben.
Das folgende Beispiel veranschaulicht diesen Punkt:
Beispiele
<Div class = "Zeile">
<Div class = "col-sm-6 col-md-3">
<Div class = "Miniatur">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generische Platzhalter Thumbnail">
<Div class = "caption">
<H3> Registerkarte Miniatur </ h3>
<P> Einige Beispieltext. Einige Beispieltext. </ P>
<P>
<A href = "#" class = "BTN BTN-primary" role = "Taste"> Taste </ a>
<A href = "#" class = "btn btn-default" role = "Taste"> Taste </ a>
</ P>
</ Div>
</ Div>
</ Div>
<Div class = "col-sm-6 col-md-3">
<Div class = "Miniatur">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generische Platzhalter Thumbnail">
<Div class = "caption">
<H3> Registerkarte Miniatur </ h3>
<P> Einige Beispieltext. Einige Beispieltext. </ P>
<P>
<A href = "#" class = "BTN BTN-primary" role = "Taste"> Taste </ a>
<A href = "#" class = "btn btn-default" role = "Taste"> Taste </ a>
</ P>
</ Div>
</ Div>
</ Div>
<Div class = "col-sm-6 col-md-3">
<Div class = "Miniatur">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generische Platzhalter Thumbnail">
<Div class = "caption">
<H3> Registerkarte Miniatur </ h3>
<P> Einige Beispieltext. Einige Beispieltext. </ P>
<P>
<A href = "#" class = "BTN BTN-primary" role = "Taste"> Taste </ a>
<A href = "#" class = "btn btn-default" role = "Taste"> Taste </ a>
</ P>
</ Div>
</ Div>
</ Div>
<Div class = "col-sm-6 col-md-3">
<Div class = "Miniatur">
<img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generische Platzhalter Thumbnail">
<Div class = "caption">
<H3> Registerkarte Miniatur </ h3>
<P> Einige Beispieltext. Einige Beispieltext. </ P>
<P>
<A href = "#" class = "BTN BTN-primary" role = "Taste"> Taste </ a>
<A href = "#" class = "btn btn-default" role = "Taste"> Taste </ a>
</ P>
</ Div>
</ Div>
</ Div>
</ Div>
Versuchen »
Die Ergebnisse sind wie folgt:
