¿Cómo crear un widget de tarjeta de perfil de usuario con Bootstrap?

Nombre de usuario

Acerca de mí...

• Seguidores 120
• Siguiendo 80
• Publicaciones 35

- Añadir un encabezado `

` para el nombre del usuario y un párrafo `

` para la biografía del usuario o una breve descripción.

- Crear un `

` con elementos de lista `
• ` para mostrar información sobre seguidores, seguidores y publicaciones usando las clases `.list-group` de Bootstrap.

  2. Estilo CSS:

  Agregue sus estilos CSS personalizados para que la tarjeta se vea visualmente atractiva. Por ejemplo:

  ```css

  .tarjeta-perfil-usuario {

  ancho máximo:300px;

  margen:automático;

  }

  .card-img-arriba {

  ancho:100%;

  altura:200 píxeles;

  ajuste de objeto:cubierta;

  }

  .cuerpo de la tarjeta {

  relleno:15px;

  }

  .título de la tarjeta {

  peso de fuente:negrita;

  margen inferior:10px;

  }

  .texto-tarjeta {

  margen inferior:20px;

  }

  .lista-elemento-grupo {

  color del borde:#ddd;

  }

  ```

  - Ajuste el tamaño de la tarjeta y la imagen según sus necesidades.

  - Utilice tipografía y pesos de fuente adecuados para el título y el texto de la tarjeta.

  - Diseñe los elementos del grupo de listas y aplique bordes personalizados según sea necesario.

  3. Funcionalidad de JavaScript:

  Si desea agregar funciones adicionales, como la capacidad de seguir al usuario o ver más detalles, puede utilizar JavaScript. Por ejemplo, agregar un botón de seguimiento que cambie al hacer clic se puede hacer así:

  ```javascript

  // Obtener el elemento del botón de seguimiento

  const followButton =document.querySelector('.follow-button');

  // Agregar detector de eventos para hacer clic

  followButton.addEventListener('hacer clic', () => {

  // Alternar el texto y el estilo del botón al hacer clic

  if (followButton.innerText ==='Seguir') {

  followButton.innerText ='Siguiendo';

  followButton.classList.remove('btn-esquema-primario');

  followButton.classList.add('btn-primario');

  } demás {

  followButton.innerText ='Seguir';

  followButton.classList.add('btn-esquema-primario');

  followButton.classList.remove('btn-primario');

  }

  });

  ```

  - Incluya la biblioteca JavaScript necesaria (por ejemplo, jQuery) si es necesario.

  - Agregar código JavaScript para manejar las interacciones del usuario.

  - Actualizar la información del usuario o los estilos usando JavaScript en función de las acciones del usuario.

  Recuerde reemplazar el contenido del marcador de posición con datos de usuario reales que recupere de su base de datos o sistema de gestión de perfiles de usuario.