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:
