Bootstrap - Pieds de page Demo

Bonjour à tous, aspirants développeurs web ! Aujourd'hui, nous allons plonger dans le merveilleux monde des pieds de page Bootstrap. En tant que votre gentil voisin professeur de sciences informatiques, je suis excité de vous guider dans cette aventure. Alors, prenez votre boisson favorite, installez-vous confortablement, et c'est parti !

Qu'est-ce qu'un pied de page ?

Avant de nous pencher sur les spécificités de Bootstrap, penchons-nous sur les bases. Imaginez que vous lisez un livre. Que trouvez-vous généralement en bas de chaque page ? C'est bien ça - des numéros de page, parfois des titres de chapitre, ou d'autres informations utiles. Eh bien, dans le monde numérique, nous avons quelque chose de similaire pour les sites web, et nous l'appelons un pied de page !

Un pied de page est une section en bas d'une page web qui contient des informations telles que :

• Avis de copyright
• Informations de contact
• Liens vers des pages importantes
• Icônes de réseaux sociaux
• Menus de navigation rapide
• Liens de免责声明 ou de politique de confidentialité

Pensez-y comme un adieu amical à la fin de votre page web, fournissant aux visiteurs des informations utiles avant qu'ils ne quittent ou ne naviguent vers une autre partie de votre site.

Pourquoi utiliser Bootstrap pour les pieds de page ?

Maintenant, vous vous demandez peut-être : "Pourquoi devrais-je utiliser Bootstrap pour mon pied de page ?" Eh bien, mes étudiants enthousiastes, Bootstrap est comme un coffre à outils de super-héros pour les développeurs web. Il offre des composants et des styles pré-construits qui rendent la création d'éléments web responsifs et attractifs un jeu d'enfant. En ce qui concerne les pieds de page, Bootstrap propose :

1. Un design responsive dès la sortie de la boîte
2. Un style cohérent sur différents navigateurs
3. Un système de grille facile à utiliser pour la mise en page
4. Des composants pré-stylisés que vous pouvez personnaliser

Mettons les manches à l'eau et voyons comment nous pouvons créer des pieds de page incroyables avec Bootstrap !

Pied de page de base Bootstrap

Commençons par un pied de page simple. Voici un exemple de code :

<footer class="bg-light text-center text-lg-start">
<div class="container p-4">
<div class="row">
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">Contenu du pied de page</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
voluptatem veniam, est atque cumque eum delectus sint!
</p>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Liens</h5>
<ul class="list-unstyled mb-0">
<li><a href="#!" class="text-dark">Lien 1</a></li>
<li><a href="#!" class="text-dark">Lien 2</a></li>
<li><a href="#!" class="text-dark">Lien 3</a></li>
<li><a href="#!" class="text-dark">Lien 4</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase mb-0">Liens</h5>
<ul class="list-unstyled">
<li><a href="#!" class="text-dark">Lien 1</a></li>
<li><a href="#!" class="text-dark">Lien 2</a></li>
<li><a href="#!" class="text-dark">Lien 3</a></li>
<li><a href="#!" class="text-dark">Lien 4</a></li>
</ul>
</div>
</div>
</div>
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2023 Copyright :
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
</footer>

Décomposons cela :

1. Nous commençons avec une balise <footer> et lui donnons des classes Bootstrap pour le style.
2. À l'intérieur, nous avons un conteneur avec des rangées et des colonnes (système de grille de Bootstrap).
3. Nous avons divisé le pied de page en trois sections : contenu principal et deux colonnes de liens.
4. En bas, nous avons un avis de copyright.

La magie des classes Bootstrap rend cela responsive, ce qui signifie qu'il aura l'air bien sur både ordinateurs de bureau et appareils mobiles !

Pied de page collant

Parfois, vous souhaitez que votre pied de page reste collé en bas de la page, surtout lorsque le contenu n'est pas suffisant pour le faire descendre. Voici comment vous pouvez créer un pied de page collant :

<body class="d-flex flex-column min-vh-100">
<!-- Votre contenu principal va ici -->
<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Pied de page collant</h1>
<p class="lead">Fixez un pied de page en bas du viewport 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>
</body>

Dans cet exemple :

1. Nous utilisons Flexbox pour nous assurer que le pied de page reste en bas.
2. La classe min-vh-100 fait en sorte que le corps occupe au moins toute la hauteur du viewport.
3. La classe mt-auto sur le pied de page le pousse vers le bas.

Pied de page avec des icônes sociales

Reprenons avec un peu de peps avec des icônes de réseaux sociaux ! Voici un exemple :

<footer class="bg-dark text-center text-white">
<div class="container p-4 pb-0">
<section class="mb-4">
<!-- Facebook -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-facebook-f"></i>
</a>

<!-- Twitter -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-twitter"></i>
</a>

<!-- Google -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-google"></i>
</a>

<!-- Instagram -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-instagram"></i>
</a>

<!-- LinkedIn -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-linkedin-in"></i>
</a>

<!-- Github -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-github"></i>
</a>
</section>
</div>

<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2023 Copyright :
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
</footer>

Ce pied de page :

1. Utilise un arrière-plan sombre avec du texte blanc pour le contraste.
2. Inclut des icônes de réseaux sociaux sous forme de boutons.
3. Utilise les icônes Font Awesome (assurez-vous d'inclure la bibliothèque Font Awesome).

Conclusion

Et voilà, mes chers étudiants ! Nous avons exploré le monde des pieds de page Bootstrap, des simples aux collants en passant par les socially savvy. Souvenez-vous, les pieds de page sont comme la cerise sur le sundae de votre page web - ils peuvent être en bas, mais ils peuvent vraiment faire briller votre site !

Alors que vous continuez votre parcours en développement web, n'ayez pas peur d'expérimenter avec différents styles de pied de page. Mélez les éléments, jouez avec les couleurs, et surtout, amusez-vous bien !

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

Classe	Objectif
bg-light	Couleur d'arrière-plan claire
bg-dark	Couleur d'arrière-plan sombre
text-center	Centrer le texte
container	Créer un conteneur de largeur fixe responsive
row	Créer une rangée pour le système de grille
col-lg-6, col-md-12, etc.	Définir la largeur des colonnes pour différents tailles d'écran
list-unstyled	Supprimer le style par défaut des listes
mt-auto	Ajouter une marge-top : auto
py-3	Ajouter un padding vertical
btn	Créer un bouton
btn-outline-light	Créer un bouton en contour clair

Continuez à coder, continuez à apprendre, et souvenez-vous - dans le monde du développement web, le pied de page n'est que le début !

Credits: Image by storyset