Bootstrap Bild
In diesem Kapitel werden wir Bootstrap Unterstützung für ein Bild zu lernen. Bootstrap bietet drei können auf das Bild, einfachen Stil Klasse angewendet werden:
- .img-gerundet:border-radius: 6px das Bild Filet zu bekommen.
- .img-Kreis:addborder-radius: 50%auf das ganze Bild Kreis wird machen.
- .img-Thumbnail:Fügen Sie etwas Polsterung (padding) und einen grauen Rand.
Betrachten Sie die folgenden Beispiele zeigen:
Beispiele
<img src = "/wp-content/uploads/2014/06/download.png" class = "img-gerundet">
<img src = "/wp-content/uploads/2014/06/download.png" class = "img-Kreis">
<img src = "/wp-content/uploads/2014/06/download.png" class = "img-Thumbnail">
Versuchen »
Die Ergebnisse sind wie folgt:
<Img> Klasse
Die folgenden Klassen sind auf ein beliebiges Bild zur Verfügung.
Kategorie | Beschreibung | Beispiele |
---|---|---|
.img-gerundet | Hinzufügen eines Bild-Filet (IE8 nicht unterstützt) | versuchen |
.img-Kreis | Das Bild wird kreisförmig (IE8 nicht unterstützt) | versuchen |
.img-Thumbnail | thumbnails | versuchen |
.img-responsive | Bilder Responsive (skaliert gut an das übergeordnete Element) | versuchen |
Responsive Bild
Mit dem Tag <img> .img ansprechenden Bildträger Klasse hinzufügen, um ansprechende Design machen. Die Bilder werden auch auf das übergeordnete Element skalieren.
.img-responsive Klasse max-width: 100%; und height: auto; Stil auf das Bild angewendet wird: