Gracias a la rejilla de Bootstrap 3 explicada en los capítulos anteriores y gracias al componente de las imágenes en miniatura (en inglés, "thumbnails"), resulta muy sencillo crear galerías de imágenes y vídeos.
6.14.1. 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>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.47 Imágenes en miniatura en Bootstrap 3
6.14.2. 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>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.48 Contenidos en las imágenes en miniatura en Bootstrap 3