Français

Tutoriel Bootstrap

Mise en page Bootstrap

Contenu Bootstrap

Composants Bootstrap

Bootstrap Formulaires

Aides Bootstrap

Utilitaires Bootstrap

Demos Bootstrap

Bootstrap - Aperçu RTL de la page de paiement

Aperçu

Bonjour, aspirants développeurs web ! Aujourd'hui, nous allons plonger dans le monde passionnant de Bootstrap et créer une belle page de paiement avec prise en charge RTL (de droite à gauche). Ne vous inquiétez pas si vous êtes nouveau dedans - je vais vous guider à chaque étape avec la patience d'un enseignant chevronné qui a aidé d'innombrables étudiants comme vous.

Bootstrap-Checkout RTL Demo

Qu'est-ce que Bootstrap ?

Avant de nous lancer dans notre démonstration de page de paiement, penchons-nous sur ce qu'est Bootstrap. Imaginez que vous construisez une maison. Bootstrap est comme un kit préfabriqué qui vous donne tous les éléments structurels de base dont vous avez besoin. C'est un framework CSS gratuit et open-source qui vous aide à créer des sites web responsifs et optimisés pour mobile rapidement et facilement.

Pourquoi utiliser Bootstrap ?

  1. Économise du temps
  2. Assure la cohérence
  3. Conception responsive prête à l'emploi
  4. Large communauté et support

Configuration de notre projet

Commençons par configurer notre projet. Nous devons inclure Bootstrap dans notre fichier HTML. Voici comment nous faisons :

<!DOCTYPE html>
<html lang="fr" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Démonstration de page de paiement Bootstrap RTL</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
</head>
<body>
<!-- Notre contenu ira ici -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Dans cette configuration, nous incluons à la fois la version standard de Bootstrap CSS et la version RTL. L'attribut dir="rtl" dans la balise <html> indique au navigateur de rendrer la page dans le sens de droite à gauche.

Création du formulaire de paiement

Maintenant, créons notre formulaire de paiement. Nous allons utiliser le système de grille et les composants de formulaire de Bootstrap pour créer un layout responsive.

<div class="container mt-5">
<h1 class="mb-4">Paiement</h1>
<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>
<!-- D'autres champs de formulaire iront ici -->
</form>
</div>

Reprenons cela :

  • La classe container crée un conteneur centré pour notre contenu.
  • Les classes row et col-md-6 créent un layout de deux colonnes responsive.
  • Les classes form-label et form-control stylisent nos étiquettes et nos entrées.

Ajout de champs de formulaire

Ajoutons quelques champs supplémentaires à notre formulaire :

<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="address" class="form-label">Adresse</label>
<input type="text" class="form-control" id="address" required>
</div>
<div class="row">
<div class="col-md-5 mb-3">
<label for="country" class="form-label">Pays</label>
<select class="form-select" id="country" required>
<option value="">Choisissez...</option>
<option>États-Unis</option>
<option>Canada</option>
<option>Mexique</option>
</select>
</div>
<div class="col-md-4 mb-3">
<label for="state" class="form-label">État</label>
<select class="form-select" id="state" required>
<option value="">Choisissez...</option>
<option>Californie</option>
<option>New York</option>
<option>Texas</option>
</select>
</div>
<div class="col-md-3 mb-3">
<label for="zip" class="form-label">Code postal</label>
<input type="text" class="form-control" id="zip" required>
</div>
</div>

Ici, nous avons ajouté des champs pour l'email, l'adresse, le pays, l'état et le code postal. Notez comment nous utilisons form-select pour les menus déroulants.

Information de paiement

Maintenant, ajoutons une section pour les informations de paiement :

<h3 class="mb-3">Paiement</h3>
<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 class="form-check">
<input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="paypal">PayPal</label>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<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 mb-3">
<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>
<div class="row">
<div class="col-md-3 mb-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 mb-3">
<label for="cc-cvv" class="form-label">CVV</label>
<input type="text" class="form-control" id="cc-cvv" required>
</div>
</div>

Cette section inclut des boutons radio pour la sélection du mode de paiement et des champs pour les détails de la carte.

Ajout du bouton de soumission

Enfin, ajoutons un bouton de soumission à notre formulaire :

<button class="btn btn-primary btn-lg btn-block" type="submit">Passer la commande</button>

Les classes btn, btn-primary, et btn-lg stylisent notre bouton comme un bouton large et de couleur primaire.

Considérations RTL

Lorsque vous travaillez avec des layouts RTL, gardez à l'esprit les points suivants :

  1. Alignement du texte : Dans les layouts RTL, le texte est généralement aligné à droite.
  2. Layout du formulaire : Les étiquettes de formulaire devraient apparaître à droite de leurs entrées.
  3. Icônes : Les icônes directionnelles (comme les flèches) devraient être retournées.

Le CSS RTL de Bootstrap prend automatiquement en charge la plupart de ces considérations !

Conclusion

Félicitations ! Vous venez de créer une page de paiement responsive et compatible RTL avec Bootstrap. Souvenez-vous, la pratique fait toujours perfection. Essayez de modifier ce formulaire, ajoutez de nouveaux champs, ou changez la mise en forme pour le rendre vôtre.

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

Classe Objectif
container Crée un conteneur centré pour le contenu
row Crée un groupe horizontal de colonnes
col-md-* Crée des colonnes de largeurs variées
form-label Stylise les étiquettes de formulaire
form-control Stylise les entrées de formulaire
form-select Stylise les menus déroulants
form-check Stylise les cases à cocher et les boutons radio
btn Stylisation de base des boutons
btn-primary Applique la couleur primaire au bouton
btn-lg Rend le bouton large

Bonne programmation, et souvenez-vous - chaque expert a d'abord été un débutant. Continuez à pratiquer, et vous deviendrez un pro de Bootstrap en un rien de temps !

Credits: Image by storyset

Tutoriel précédent:
Démonstration d'Album Bootstrap RTL
Tutoriel suivant:
Démonstration Bootstrap-Carousel RTL