Ejercicio de imágenes responsive con Bootstrap 5.3

Ejercicio de programación: Reto Imágenes responsive

Este ejercicio de programación está diseñado para poner a prueba tus conocimientos en Bootstrap. Es un ejercicio de nivel intermedio que requiere conocimientos sólidos de la tecnología.

Tipo: Ejercicio de código 5 minutos estimados 200 puntos de experiencia

Información adicional del ejercicio

Crear una galería de imágenes usando las clases de Bootstrap para imágenes responsive, figuras con caption, thumbnails y diferentes formas.

Contenido del ejercicio

Crea una página HTML que contenga una galería de imágenes utilizando las clases de Bootstrap para imágenes responsive. Tu página debe incluir:

Una imagen responsive: Usa la clase .img-fluid para que la imagen se adapte al contenedor.
Una imagen thumbnail: Aplica la clase .img-thumbnail para crear una miniatura con borde.
Una figura con caption: Utiliza el elemento <figure> con las clases .figure, .figure-img en la imagen, y .figure-caption para el pie de foto.
Una imagen con forma redondeada: Usa la clase .rounded junto con .img-fluid.
Una imagen centrada: Combina las clases .mx-auto y .d-block para centrar una imagen.

Instrucciones para empezar:

Crea la estructura HTML básica con Bootstrap 5.3
Usa imágenes de placeholder como https://via.placeholder.com/300x200 con diferentes tamaños
Cada imagen debe tener su atributo alt descriptivo
Organiza las imágenes en contenedores <div> separados para mejor visualización
El caption de la figura debe describir brevemente la imagen

Estructura sugerida:

Un contenedor principal con la clase .container
Cada tipo de imagen en su propio <div> con margen inferior
Títulos <h3> para identificar cada tipo de imagen

Lección relacionada

Este ejercicio está relacionado con la lección "Imágenes responsive en Bootstrap" de Bootstrap. Te recomendamos revisar la lección antes de comenzar.

Ver lección relacionada

Más ejercicios de Bootstrap

Explora más ejercicios de programación en Bootstrap para mejorar tus habilidades y obtener tu certificación.

Ver más ejercicios de Bootstrap

Solución al ejercicio de programación en Bootstrap

Contenido bloqueado

¡Desbloquea la solución completa!

Completa el ejercicio de programación en Bootstrap para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.

solution.js

JavaScript

1 function solveChallenge ( input ) {

2 // Algoritmo optimizado O(n log n)

3 const data = parseInput ( input );

4 const sorted = data . sort (( a , b ) => a - b );

6 // Aplicar técnica de dos punteros

7 let left = 0 , right = sorted . length - 1 ;

8 const result = [];

10 while ( left < right ) {

11 const sum = sorted [ left ] + sorted [ right ];

12 if ( sum === target ) {

13 result . push ([ sorted [ left ], sorted [ right ]]);

14 left ++; right --;

15 } else if ( sum < target ) {

16 left ++;

17 } else {

18 right --;

19 }

20 }

22 return result ;

23 }

Código completo

Explicaciones

Mejores prácticas

+1.200 developers han resuelto este ejercicio de programación

Practica con ejercicios de programación en Bootstrap

Mejora tus habilidades con cientos de ejercicios de práctica, recibe retroalimentación instantánea y obtén tu certificación cuando estés listo.

Asistente de IA

Aprende de tus errores

Progreso

Mide tu avance

Certificación

Valida tus habilidades

Comenzar a programar

Únete a miles de desarrolladores mejorando sus habilidades en Bootstrap

⭐⭐⭐⭐⭐

4.9/5 valoración