Ver índice de contenidos del libro

6.14. Imágenes en miniatura

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:

Imágenes en miniatura en Bootstrap 3

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:

Contenidos en las imágenes en miniatura en Bootstrap 3

Figura 6.48 Contenidos en las imágenes en miniatura en Bootstrap 3