Latest web development tutorials

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:

Bild

<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:

Beispiele

<Img src = "cinqueterre.jpg" class = "img-responsive" alt = "Cinque Terre">

Versuchen »