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

¿Algo que nos quieras comentar?

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

*

*