THUMBNAILS
Gracias a la rejilla de Bootstrap 3 explicada en los capítulos anteriores y gracias al componente de los thumbnails (en español, "imagenes en miniatura"), resulta muy sencillo crear galerías de imágenes y vídeos.
Ejemplo Sencillo
El componente de imágenes en miniatura de Bootstrap 3 está diseñado para mostrar lo más fácilmente posible varias imágenes que enlazan con su versión en alta resolución. Ejemplo:
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="..." alt="...">
</a>
</div>
...
</div>
Resultado
Añadiendo Contenido a las Imágenes en Miniatura
Añadiendo un poco de código HTML es posible añadir títulos, párrafos, botones o cualquier otro elemento a cada imagen en miniatura. Ejemplo:
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="..." alt="...">
<div class="caption">
<h3>Título de la imagen</h3>
<p>...</p>
<p>
<a href="#" class="btn btn-primary" role="button">Botón</a>
<a href="#" class="btn btn-default" role="button">Botón</a>
</p>
</div>
</div>
</div>
</div>
