Bootstrap Formas de imagen
Esquinas redondeadas:
Circulo:
Miniatura:
Esquinas redondeadas
El .img-rounded clase añade esquinas redondeadas a una imagen (IE8 no es compatible con esquinas redondeadas):
Ejemplo
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre"
width="304" height="236"> Inténtalo tú mismo " Circulo
El .img-circle de clase da forma a la imagen de un círculo (IE8 no es compatible con las esquinas redondeadas):
Ejemplo
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre"
width="304" height="236"> Inténtalo tú mismo " Miniatura
El .img-thumbnail de clase da forma a la imagen para una versión en miniatura:
Ejemplo
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"
width="304" height="236"> Inténtalo tú mismo " Imágenes de respuesta
Imágenes vienen en todos los tamaños. Lo mismo ocurre con las pantallas. Responsive imágenes se ajustan automáticamente para adaptarse al tamaño de la pantalla.
Crear imágenes que responden mediante la adición de un .img-responsive la clase a la <img> etiqueta. La imagen será entonces escalar muy bien al elemento padre.
El .img-responsive clase corresponde display: block; y max-width: 100%; y height: auto; a la imagen:
galería de imágenes
También se puede utilizar Bootstrap's sistema de red en conjunto con el .thumbnail clase para crear una galería de imágenes:
Ejemplo
<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> Inténtalo tú mismo " Incrusta Responsive
También permiten vídeos o presentaciones de diapositivas escala correctamente en cualquier dispositivo.
Las clases pueden ser aplicados directamente a <iframe>, <embed>, <video> y <object> elementos.
El siguiente ejemplo crea un video de respuesta mediante la adición de un .embed-responsive-item clase a un <iframe> etiqueta (el video a continuación, se escala muy bien al elemento padre). El conteniendo <div> Define la relación de aspecto del vídeo:
Ejemplo
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div> Inténtalo tú mismo " ¿Cuál es la relación de aspecto?
La relación de aspecto de una imagen se describe la relación proporcional entre su anchura y su altura. Dos relaciones de aspecto de vídeo comunes son de 4: 3 (el formato de vídeo universal del siglo 20), y de 16: 9 (universal para la televisión de alta definición y la televisión digital europea).
Se puede elegir entre dos clases de relación de aspecto:
<!-- 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>Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4»
Completa Bootstrap Imagen Referencia
Para una referencia completa de todas las clases de imágenes, vaya a nuestra completa Bootstrap imagen de referencia .