Bootstrap - Exemple de pied de page collant
Qu'est-ce qu'un pied de page collant ?
Bonjour, futurs développeurs web ! Aujourd'hui, nous allons plonger dans le monde des pieds de page collants en utilisant Bootstrap. Mais avant de se salir les mains avec du code, comprenons ce qu'est réellement un pied de page collant.
Un pied de page collant est un pied de page qui " colle " en bas de la fenêtre du navigateur, même lorsqu'il n'y a pas assez de contenu pour le pousser vers le bas naturellement. C'est comme ce loyal ami qui est toujours là pour vous, peu importe ce qui se passe !
Pourquoi utiliser un pied de page collant ?
Imaginez que vous êtes en train de construire un site web avec un contenu minimal. Sans un pied de page collant, votre page pourrait sembler un peu... euh, vide. Un pied de page collant garantit que votre conception paraît complète et professionnelle, peu importe la longueur du contenu. C'est comme ajouter la cerise sur le sundae de votre conception web !
Créer un pied de page collant avec Bootstrap
Maintenant que nous savons vers quoi nous nous dirigeons, mettons les manches à la pâte et créons notre propre pied de page collant en utilisant Bootstrap. Ne vous inquiétez pas si vous êtes nouveau dans ce domaine - nous allons avancer pas à pas !
Étape 1 : Mettre en place la structure HTML
Premièrement, nous devons créer la structure HTML de base. Voici à quoi elle ressemble :
<!DOCTYPE html>
<html lang="fr" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Démonstration de pied de page collant Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<header>
<!-- Votre contenu d'en-tête va ici -->
</header>
<main class="flex-shrink-0">
<!-- Votre contenu principal va ici -->
</main>
<footer class="footer mt-auto py-3 bg-light">
<!-- Votre contenu de pied de page va ici -->
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Reprenons cela :
- Nous ajoutons
class="h-100"à la balise<html>pour qu'elle prenne 100% de la hauteur de la fenêtre d'affichage. - Le
<body>aclass="d-flex flex-column h-100"pour créer un conteneur flexbox qui prend toute la hauteur. - Nous utilisons
<main class="flex-shrink-0">pour empêcher le contenu principal de se rétracter. - Le
<footer>aclass="footer mt-auto py-3 bg-light"pour le pousser en bas et ajouter un peu de style.
Étape 2 : Ajouter du contenu
Maintenant, ajoutons un peu de contenu à notre page :
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Démonstration de pied de page collant</a>
</div>
</nav>
</header>
<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Pied de page collant avec barre de navigation fixe</h1>
<p class="lead">Fixez un pied de page en bas de la fenêtre d'affichage dans les navigateurs de bureau avec ce HTML et CSS personnalisés.</p>
</div>
</main>
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">Placez le contenu du pied de page collant ici.</span>
</div>
</footer>Cela nous donne une page simple avec un en-tête, un contenu principal et un pied de page.
Étape 3 : Ajouter du CSS personnalisé
Pour que tout ait l'air correct, nous avons besoin d'un peu de CSS personnalisé. Ajoutez ceci à votre section <head> :
<style>
main > .container {
padding: 60px 15px 0;
}
</style>Cela ajoute un peu de padding en haut de notre contenu principal pour empêcher qu'il ne soit caché derrière la barre de navigation fixe.
Le résultat
Après avoir suivi ces étapes, vous devriez avoir une belle page avec un pied de page collant ! Le pied de page restera collé en bas de la fenêtre d'affichage lorsqu'il n'y a pas assez de contenu, et il sera poussé vers le bas lorsqu'il y a plus de contenu que ce qui peut tenir à l'écran.
Problèmes courants et solutions
| Problème | Solution |
|---|---|
| Le pied de page chevauche le contenu | Assurez-vous que <main> a class="flex-shrink-0"
|
| Le pied de page n'est pas en bas | Vérifiez si <body> a class="d-flex flex-column h-100"
|
| Le contenu est caché derrière la barre de navigation | Ajoutez du padding au conteneur de contenu principal |
Conclusion
Et voilà, les amis ! Vous venez de créer votre propre pied de page collant en utilisant Bootstrap. C'est comme donner à votre site web une paire de chaussures qui toujours ajustent, peu importe la hauteur ou la faible taille de votre contenu.
N'oubliez pas, le développement web est tout au sujet de la pratique et de l'expérimentation. N'ayez pas peur de modifier le code, d'essayer différents styles, ou même de combiner cela avec d'autres composants Bootstrap. Qui sait ? Vous pourriez créer la prochaine grande chose dans le design web !
Continuez à coder, continuez à apprendre, et surtout, amusez-vous ! Jusqu'à la prochaine fois, c'est votre enseignant informatique du quartier qui vous dit aurevoir. Bon codage !
Credits: Image by storyset