Bootstrap ayuda a los desarrolladores web a crear miniaturas que se utilizan para mostrar imágenes vinculadas en cuadrículas con las clases predefinidas que ayudan a reducir la longitud de los códigos. Las miniaturas se crean para proporcionar una vista previa rápida de las imágenes con imágenes pequeñas.
Imagen en miniatura: una miniatura es una imagen pequeña que representa una imagen más grande. Bootstrap tiene una manera fácil de hacer esto con miniaturas. La clase .thumbnail de Bootstrap se usa para mostrar imágenes vinculadas en cuadrículas ( sistema de cuadrícula ), se crea una miniatura usando la clase .thumbnail dentro del elemento <a> . La clase .col-sm-* y .col-md-* (donde * representa el número), se utiliza para crear cuadrículas de las imágenes.
Guía paso a paso para la implementación:
Paso 1: Incluya Bootstrap y jQuery CDN en la etiqueta <head> antes que todas las demás hojas de estilo para cargar nuestro CSS.
<enlace rel=”hoja de estilo” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ ajax/libs/jquery/1.12.0/jquery.min.js”></script>
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js” ></guión>
Paso 2: agregue la etiqueta <div> en el cuerpo HTML con la fila de clase. En ese <div> crea cuatro secciones div para crear cuatro imágenes.
Paso 3: agregue «col-sm-6» y «col-md-3» a cuatro secciones div que crean una página web receptiva.
Paso 4: agregue la etiqueta <a> con la miniatura de valor de clase para definir el enlace de la imagen en la siguiente línea.
<a href="#" class="thumbnail">
Ejemplo 1: El siguiente ejemplo muestra la creación de imágenes en miniatura.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Thumbnail images</title> <link rel="stylesheet" href= "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script> <script src= "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script> </head> <body> <h3 style="color: green">Bootstrap thumbnails</h3> <div class="row"> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210310114057/web-development-image.png" style="height: 100px; width: 100px" /> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/machineLearning3.png" style="height: 100px; width: 100px" /> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210202223017/Competitive-Programming-%E2%80%93-A-Complete-Guide.png" style="height: 100px; width: 100px" /> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src= "https://www.geeksforgeeks.org/wp-content/uploads/Java-768x256.png" style="height: 100px; width: 100px" /> </a> </div> </div> </body> </html>
Salida: como en la imagen de salida a continuación, podemos ver imágenes en miniatura. Estos también responden a diferentes tamaños de pantalla.
miniaturas sensibles
Agregar subtítulos y botones a las miniaturas:
Paso 1: creamos div con valor de clase como miniatura e imagen insertada, luego agregamos div con clase .caption para definir la descripción de las imágenes <p>.
Paso 2: Crea botones usando la etiqueta <a> con clase . btn .btn-éxito .
Ejemplo: El siguiente ejemplo muestra cómo agregar un título y un botón a las miniaturas.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script> <script src= "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script> </head> <body> <h3 style="color: green"> <b>Bootstrap Thumbnails with Captions and Button</b> </h3> <div class="row"> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210310114057/web-development-image.png" style="height: 100px; width: 100px" /> </a> <div class="caption"> <h3 style="color: green">GfG Web-Development</h3> <p> Web development refers to the building, creating, maintaining of websites. </p> <p> <a href="#" class="btn btn-success"> Learn More </a> </p> </div> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/machineLearning3.png" style="height: 100px; width: 100px" /> </a> <div class="caption"> <h3 style="color: green">GfG Machine Learning</h3> <p> Machine Learning is the study to learn without being explicitly programmed. </p> <p> <a href="#" class="btn btn-success"> Learn More </a> </p> </div> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210202223017/Competitive-Programming-%E2%80%93-A-Complete-Guide.png" style="height: 100px; width: 100px" /> </a> <div class="caption"> <h3 style="color: green">GfG Programming</h3> <p> Competitive Programming enables you to code a given problem under provided constraints. </p> <p> <a href="#" class="btn btn-success"> Learn More </a> </p> </div> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src= "https://www.geeksforgeeks.org/wp-content/uploads/Java-768x256.png" style="height: 100px; width: 100px" /> </a> <div class="caption"> <h3 style="color: green">GfG Java</h3> <p> Java is one of the most popular and widely used programming language. </p> <p> <a href="#" class="btn btn-success"> Learn More </a> </p> </div> </div> </div> </body> </html>
Salida: como en la imagen de salida a continuación, podemos ver esas imágenes con subtítulos y botones. Estos también responden a diferentes tamaños de pantalla.
Navegador compatible:
- Google Chrome
- Firefox
- explorador de Internet
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por saksham894954 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA