Bootstrap - Démo de connexion

Aperçu

Salut à toi, futur développeur web ! Aujourd'hui, nous allons entreprendre un voyage passionnant pour créer une page de connexion belle et fonctionnelle en utilisant Bootstrap. En tant que ton professeur d'informatique du coin, je suis là pour te guider pas à pas dans ce processus. Ne t'inquiète pas si tu n'as jamais écrit une ligne de code auparavant - nous allons commencer par les bases et progresser étape par étape. À la fin de ce tutoriel, tu auras une page de connexion professionnelle dont tu pourras être fier !

Bootstrap-Sign In Demo

Qu'est-ce que Bootstrap ?

Avant de plonger dans le code, parlons de Bootstrap. Imagine que tu construis une maison. Tu pourrais faire chaque brique depuis zéro, ou tu pourrais utiliser des matériaux préfabriqués pour accélérer le processus. Bootstrap est comme ces matériaux préfabriqués pour le développement web. C'est un framework CSS gratuit et open-source qui nous aide à créer des sites web responsifs et optimisés pour mobile rapidement et facilement.

Configuration de notre projet

Étape 1 : Créer le fichier HTML

Premièrement, créons notre fichier HTML. Ouvre ton éditeur de texte préféré (j'adore personnellement Visual Studio Code, mais Notepad fonctionne très bien pour les débutants), et crée un nouveau fichier appelé index.html. Cela sera la base de notre page de connexion.

<!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 connexion Bootstrap</title>
</head>
<body>

</body>
</html>

Cette est notre structure HTML de base. Pense à elle comme le squelette de notre page web. La section <head> est où nous mettrons les informations sur notre page, et le <body> est où toute la contenu visible ira.

Étape 2 : Inclure Bootstrap

Maintenant, ajoutons un peu de muscle à notre squelette en incluant Bootstrap. Nous allons faire cela en ajoutant des liens dans la section <head> de notre HTML :

<head>
<!-- ... code précédent ... -->
<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>
</head>

Ces lignes sont comme donner à notre page web un costume de super-héros. Elles lient aux fichiers CSS et JavaScript de Bootstrap, ce qui nous donnera accès à tous les composants et styles préconstruits de Bootstrap.

Création du formulaire de connexion

Étape 1 : Structure de base du formulaire

Commençons à construire notre formulaire de connexion. Ajoute le code suivant à l'intérieur des balises <body> :

<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<form>
<h2 class="mb-3">Connexion</h2>
<!-- Les champs de formulaire iront ici -->
</form>
</div>
</div>
</div>
</body>

Décomposons cela :

container : Cette classe Bootstrap crée un conteneur de largeur fixe responsive.
mt-5 : Ajoute une marge en haut (pense à elle comme poussant tout vers le bas un peu).
row et col-md-6 : Ces classes créent une colonne centrée qui occupe la moitié de la largeur sur les écrans de taille moyenne et plus grands.

Étape 2 : Ajouter les champs de formulaire

Maintenant, ajoutons nos champs de formulaire. Remplace le commentaire dans le formulaire par :

<div class="mb-3">
<label for="email" class="form-label">Adresse email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Mot de passe</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="remember">
<label class="form-check-label" for="remember">Se souvenir de moi</label>
</div>
<button type="submit" class="btn btn-primary">Connexion</button>

Voici ce que fait chaque partie :

mb-3 : Ajoute une marge en bas de chaque div pour l'espacement.
form-label : Style les étiquettes de nos inputs.
form-control : Rend nos inputs beaux et cohérents.
form-check et form-check-input : Style les cases à cocher et les boutons radio.
btn btn-primary : Crée un bouton avec une belle couleur bleue.

Ajout de style

Faisons notre page de connexion encore plus belle avec un peu de CSS personnalisé. Ajoute ceci à ta section <head> :

<style>
body {
background-color: #f8f9fa;
}
.container {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h2 {
color: #007bff;
}
</style>

Ce CSS donne à notre page un arrière-plan gris clair, ajoute un conteneur blanc avec une ombre subtile pour notre formulaire, et colore notre titre en bleu pour correspondre au thème Bootstrap.

Le dernier touche : Design réactif

L'une des grandes choses à propos de Bootstrap est qu'il est réactif par défaut. Cela signifie que notre page de connexion aura l'air bien sur les appareils de bureau et mobiles. Cependant, ajoutons un dernier ajustement pour le rendre parfait :

<div class="col-md-6 col-sm-8 col-10">

Remplace col-md-6 dans ton conteneur de formulaire avec cette ligne. Maintenant, sur les petits appareils, le formulaire prendra 8 colonnes, et sur les appareils extra-petits, il prendra 10 colonnes, assurant qu'il est toujours facile à lire et à utiliser.

Conclusion

Et voilà ! Tu viens de créer une page de connexion belle et réactive en utilisant Bootstrap. Voici un tableau récapitulatif des principales classes Bootstrap que nous avons utilisées :

Classe	But
container	Crée un conteneur de largeur fixe responsive
row	Crée un groupe horizontal de colonnes
col-*	Définit la largeur des colonnes pour différentes tailles d'écrans
form-control	Style les inputs de formulaire
form-label	Style les étiquettes de formulaire
form-check	Style les cases à cocher et les boutons radio
btn	Crée un bouton
btn-primary	Style un bouton avec la couleur primaire
mt-*	Ajoute une marge en haut
mb-*	Ajoute une marge en bas

Souviens-toi, le développement web est tout au sujet de la pratique et de la créativité. N'ayez pas peur d'expérimenter avec différents couleurs, layouts, et composants Bootstrap. Qui sait ? Ton prochain projet pourrait être la prochaine grande chose sur internet !

Bonne programmation, futurs mages du web !

Credits: Image by storyset

Tutoriel précédent:

Démo d'Album Bootstrap

Tutoriel suivant:

Démo de Tarification Bootstrap