Bootstrap Bilder
In diesem Kapitel lernen wir die Unterstützung von Bootstrap für Bilder kennen. Bootstrap bietet drei Klassen, mit denen einfache Stile auf Bilder angewendet werden können:
- .img-rounded: Fügtborder-radius:6pxhinzu, um abgerundete Ecken für Bilder zu erhalten.
- .img-circle: Fügtborder-radius:50%hinzu, um das gesamte Bild kreisrund zu machen.
- .img-thumbnail: Fügt etwas Innenabstand (Padding) und einen grauen Rand hinzu.
Siehe das folgende Beispiel:
Beispiel
<img src="/wp-content/uploads/2014/06/download.png" class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png" class="img-circle">
<img src="/wp-content/uploads/2014/06/download.png" class="img-thumbnail">
Ausprobieren »
Das Ergebnis wird unten angezeigt:
<img>-Klassen
Die folgenden Klassen können für jedes Bild verwendet werden.
| Klasse | Beschreibung | Beispiel |
|---|---|---|
| .img-rounded | Fügt Bildern abgerundete Ecken hinzu (wird in IE8 nicht unterstützt) | Ausprobieren |
| .img-circle | Macht Bilder kreisrund (wird in IE8 nicht unterstützt) | Ausprobieren |
| .img-thumbnail | Miniaturbild-Funktionalität | Ausprobieren |
| .img-responsive | Responsive Bilder (skaliert gut zum Elternelement) | Ausprobieren |
Responsive Bilder
Durch das Hinzufügen der Klasse .img-responsive zum <img>-Tag können Sie Bilder für ein responsives Design anpassen. Das Bild skaliert gut zum Elternelement.
Die Klasse .img-responsive wendet die Stile max-width: 100%; und height: auto; auf Bilder an:
Andere Erweiterungen