Tutorial #16 del curso de BootStrap v3.2, en este tutorial realizaremos un ejemplo práctico de una tienda online donde utilizaremos el componente thumbnail que nos permite crear vistas miniatura de una imágen, permitiendonos agregar contenido, puede ser muy util su utilización en galería de imágenes y tiendas online, adicional a este componente veremos también la utilización de algunos componentes secundarios como ser jumbotron, labels, badge.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>thumbnails</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> </head> <body> <div class="container"> <div class="jumbotron"> <h1>Tienda Online</h1> <p>Por Halloween descuento del 40% en disfraces</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Ver más</a></p> </div> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="img/a.jpg" alt="..." class="img-responsive"> <div class="caption"> <h3>Título producto 1</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">Detalles</a> <a href="#" class="btn btn-default" role="button"><span class="glyphicon glyphicon-shopping-cart"></span> Agregar</a></p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="img/b.jpg" alt="..." class="img-responsive"> <div class="caption"> <h3>Título producto 2 <span class="label label-danger">Sin stock</span></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">Detalles</a> <a href="#" class="btn btn-default" role="button"><span class="glyphicon glyphicon-shopping-cart"></span> Agregar</a></p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="img/c.jpg" alt="..." class="img-responsive"> <div class="caption"> <h3>Título producto 3</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">Detalles</a> <a href="#" class="btn btn-default" role="button"><span class="glyphicon glyphicon-shopping-cart"></span> Agregar</a></p> </div> </div> </div> <div class="col-sm-6 col-md-8"> <div class="thumbnail"> <span class="badge">5.99 USD</span> <img src="img/d.jpg" alt="..." class="img-responsive"> <div class="caption"> <h3>Título producto 4 <span class="label label-info">En rebaja</span></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">Detalles</a> <a href="#" class="btn btn-default" role="button"><span class="glyphicon glyphicon-shopping-cart"></span> Agregar</a></p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <span class="badge">39.99 USD</span> <img src="img/e.jpg" alt="..." class="img-responsive"> <div class="caption"> <h3>Título producto 5 <span class="label label-success">Nuevo</span></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">Detalles</a> <a href="#" class="btn btn-default" role="button"><span class="glyphicon glyphicon-shopping-cart"></span> Agregar</a></p> </div> </div> </div> </div> </div> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/bootstrap.js"></script> </body> </html>