TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

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

290

Bootstrap tiene componentes más potentes que la versión anterior 3. Sin duda , el componente de la tarjeta es uno de los más elegantes y amigables para dispositivos móviles, entre otros. Básicamente, puede mezclar y combinar las tarjetas para crear diferentes tipos de widgets. En este artículo, analicemos cómo crear un widget de tarjeta de perfil de usuario de Bootstrap. Usamos Bootstrap versión 4 y puede descargar todos los archivos necesarios para este widget aquí.

¿Cómo se ve?

A continuación se muestra cómo se verá el widget y puede personalizar los colores y el aspecto según sus necesidades con las propiedades de color de fondo predeterminadas.

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

El widget tiene las siguientes partes:

  • Nombre, perfil, habilidades y detalles de la plataforma
  • Foto de perfil
  • Tres detalles de perfil social (también puede usarlos para diferentes propósitos)

Creemos el widget

A continuación se muestra el código completo del widget.

<div class="container-fluid"> <div class="row"> <div class="col-12"> <div class="card card-inverse" style="background-color: #333; border-color: #333;"> <div class="card-block"> <div class="row"> <div class="col-md-8 col-sm-8"> <h2 class="card-title">Name: Stffanie Osterich</h2> <p class="card-text"><strong>Profile: </strong> Web Developer </p> <p class="card-text"><strong>Skills: </strong> Theme, plugin and website development </p> <p><strong>Platform: </strong> <span class="badge bg-primary">WordPress</span> <span class="badge bg-info">Weebly</span> <span class="badge bg-warning">Bootstrap</span> <span class="badge bg-success">Wix</span> </p> </div> <div class="col-md-4 col-sm-4 text-center"> <img class="btn-md" src="assets/images/card-image.png" alt="" style="border-radius:50%;"> </div> <div class="col-md-4 col-sm-4 text-center"> <h2><strong> 5.2K </strong></h2> <p><small>Fans</small></p> <button class="btn btn-primary btn-block btn-md"><span class="fa fa-facebook-square"></span> Like </button> </div> <div class="col-md-4 col-sm-4 text-center"> <h2><strong>1.4K</strong></h2> <p><small>Following</small></p> <button class="btn btn-success btn-block btn-md"><span class="fa fa-twitter-square"></span> Tweet </button> </div> <div class="col-md-4 col-sm-4 text-center"> <h2><strong>3.8K</strong></h2> <p><small>Followers</small></p> <button type="button" class="btn btn-danger btn-block btn-md"><span class="fa fa-google-plus-square"></span> Follow </button> </div> </div> </div> </div> </div> </div> </div>

Idealmente, las tres primeras etiquetas div con "container-fluid", "row" y "col-12" no son necesarias para un solo widget. Pero solíamos asegurarnos de que el widget se pueda insertar en cualquier lugar entre el diseño de Bootstrap con el márgenes.

La parte principal del widget es básicamente un componente de tarjeta con subsecciones. Hemos usado la tarjeta predeterminada con "tarjeta inversa" y usamos el estilo en línea para asignar colores de fondo y borde como # 333. A continuación, se muestra una sección de "bloque de tarjetas" con un elemento de "fila" dividido en cuadrículas como se muestra a continuación:

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

Básicamente hay 5 cuadrículas, una con las clases “col-md-8 col-sm-8" y las restantes con las clases “col-md-4 col-sm-4” para dividir el área. La sección superior tiene 8 + 4 cuadrículas y la sección social inferior tiene 4 + 4 + 4 cuadrículas.

Tenga en cuenta que hemos utilizado "md" y "sm" en las clases de la cuadrícula como "col-md-8" y "col-sm-8". Esto creará los puntos de interrupción en dispositivos medianos y pequeños para tener capacidad de respuesta.

Ahora el diseño básico está listo y el siguiente paso es agregar contenido y embellecerlo.

Sección superior

  • En la primera sección col-8, puede agregar "título de tarjeta" y "texto de tarjeta" como nombre y detalles de perfil. La sección de la plataforma utiliza el componente de insignia predeterminado para resaltar las etiquetas en diferentes colores.
  • La segunda sección col-4 tiene una imagen de foto de perfil con un tamaño de 128 × 128 píxeles.

Sección inferior

  • La sección inferior tiene tres secciones "col-4" con enlaces de perfil social y descripción.

CSS adicional

Debe incluir el enlace CDN de los iconos impresionantes de fuentes para mostrar los iconos en los botones. También hemos personalizado el elemento de botón usando CSS adicional:

<style> .btn{ border-radius: 0; } .btn-md { border-width: 0; outline: none; border-radius: 0; box-shadow: 2px 2px 2px rgba(0, 0, 0, .6); cursor: pointer; } </style>

La misma clase CSS se usa con la imagen de la imagen de perfil para tener un efecto de sombra y el estilo en línea “radio de borde: 50%” se usa en la imagen de perfil para cambiarla a forma de círculo.

Variaciones

Puede crear diferentes estilos de automóviles de perfil de usuario mezclando y combinando colores y diseño de cuadrícula. A continuación se muestran algunas de las posibilidades que se muestran, por ejemplo:

Tarjeta de perfil con imagen izquierda

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

Tarjeta de perfil de usuario con fondo blanco

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

Tarjeta de perfil con fondo principal (puede establecer colores de información, advertencia, peligro o éxito)

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

Tarjeta de usuario con dos columnas

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

Fuente de grabación: www.webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More