Français

Tutoriel Bootstrap

Mise en page Bootstrap

Contenu Bootstrap

Composants Bootstrap

Bootstrap Formulaires

Aides Bootstrap

Utilitaires Bootstrap

Demos Bootstrap

Bootstrap - Barre de navigation avec pied de page collant Demo

Bonjour à tous, aspirants développeurs web ! Aujourd'hui, nous allons entreprendre un voyage passionnant pour créer une barre de navigation avec un pied de page collant en utilisant Bootstrap. En tant que votre professeur d'informatique bien-aimé, je vais vous guider pas à pas dans ce processus, en m'assurant que vous comprenez chaque morceau de code que nous écrivons. Alors, prenez votre boisson favorite, asseyez-vous confortablement, et plongeons dedans !

Bootstrap-Sticky footer navbar Demo

Qu'est-ce qu'une Barre de Navigation avec Pied de Page Collant ?

Avant de commencer à coder, comprenons ce que nous essayons d'accomplir. Une barre de navigation avec un pied de page collant est une barre de navigation qui reste au bas de la page, peu importe la quantité de contenu ou la distance que vous faites défiler. C'est comme un ami loyal qui reste avec vous dans les moments faciles comme dans les moments difficiles !

Pourquoi Utiliser une Barre de Navigation avec Pied de Page Collant ?

  1. Elle offre un accès facile aux liens ou actions importants.
  2. Elle économise de l'espace écran, surtout sur les appareils mobiles.
  3. Elle améliore l'expérience utilisateur en gardant les options de navigation toujours visibles.

Maintenant que nous savons ce que nous construisons et pourquoi c'est utile, mettons les mains dans le code !

Configuration de notre Structure HTML

Tout d'abord, nous devons configurer la structure de base de notre document HTML. Ne vous inquiétez pas si vous êtes nouveau en HTML ; je vais expliquer chaque partie au fur et à mesure.

<!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>Demo Barre de Navigation avec Pied de Page Collant</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">
<!-- Nous ajouterons notre contenu ici -->

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

Reprenons cela :

  1. <!DOCTYPE html> : Cela indique au navigateur que nous utilisons HTML5.
  2. <html lang="fr" class="h-100"> : L'élément racine de notre page. Nous avons ajouté la classe h-100 pour qu'elle prenne 100% de la hauteur de la fenêtre.
  3. À l'intérieur de la balise <head> :
  • Nous définissons l'encodage des caractères et le viewport.
  • Nous donnons un titre à notre page.
  • Nous lions le fichier CSS de Bootstrap.
  1. <body class="d-flex flex-column h-100"> : Nous utilisons les classes Bootstrap pour faire du corps un conteneur flexible qui prend 100% de la hauteur de la fenêtre.
  2. À la fin du <body>, nous incluons le fichier JavaScript de Bootstrap.

Création de l'En-tête

Maintenant, ajoutons un en-tête à notre page :

<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Barre de navigation fixe</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Basculer la navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lien</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Désactivé</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Rechercher" aria-label="Rechercher">
<button class="btn btn-outline-success" type="submit">Rechercher</button>
</form>
</div>
</div>
</nav>
</header>

Ce code crée une barre de navigation responsive qui reste en haut de la page. Elle inclut un nom de marque, des liens de navigation et un formulaire de recherche. La barre de navigation se referme en un menu hamburger sur les écrans plus petits.

Ajout du Contenu Principal

Ensuite, ajoutons un peu de contenu principal à notre page :

<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">Épingler un pied de page au bas de la fenêtre dans les navigateurs de bureau avec ce HTML et CSS personnalisés.</p>
<p Utilisez <a href="#">le pied de page collant avec une barre de navigation fixe</a> si nécessaire, aussi.</p>
</div>
</main>

La classe flex-shrink-0 sur l'élément <main> garantit qu'il ne se rétrécit pas lorsque هناك n'y a pas assez d'espace, poussant notre pied de page vers le bas.

Création du Pied de Page

Passons maintenant à la star de notre spectacle, le pied de page collant :

<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">Placez le contenu du pied de page ici.</span>
</div>
</footer>

La classe mt-auto pousse le pied de page vers le bas de la page lorsque il n'y a pas assez de contenu pour remplir la fenêtre.

Ajout de CSS Personnalisé

Pour que tout fonctionne parfaitement, nous devons ajouter un peu de CSS personnalisé. Ajoutez ceci à l'intérieur d'une balise <style> dans l'entête de votre document :

<style>
main > .container {
padding: 60px 15px 0;
}

.footer {
background-color: #f5f5f5;
}
</style>

Ce CSS ajoute un peu de padding en haut de notre contenu principal (pour éviter qu'il ne soit masqué par la barre de navigation fixe) et definit une couleur de fond pour le pied de page.

Rassembler Tout

Voici notre code complet :

<!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>Demo Barre de Navigation avec Pied de Page Collant</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
main > .container {
padding: 60px 15px 0;
}

.footer {
background-color: #f5f5f5;
}
</style>
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Barre de navigation fixe</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Basculer la navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lien</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Désactivé</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Rechercher" aria-label="Rechercher">
<button class="btn btn-outline-success" type="submit">Rechercher</button>
</form>
</div>
</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">Épingler un pied de page au bas de la fenêtre dans les navigateurs de bureau avec ce HTML et CSS personnalisés.</p>
<p>Utilisez <a href="#">le pied de page collant avec une barre de navigation fixe</a> si nécessaire, aussi.</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 ici.</span>
</div>
</footer>

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

Conclusion

Et voilà, les amis ! Nous avons réussi à créer une page web avec une barre de navigation avec pied de page collant en utilisant Bootstrap. Souvenez-vous, le développement web est comme la cuisine - il faut de la pratique pour le faire parfaitement. Ne soyez pas découragé si ce n'est pas parfait à votre première tentative. Continuez à expérimenter, et avant que vous ne vous en rendiez compte, vous serez capable de créer des pages web magnifiques comme un chef cuisinier !

Voici un résumé rapide de ce que nous avons appris :

Composant Objectif
Structure HTML Fournit la structure de base de notre page web
CSS Bootstrap Nous donne des composants pré-stylisés et des classes utilitaires
CSS Personnalisé Nous permet de personnaliser l'apparence de notre page
En-tête Contient notre barre de navigation
Contenu Principal Contient le contenu principal de notre page
Pied de Page Reste au bas de la page, même lorsque le contenu est court
JS Bootstrap Active les composants interactifs comme la barre de navigation collapse

Souvenez-vous, la clé pour maîtriser le développement web est la pratique et la curiosité. Alors, continuez à coder, continuez à apprendre, et surtout, amusez-vous ! Jusqu'à la prochaine fois, bon codage !

Credits: Image by storyset

Tutoriel précédent:
Démo de tableau de bord Bootstrap
Tutoriel suivant:
Démonstration Bootstrap-Masonry