Français

Tutoriel Bootstrap

Mise en page Bootstrap

Contenu Bootstrap

Composants Bootstrap

Bootstrap Formulaires

Aides Bootstrap

Utilitaires Bootstrap

Demos Bootstrap

Bootstrap - Démonstration de Paiement

Aperçu

Bonjour, futurs développeurs web ! Aujourd'hui, nous allons entreprendre un voyage passionnant pour créer une page de paiement en utilisant Bootstrap. En tant que votre professeur d'informatique bienveillant du coin, je suis ravi de vous guider à travers ce processus. Ne vous inquiétez pas si vous êtes nouveau dans le codage - nous allons avancer pas à pas, et à la fin, vous aurez un formulaire de paiement professionnel dont vous pouvez être fier !

Bootstrap-Checkout Demo

Qu'est-ce que Bootstrap ?

Avant de plonger dedans, parlons de Bootstrap. Imaginez que vous construisez une maison. Plutôt que de créer chaque brique à partir de zéro, ne serait-il pas génial d'avoir des murs et des toits préfabriqués ? C'est ce que Bootstrap offre pour le développement web - une collection de composants et de styles préconstruits qui rendent la création de sites web magnifiques beaucoup plus facile et rapide.

Configuration de Notre Projet

Étape 1 : Inclure Bootstrap

Tout d'abord, nous devons inclure Bootstrap dans notre projet. C'est comme préparer notre boîte à outils avant de commencer le travail. Ajoutez ces lignes dans la balise <head> de votre fichier HTML :

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Ces lignes récupèrent les styles et les scripts de Bootstrap sur Internet, donc nous n'avons pas besoin de télécharger quoi que ce soit.

Étape 2 : Structure HTML de Base

Maintenant, mettons en place notre structure HTML de base :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Démonstration de Paiement</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Formulaire de Paiement</h1>
<!-- Notre formulaire ira ici -->
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Cela crée une page web de base avec un titre et un conteneur pour notre formulaire. La classe container est une classe Bootstrap qui centre notre contenu et lui ajoute un peu de padding.

Construction du Formulaire de Paiement

Étape 3 : Création du Formulaire

Maintenant, ajoutons notre formulaire à l'intérieur du conteneur :

<form>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">Prénom</label>
<input type="text" class="form-control" id="firstName" required>
</div>
<div class="col-md-6 mb-3">
<label for="lastName" class="form-label">Nom</label>
<input type="text" class="form-control" id="lastName" required>
</div>
</div>

<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]" required>
</div>

<div class="mb-3">
<label for="address" class="form-label">Adresse</label>
<input type="text" class="form-control" id="address" placeholder="1234 Rue Principale" required>
</div>

<button class="btn btn-primary btn-lg" type="submit">Passer la Commande</button>
</form>

Reprenons cela :

  1. Nous utilisons le système de grille de Bootstrap avec row et col-md-6 pour créer deux colonnes pour le prénom et le nom.
  2. La classe mb-3 ajoute une marge en bas de chaque groupe de formulaire.
  3. form-label et form-control sont des classes Bootstrap qui stylisent nos étiquettes et nos entrées.
  4. Les classes btn stylisent notre bouton de soumission.

Étape 4 : Ajout des Informations de Paiement

Ajoutons une section pour les informations de paiement :

<h4 class="mb-3">Paiement</h4>
<div class="my-3">
<div class="form-check">
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
<label class="form-check-label" for="credit">Carte de crédit</label>
</div>
<div class="form-check">
<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="debit">Carte de débit</label>
</div>
</div>
<div class="row gy-3">
<div class="col-md-6">
<label for="cc-name" class="form-label">Nom sur la carte</label>
<input type="text" class="form-control" id="cc-name" required>
</div>
<div class="col-md-6">
<label for="cc-number" class="form-label">Numéro de carte de crédit</label>
<input type="text" class="form-control" id="cc-number" required>
</div>
<div class="col-md-3">
<label for="cc-expiration" class="form-label">Expiration</label>
<input type="text" class="form-control" id="cc-expiration" required>
</div>
<div class="col-md-3">
<label for="cc-cvv" class="form-label">CVV</label>
<input type="text" class="form-control" id="cc-cvv" required>
</div>
</div>

Ici, nous avons ajouté des boutons radio pour la sélection du mode de paiement et des champs pour les détails de la carte. La classe gy-3 ajoute des gutters verticales entre les rangées.

Amélioration de l'Expérience Utilisateur

Étape 5 : Ajout de Feedback de Validation

Bootstrap fournit des classes pour les feedbacks de validation des formulaires. Ajoutons-en quelques-unes à notre entrée du prénom :

<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">Prénom</label>
<input type="text" class="form-control" id="firstName" required>
<div class="valid-feedback">
Ça a l'air bien !
</div>
<div class="invalid-feedback">
Veuillez entrer votre prénom.
</div>
</div>

Pour que cela fonctionne, nous devons ajouter un peu de JavaScript :

<script>
(function () {
'use strict'
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>

Ce script ajoute la classe was-validated au formulaire lors de la soumission, ce qui déclenche l'affichage des feedbacks de validation.

Conclusion

Félicitations ! Vous venez de créer un formulaire de paiement professionnel en utilisant Bootstrap. Reprenons ce que nous avons appris :

  1. Comment inclure Bootstrap dans notre projet
  2. Utiliser le système de grille de Bootstrap pour la mise en page
  3. Styliser les éléments de formulaire avec les classes Bootstrap
  4. Ajouter des feedbacks de validation

N'oubliez pas, la pratique rend parfait. Essayez de modifier ce formulaire, ajoutez de nouveaux champs, ou changez les styles. Plus vous expérimentez, mieux vous deviendrez !

Voici un tableau des principales classes Bootstrap que nous avons utilisées :

Classe But
container Centre le contenu et ajoute du padding
row Crée un groupe horizontal de colonnes
col-md-6 Crée une colonne qui occupe 50% de la largeur sur les écrans moyens et plus
form-label Stylise les étiquettes de formulaire
form-control Stylise les entrées de formulaire
btn Style de base du bouton
btn-primary Donne une couleur bleue au bouton
btn-lg Rend le bouton plus grand
form-check Stylise les cases à cocher et les boutons radio
valid-feedback Affiche un feedback pour une entrée valide
invalid-feedback Affiche un feedback pour une entrée invalide

Bonne programmation, et souvenez-vous - chaque expert a commencé comme un débutant. Continuez à pratiquer, et vous serez étonné de ce que vous pouvez créer !

Credits: Image by storyset

Tutoriel précédent:
Démo de Tarification Bootstrap
Tutoriel suivant:
Démo de Produit Bootstrap