Bootstrap - Imagenes

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.

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

<img src="imagen.png" class="img-circle" />


<img src="imagen.png" class="img-rounded" />


<img src="imagen.png" class="img-thumbnail" />

El efecto que tendremos será el siguiente:

Actividad

Realizar una imagen de 3x3 y colocar en cada campo una imagen


 Fuente:
http://lineadecodigo.com/bootstrap/imagenes-con-estilo-en-bootstrap/