BOOTSTRAP COMPONENTES - MINIATURAS

En esta sesión mostramos el componente "thumbnails" para dar estilo a miniaturas de imágenes.

Cargando video...

NOTA: Solo puedes ver una versión limitada del video a baja resolución, si quieres ver la versión completa por favor regístrate y obtén alguno de nuestros planes!

Descripción del Vídeo

La clase "thumbnail" de Bootstrap se diseñó para colocar miniaturas de imágenes en un marco con espaciado apropiado.

Puede utilizarse, sin embargo, no sólo para imágenes sino también incluir otros tipos de contenido.

Comúnmente se utiliza en conjunción con una cuadrícula (grid)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Las 3 etiquetas anteriores deben ir en primer lugar en el bloque head -->
<title>Miniaturas en Bootstrap</title>
<!-- CSS Bootstrap -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- HTML5 shim y Respond.js se agregan para mejorar soporte a IE8 -->
<!-- NOTA: Respond.js no funciona si se ve la página localmente con file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- podemos usar la clase "container" (ancho fijo) o "container-fluid" (ancho completo) -->
<div class="container">
<h1>Miniaturas en cuadrícula (clase "thumbnail")</h1>
<!-- usamos una cuadrícula sensible al dispositivo (dos columnas en dispositivos pequeños
y 4 columnas en dispositivos de tamaño medio o superior -->
<div class="row">
<div class="col-xs-6 col-md-3">
<!-- Típicamente, el destino (href) del enlace, sería una versión en mayor resolución
de la imagen -->
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x240" alt="Miniatura">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x240" alt="Miniatura">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x240" alt="Miniatura">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x240" alt="Miniatura">
</a>
</div>
</div>
<h1>Miniaturas con contenido personalizado (clases "thumbnail", "caption")</h1>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/480x320" alt="Miniatura">
<div class="caption">
<h3>Etiqueta de Imagen</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
<a href="#" class="btn btn-primary" role="button">Comprar</a>
<a href="#" class="btn btn-default" role="button">Ver</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/480x320" alt="Miniatura">
<div class="caption">
<h3>Etiqueta de Imagen</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
<a href="#" class="btn btn-primary" role="button">Comprar</a>
<a href="#" class="btn btn-default" role="button">Ver</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/480x320" alt="Miniatura">
<div class="caption">
<h3>Etiqueta de Imagen</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
<a href="#" class="btn btn-primary" role="button">Comprar</a>
<a href="#" class="btn btn-default" role="button">Ver</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necesario para utilizar plugins JS de Bootstrap) -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Acá utilizamos la versión precompilada y optimizada,
pero pueden incluirse otras versiones o componentes individuales -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Rating

Global

Ver video en playlist

comments powered by Disqus

Headshot of Juan Paredes

Juan Paredes

Ingeniero de Sistemas con amplia experiencia, especializado en el desarrollo y arquitectura de software.