Bootstrap - Miniaturas

Este capítulo trata sobre las miniaturas de Bootstrap. Muchos sitios necesitan una forma de diseñar imágenes, videos, texto, etc., en una cuadrícula, y Bootstrap tiene una manera fácil de hacerlo con miniaturas. Para crear miniaturas usando Bootstrap:

• Agregue una etiqueta <a> con la clase de .thumbnail alrededor de una imagen.

• Esto agrega cuatro píxeles de relleno y un borde gris.

• Al pasar el mouse, un brillo animado delinea la imagen.

El siguiente ejemplo muestra una miniatura predeterminada:

<div class = "row">
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
</div>

Agregar contenido personalizado

Ahora que tenemos una miniatura básica, es posible agregar cualquier tipo de contenido HTML como encabezados, párrafos o botones en las miniaturas. Siga los pasos a continuación:

• Cambie la etiqueta <a> que tiene una clase de .thumbnail a un <div>.

• Dentro de ese <div>, puede agregar cualquier cosa que necesite. Como se trata de un <div>, podemos usar la convención de nomenclatura predeterminada basada en el intervalo para el tamaño.

• Si desea agrupar varias imágenes, colóquelas en una lista desordenada y cada elemento de la lista flotará hacia la izquierda.

El siguiente ejemplo demuestra esto:

<div class = "row">
   <div class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
      
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</p>
         
         <p>
            <a href = "#" class = "btn btn-primary" role = "button">
               Button
            </a> 
            
            <a href = "#" class = "btn btn-default" role = "button">
               Button
            </a>
         </p>
      </div>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
      
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</p>
         
         <p>
            <a href = "#" class = "btn btn-primary" role = "button">
               Button
            </a> 
            
            <a href = "#" class = "btn btn-default" role = "button">
               Button
            </a>
         </p>
      </div>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
      
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</p>
         
         <p>
            <a href = "#" class = "btn btn-primary" role = "button">
               Button
            </a> 
            
            <a href = "#" class = "btn btn-default" role =" button">
               Button
            </a>
         </p>
      </div>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
      
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</p>
         
         <p>
            <a href = "#" class = "btn btn-primary" role = "button">
               Button
            </a> 
            
            <a href = "#" class = "btn btn-default" role = "button">
               Button
            </a>
         </p>
      </div>
   </div>
</div>