Bootstrap Bild Shapes
Abgerundete Ecken:
Kreis:
Miniaturansicht:
Abgerundete Ecken
Die .img-rounded Klasse fügt Ecken auf ein Bild gerundet (IE8 nicht abgerundeten Ecken unterstützen):
Beispiel
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre"
width="304" height="236"> Versuch es selber " Kreis
Die .img-circle prägt das Bild zu einem Kreis (IE8 nicht abgerundeten Ecken unterstützen):
Beispiel
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre"
width="304" height="236"> Versuch es selber " Miniaturansicht
Die .img-thumbnail - Klasse prägt das Bild auf ein Miniaturbild:
Beispiel
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"
width="304" height="236"> Versuch es selber " Responsive Bilder
Bilder gibt es in allen Größen. So tun Bildschirme. Responsive Bilder passen sich automatisch der Größe des Bildschirms zu passen.
Erstellen Sie ansprechende Bilder durch Hinzufügen eines .img-responsive Klasse auf die <img> -Tag. Das Bild wird dann schön auf das übergeordnete Element skalieren.
Die .img-responsive - Klasse wendet display: block; und max-width: 100%; und height: auto; zu dem Bild:
Bildergalerie
Sie können auch mit Bootstrap's Grid - System in Verbindung mit dem .thumbnail Klasse eine Fotogalerie zu erstellen:
Beispiel
<div class="row">
<div class="col-md-4">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<img src="pulpitrock.jpg" alt="Pulpit
Rock" style="width:150px;height:150px">
</a>
</div>
<div
class="col-md-4">
<a href="moustiers-sainte-marie.jpg"
class="thumbnail">
<p>Moustiers-Sainte-Marie:
Considered as one of the "most beautiful villages of France".</p>
<img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie"
style="width:150px;height:150px">
</a>
</div>
<div class="col-md-4">
<a href="cinqueterre.jpg" class="thumbnail">
<p>The Cinque Terre: A rugged portion of coast in the Liguria region of
Italy.</p>
<img src="cinqueterre.jpg"
alt="Cinque Terre" style="width:150px;height:150px">
</a>
</div>
</div> Versuch es selber " Responsive Einbettungen
Auch Videos oder Diashows lassen richtig auf jedem Gerät zu skalieren.
Klassen können direkt angewendet werden <iframe>, <embed>, <video> und <object> Elemente.
Das folgende Beispiel erzeugt eine ansprechende Video durch Hinzufügen eines .embed-responsive-item - Klasse zu einem <iframe> -Tag (das Video wird dann schön auf das übergeordnete Element skalieren). Das enthält <div> Legt das Seitenverhältnis des Videos:
Beispiel
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div> Versuch es selber " Was ist das Seitenverhältnis?
Das Seitenverhältnis eines Bildes beschreibt die proportionale Beziehung zwischen seiner Breite und seiner Höhe. Zwei gemeinsame Video-Seitenverhältnisse sind 4: 3 (das universelle Video-Format des 20. Jahrhunderts) und 16: 9 (universal für HD-Fernsehen und dem europäischen Digital-TV).
Sie können zwischen zwei Seitenverhältnis Klassen wählen:
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div>Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4»
Vollständige Bootstrap Bild - Referenz
Eine vollständige Referenz aller Bildklassen, gehen Sie auf unsere komplette Bootstrap Bild - Referenz .