Exercice 03 - Mise en page avec Bootstrap 5
Table des matières
Mise en situation
Maintenant que votre idée est faite, Bootstrap 5 est un petit bijou! Il est maintenant le temps de le mettre à l'épreuve et de l'utiliser dans nos pages de notre projet!
Modalités
- Seul
- Réalisé durant le cours
- Durée approximative tout le cours:
- Partie 1 : 40 minutes
- Partie 2 : 40 minutes
- Remettre le tout zippé sur Léa dans exercice 03
Partie 1 - À faire (étapes)
Créer une page ayant comme mise en page la forme suivante en utilisant Bootstrap 5. Vous devez faire aussi la version mobile ou tout le site se retrouve sur une seule colonne
- Utilisez les fichiers de votre dernier exercice 02
- Faites la mise en page selon les deux spécifications fournies
Écrans moyen, large et très grand :
Écrans petit et très petit :
Une seule colonne - Faites la partie 2 dans le même fichier
Partie 2 - À faire (étapes)
Créer une page contenant un formulaire en utilisant Bootstrap pour la mise en forme.
Vous pouvez utiliser chatGPT pour généré rapidement le formulaire Bootstrap 5!
Le formulaire devra s’adapter selon la largeur de l’écran et offrir les 2 affichages suivants :
Écrans large et très grand (lg et +):
Écrans petit et très petit :
Validation
Vous devez aussi vous assurer qu’on ne puisse pas soumettre un formulaire contenant des données incomplètes ou erronées en ajoutant de la validation en Bootstrap :
Documentation en ligne
- Tous les champs sont obligatoires
- Le Login doit être de format courriel
- Le mot de passe doit contenir un minimum de 8 caractères
- EXPERT :
- Le code postal doit respecter le format A9A 9A9
- Les mots de passe doivent aussi contenir au moins une lettre et un chiffre
IMPORTANT: Remettre vos fichiers zippés sous exercice 03 quand tout est fait.