Bootstrap - Démo de Tarification
Qu'est-ce que la Tarification ?
Avant de plonger dans la création d'une démo de tarification utilisant Bootstrap, penchons-nous un moment pour comprendre ce que signifie réellement la tarification dans le contexte du design web et des affaires.
La tarification est un élément crucial de toute offre de produit ou service. C'est la manière dont les entreprises communiquent la valeur de leurs offres aux clients potentiels. Dans le design web, une section ou une page de tarification est l'endroit où vous présentez différents plans ouforfaits, généralement de manière claire et comparative.
Pensez-y comme un menu dans un restaurant. Vous voulez que les clients puissent voir facilement ce qui est disponible et à quel prix, afin qu'ils puissent prendre une décision éclairée. C'est exactement ce que nous allons créer avec Bootstrap !
Pourquoi utiliser Bootstrap pour la Tarification ?
Bootstrap est un framework front-end puissant qui rend la création de sites web responsifs et professionnels un jeu d'enfant. Il est particulièrement utile pour les sections de tarification car :
- Il propose des composants pré-conçus parfaits pour afficher les informations de tarification.
- Il est responsive dès le départ, ce qui signifie que votre section de tarification aura l'air grande sur tous les appareils.
- Il est personnalisable, vous permettant de correspondre à l'apparence de votre marque.
Maintenant, mettons nos manches à l'eau et commençons à construire notre démo de tarification !
Configuration de l'Environnement Bootstrap
Premierement, nous devons configurer notre environnement Bootstrap. Ne vous inquiétez pas si cela semble compliqué - c'est en fait quite simple !
Créez un nouveau fichier HTML et copiez le code suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Démo de Tarification Bootstrap</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Votre contenu ira ici -->
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Cela met en place une structure HTML de base et inclut les fichiers CSS et JavaScript de Bootstrap à partir d'un CDN (Réseau de Distribution de Contenu). C'est comme poser les fondations de notre maison - maintenant, nous sommes prêts à commencer à construire !
Création de la Section de Tarification
Maintenant, créons notre section de tarification. Nous allons utiliser le composant de carte de Bootstrap pour créer trois niveaux de tarification : Basic, Pro et Entreprise.
Ajoutez le code suivant à l'intérieur des balises <body> :
<div class="container py-5">
<h1 class="text-center mb-5">Nos Plans de Tarification</h1>
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">Basic</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">0€<small class="text-muted fw-light">/mois</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>10 utilisateurs inclus</li>
<li>2 Go de stockage</li>
<li>Support par email</li>
<li>Accès au centre d'aide</li>
</ul>
<button type="button" class="w-100 btn btn-lg btn-outline-primary">Inscrivez-vous gratuitement</button>
</div>
</div>
</div>
<!-- Répétez cette structure pour les plans Pro et Entreprise -->
</div>
</div>Décomposons cela :
- Nous utilisons un conteneur pour centrer notre contenu et ajouter un peu de padding.
- Les classes
rowetcolcréent un système de grille responsive. - Chaque niveau de tarification est représenté par un composant
card. - Nous utilisons des classes utilitaires de Bootstrap comme
text-center,mb-4, etc., pour styler nos éléments sans écrire de CSS personnalisé.
Personnalisation de l'Apparence
Bootstrap est génial tel quel, mais ajoutons quelques touches personnalisées pour faire ressortir notre démo de tarification !
Ajoutez cette balise <style> dans la section <head> :
<style>
.pricing-card-title {
font-size: 2.5rem;
}
.card-header {
background-color: #f8f9fa;
}
.btn-outline-primary:hover {
background-color: #007bff;
color: white;
}
</style>Ce CSS personnalisé va :
- Augmenter la taille du prix
- Donner à l'en-tête de la carte un arrière-plan clair
- Changer la couleur du bouton lors du survol
Ajout d'Interactivité
Ajoutons un peu d'interactivité à notre démo de tarification. Nous allons faire ressortir le plan "Pro" lorsque le curseur le survole.
Ajoutez ce JavaScript à la fin de votre balise <body> :
<script>
document.addEventListener('DOMContentLoaded', function() {
const proCard = document.querySelectorAll('.card')[1];
proCard.addEventListener('mouseover', function() {
this.style.transform = 'scale(1.05)';
this.style.transition = 'transform 0.3s ease';
});
proCard.addEventListener('mouseout', function() {
this.style.transform = 'scale(1)';
});
});
</script>Ce script va légèrement agrandir la carte "Pro" lorsque le curseur le survole, créant un effet subtil mais engageant.
Design Réactif
L'une des meilleures choses à propos de Bootstrap est sa réactivité intégrée. Notre démo de tarification s'ajustera automatiquement pour avoir l'air génial sur toutes les tailles d'écran. Cependant, nous pouvons améliorer cela davantage.
Ajoutez ces classes à votre div row :
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center g-4">La classe g-4 ajoute des gutters entre nos colonnes, et row-cols-1 row-cols-md-3 garantit que sur les petits écrans, nos cartes s'empilent verticalement, tandis que sur les écrans medium et plus grands, elles s'affichent en trois colonnes.
Conclusion
Félicitations ! Vous venez de créer une démo de tarification professionnelle utilisant Bootstrap. Reprenons ce que nous avons appris :
- Nous avons configuré un environnement Bootstrap.
- Nous avons créé une section de tarification responsive en utilisant les composants de grille et de carte de Bootstrap.
- Nous avons personnalisé l'apparence avec un peu de CSS simple.
- Nous avons ajouté de l'interactivité avec JavaScript.
- Nous nous sommes assurés que notre design est réactif et looks génial sur tous les appareils.
N'oubliez pas, la pratique rend parfait. Essayez de modifier cette démo - changez les couleurs, ajoutez plus de niveaux, ou incluez différentes fonctionnalités. Plus vous jouerez avec Bootstrap, plus vous deviendrez à l'aise avec ses fonctionnalités puissantes.
Bonne programmation, et que vos démos de tarification convertissent toujours !
| Méthode | Description |
|---|---|
| Configuration de Bootstrap | Inclure les fichiers CSS et JS de Bootstrap dans votre HTML |
| Création de Cartes de Tarification | Utiliser le composant de carte de Bootstrap pour afficher les niveaux de tarification |
| Grille Réactive | Utiliser le système de grille de Bootstrap pour un layout responsive |
| Styling Personnalisé | Ajouter du CSS personnalisé pour améliorer les styles par défaut de Bootstrap |
| Interactivité | Utiliser JavaScript pour ajouter des effets de survol et des animations |
| Design Réactif | Assurer que le layout s'ajuste pour différentes tailles d'écran |
Credits: Image by storyset