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

Widgets Bootstrap gratuitos para su sitio

16

Bootstrap es un marco de interfaz para crear sitios web optimizados para dispositivos móviles sin problemas. La mayor parte de Bootstrap se maneja a través de CSS, mientras que también hay algunos complementos que necesitan JavaScript. Cuando usa el marco en su sitio, es fácil insertar componentes individuales integrados como botones, carruseles, insignias, alertas, etc. Sin embargo, también puede crear widgets Bootstrap personalizados modificando el código. Aquí hay una colección de algunos de los widgets Bootstrap gratuitos más populares para su sitio web.

  • Estos son widgets personalizados hechos con el marco Bootstrap 4 y 5.
  • Puede copiar y pegar estos widgets en su sitio o probarlos junto con la plantilla de inicio.
  • Hemos explicado cada widget con código y demostración para que pueda simplemente copiar y pegar.
  • Puede personalizar aún más el widget con su propio código.

Para explicar el uso del widget como un componente independiente, hemos mostrado cómo utilizar algunos de los widgets en el sitio Weebly. Aunque Weebly es una plataforma HTML y CSS simple, es posible que deba ajustar algunos parámetros para usar en su sitio web. El mejor ejemplo es la propiedad de tamaño de caja en CSS, es posible que deba cambiar esto a content-box o border-box para elementos específicos en el widget si nota problemas de relleno.

1 widget de tarjeta inclinada Bootstrap

El primer widget de la lista es una tarjeta simple que se mostrará en un formato sesgado. Esto se verá elegantemente en su sitio utilizando el componente de tarjeta predeterminado y una personalización mínima del CSS. A continuación se muestran algunos de los ejemplos de la tarjeta torcida.

Widgets Bootstrap gratuitos para su sitio

Tarjeta inclinada con texto sin formato

Widgets Bootstrap gratuitos para su sitio

+8 grados en el eje X

Widgets Bootstrap gratuitos para su sitio

Tarjeta inclinada con -8 grados en el eje X

2 Widget de tarjeta de perfil de usuario

El siguiente widget es un colorido widget de perfil de usuario. Puede personalizar la imagen de perfil, los enlaces sociales y la descripción breve según sus necesidades. Es una buena forma de mostrar a los usuarios de su sitio.

Widgets Bootstrap gratuitos para su sitio

Tarjeta de usuario con imagen de perfil izquierda

Widgets Bootstrap gratuitos para su sitio

Tarjeta de perfil de usuario de Bootstrap

Widget de 3 tarjetas giratorias

La tarjeta invertida es una forma útil de mostrar contenido de texto detrás de una imagen. Los usuarios pueden colocar el cursor sobre la imagen para leer el texto. Puede insertar una sola tarjeta o varias tarjetas invertidas para que sea como una galería. El widget le mostrará cómo voltear el componente de la tarjeta en Bootstrap en dirección horizontal y vertical.

Widgets Bootstrap gratuitos para su sitio

Widget de volteo de tarjeta horizontal Bootstrap

Widgets Bootstrap gratuitos para su sitio

Widget de volteo de tarjeta vertical Bootstrap

4 Miembro del equipo Bootstrap con experiencia en Parallax

Si tiene una agencia o una empresa, tiene sentido mostrar a todos los miembros de su equipo en su sitio web. Afortunadamente, no necesita dedicar demasiado tiempo y aquí hay un widget de miembro del equipo de copiar y pegar para usted. El widget se verá muy bien con un fondo de paralaje e íconos sociales.

Widgets Bootstrap gratuitos para su sitio

Widget de miembro del equipo Bootstrap con fondo de Parallax

5 Tabla de precios de CSS con Bootstrap

Muchos usuarios agregan una tabla de precios en su sitio usando JavaScript personalizado. Aunque JavaScript funciona bien para este propósito, puede usar CSS completo para crear hermosas tablas de precios con Bootstrap. A continuación se muestra cómo se verán las tablas y puede personalizar el contenido y la cantidad de columnas según sus necesidades.

Widgets Bootstrap gratuitos para su sitio

Widget de tabla de precios de CSS

6 Control deslizante de testimonios

Si tiene muchos testimonios de usuarios, aquí hay un widget de control deslizante para usted. Muestre todos los comentarios de sus clientes en un control deslizante que gira automáticamente con imágenes y contenido de texto.

Widgets Bootstrap gratuitos para su sitio

Control deslizante de testimonios de dos columnas iguales

7 citas de Bootstrap Block

Las citas en bloque son útiles para mostrar contenido de citas, citas y referencias. Bootstrap no tiene un componente de cotización por defecto. Sin embargo, puede crear fácilmente diferentes estilos de comillas en bloque haciendo una pequeña personalización del código CSS.

Widgets Bootstrap gratuitos para su sitio

Estilos Bootstrap Blockquote

8 Página CSS Parallax

Puede crear un efecto de paralaje con CSS completo sin JavaScript. El componente jumbotron es uno de los menos conocidos y puede usar jumbotron personalizado para crear páginas de paralaje de ancho completo.

Widgets Bootstrap gratuitos para su sitio

Bootstrap Parallax Page con Jumbotron

9 Widget de control deslizante de acordeón

Bootstrap 5 introdujo un componente de acordeón separado que puede crear usando collapse con versiones anteriores. Aquí hay un widget de control deslizante de acordeón que puede usar para insertar cualquier elemento en un elegante estilo de acordeón.

Widgets Bootstrap gratuitos para su sitio

Control deslizante de contenido de acordeón Bootstrap

10 Widget de línea de tiempo vertical Bootstrap

La línea de tiempo vertical es la forma de mostrar eventos que ocurrieron en una secuencia. También puede utilizar esta línea de tiempo para mostrar futuros lanzamientos de productos o eventos. A continuación se muestra cómo se verá el widget de línea de tiempo vertical:

Widgets Bootstrap gratuitos para su sitio

11 Tabla de datos avanzada con Bootstrap

Bootstrap tiene un componente incorporado para insertar muchas variedades de tablas en su sitio. Sin embargo, necesita una tabla de datos avanzada para tener funciones como ordenar, buscar y filtrar. Esto es muy útil cuando tienes un gran contenido y quieres exhibirlo en una mesa.

Widgets Bootstrap gratuitos para su sitio

Tabla de datos avanzados

Resumen

Esperamos que los widgets anteriores sean útiles para su sitio web y le ahorren tiempo. Las posibilidades son ilimitadas con Bootstrap 5 y puede crear nuevos widgets o personalizar los componentes existentes según sus necesidades.

Fuente de grabación: 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