TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Widgets Bootstrap gratuits pour votre site

91

Bootstrap est un framework frontal permettant de créer des sites Web adaptés aux mobiles sans tracas. La majeure partie de Bootstrap est gérée via CSS, tandis que certains plugins nécessitent également JavaScript. Lorsque vous utilisez le framework sur votre site, il est facile d’insérer des composants intégrés individuels tels que des boutons, des carrousels, des badges, des alertes, etc. Cependant, vous pouvez également créer des widgets Bootstrap personnalisés en modifiant le code. Voici une collection de certains des widgets Bootstrap gratuits les plus populaires pour votre site Web.

  • Ce sont des widgets personnalisés créés avec les frameworks Bootstrap 4 et 5.
  • Vous pouvez copier et coller ces widgets sur votre site ou les tester avec le modèle de démarrage.
  • Nous avons expliqué chaque widget avec du code et une démo afin que vous puissiez simplement copier et coller.
  • Vous pouvez personnaliser davantage le widget avec votre propre code.

Afin d’expliquer l’utilisation du widget en tant que composant indépendant, nous avons montré comment utiliser certains des widgets du site Weebly. Bien que Weebly soit une plate-forme HTML et CSS simple, vous devrez peut-être ajuster certains paramètres à utiliser sur votre site Web. Le meilleur exemple est la propriété box-sizing dans CSS, vous devrez peut-être la changer en content-box ou border-box pour des éléments spécifiques sur le widget si vous remarquez des problèmes de remplissage.

1 widget de carte asymétrique Bootstrap

Le premier widget de la liste est une simple carte qui s’affichera dans un format asymétrique. Cela aura fière allure sur votre site en utilisant le composant de carte par défaut et une personnalisation minimale du CSS. Vous trouverez ci-dessous quelques exemples de cartes asymétriques.

Widgets Bootstrap gratuits pour votre site

Carte asymétrique avec texte brut

Widgets Bootstrap gratuits pour votre site

+8 degrés dans l’axe X

Widgets Bootstrap gratuits pour votre site

Carte asymétrique avec -8 degrés dans l’axe X

2 Widget de carte de profil utilisateur

Le widget suivant est un widget de profil utilisateur coloré. Vous pouvez personnaliser la photo de profil, les liens sociaux et la brève description selon vos besoins. C’est un bon moyen de mettre en valeur les utilisateurs de votre site.

Widgets Bootstrap gratuits pour votre site

Carte utilisateur avec photo de profil gauche

Widgets Bootstrap gratuits pour votre site

Carte de profil utilisateur Bootstrap

3 Widget Carte Flip

Flip card est un moyen utile d’afficher le contenu du texte derrière une image. Les utilisateurs peuvent survoler l’image pour lire le texte. Vous pouvez insérer une seule carte ou plusieurs cartes flip pour en faire une galerie. Le widget vous montrera comment retourner le composant de la carte dans Bootstrap dans le sens horizontal et vertical.

Widgets Bootstrap gratuits pour votre site

Widget de retournement de carte horizontal Bootstrap

Widgets Bootstrap gratuits pour votre site

Widget de retournement de carte vertical Bootstrap

4 membre de l’équipe Bootstrap avec fond de parallaxe

Si vous dirigez une agence ou une entreprise, il est logique de présenter tous les membres de votre équipe sur votre site Web. Heureusement, vous n’avez pas besoin de passer trop de temps et voici un widget de membre d’équipe copier-coller pour vous. Le widget aura fière allure avec un fond de parallaxe et des icônes sociales.

Widgets Bootstrap gratuits pour votre site

Widget de membre de l’équipe Bootstrap avec arrière-plan de parallaxe

5 Tableau de tarification CSS avec Bootstrap

De nombreux utilisateurs ajoutent un tableau de prix sur leur site à l’aide de JavaScript personnalisé. Bien que JavaScript fonctionne bien à cette fin, vous pouvez utiliser un CSS complet pour créer de beaux tableaux de prix avec Bootstrap. Voici à quoi ressembleront les tableaux et vous pouvez personnaliser le contenu et le nombre de colonnes selon vos besoins.

Widgets Bootstrap gratuits pour votre site

Widget du tableau de tarification CSS

6 Curseur de témoignage

Si vous avez beaucoup de témoignages d’utilisateurs, voici un widget slider pour vous. Présentez tous les commentaires de vos clients dans un curseur à rotation automatique avec du contenu image et texte.

Widgets Bootstrap gratuits pour votre site

Curseur de témoignage à deux colonnes égales

7 citations de bloc Bootstrap

Les guillemets en bloc sont utiles pour mettre en valeur le contenu des citations, citations et références. Bootstrap n’a pas de composant de devis par défaut. Cependant, vous pouvez facilement créer différents styles de guillemets en bloc en personnalisant légèrement le code CSS.

Widgets Bootstrap gratuits pour votre site

Styles de citation de bloc d’amorçage

8 CSS Parallaxe Page

Vous pouvez créer un effet de parallaxe avec un CSS complet sans aucun JavaScript. Le composant jumbotron est l’un des moins connus et vous pouvez utiliser un jumbotron personnalisé pour créer des pages de parallaxe pleine largeur.

Widgets Bootstrap gratuits pour votre site

Page Bootstrap Parallax avec Jumbotron

9 Widget de curseur d’accordéon

Bootstrap 5 a introduit un composant accordéon séparé que vous pouvez créer à l’aide de l’effondrement avec les versions précédentes. Voici un widget curseur accordéon que vous pouvez utiliser pour insérer des éléments dans un style accordéon élégant.

Widgets Bootstrap gratuits pour votre site

Curseur de contenu d’accordéon Bootstrap

10 Widget de chronologie verticale Bootstrap

La chronologie verticale est le moyen de présenter des événements qui se sont produits dans une séquence. Vous pouvez également utiliser cette chronologie pour afficher les futurs lancements de produits ou d’événements. Voici à quoi ressemblera le widget de chronologie verticale :

Widgets Bootstrap gratuits pour votre site

11 Table de données avancées avec Bootstrap

Bootstrap a un composant intégré pour insérer de nombreuses variétés de tableaux sur votre site. Cependant, vous avez besoin d’un tableau de données avancé pour disposer de fonctionnalités telles que le tri, la recherche et le filtrage. C’est super utile lorsque vous avez un contenu volumineux et que vous souhaitez le présenter dans un tableau.

Widgets Bootstrap gratuits pour votre site

Tableau de données avancé

Sommaire

Nous espérons que les widgets ci-dessus seront utiles pour votre site Web et vous feront gagner du temps. Les possibilités sont illimitées avec Bootstrap 5 et vous pouvez créer de nouveaux widgets ou personnaliser les composants existants selon vos besoins.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails