Imágenes con estilo en Bootstrap

25/Sep/2013 Bootstrap , 1 Comentario

Dentro del framework Bootstrap es muy fácil dar estilo a las imágenes y conseguir efectos sobre ellas. Bootstrap nos ofrece tres posibilidades de crear imágenes con estilo. Los estilos que podemos crear son:

  • Imagen con los bordes redondeados, la imagen aparece con los bordes redondeados.
  • Imagen en un circulo, la imagen aparece dentro de un circulo.
  • Imagen como un thumbnail, el efecto es que la imagen está con los bordes redondeados y alrededor de ella hay un borde, que tiene también los bordes redondeados. Entre la imagen y el borde hay un espacio en blanco. Al más puro estilo de retrato.

A cada uno de los estilos, Bootstrap le ha asignado una clase. De esta manera si queremos insertar imágenes con estilo en Bootstrap valdrá con asignar dicha clase a la imagen.

  1. <img src="imagen.png" class="estilo_bootstrap" />

Las clases que representan los estilos indicados arriba son:

  • img-rounded, para los bordes redondeados.
  • img-circle, para la imagen en un circulo.
  • img-thumbnail, para los thumbnails.

De esta forma, si queremos dar los diferentes estilos solo tenemos que utilizar las clases:

  1. <img src="imagen.png" class="img-circle" />
  2. <img src="imagen.png" class="img-rounded" />
  3. <img src="imagen.png" class="img-thumbnail" />

El efecto que tendremos será el siguiente:

imagen-estilo-bootstrap

Un comentario en “Imágenes con estilo en Bootstrap”

Víctor Cuervo

harri luis saldivar

muy interesante

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*