Bootstrap - Exemple de barre latérale
Bonjour, aspirants développeurs web ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde des barres latérales Bootstrap. En tant que votre professeur de science informatique de quartier, je suis ravi de vous guider à travers ce sujet. Alors, prenez votre boisson favorite, installez-vous confortablement, et plongeons dedans !
Qu'est-ce qu'une barre latérale ?
Avant de commencer à coder, comprenons ce qu'est réellement une barre latérale. Imaginez que vous lisez un livre, et qu'il y a une colonne étroite sur le côté de la page avec des informations supplémentaires ou des liens rapides. C'est essentiellement ce qu'est une barre latérale dans le design web !
Une barre latérale est une colonne verticale généralement placée sur le côté gauche ou droit d'une page web. Elle contient souvent des liens de navigation, des informations supplémentaires ou d'autres contenus qui complètent la zone de contenu principal. Les barres latérales aident à organiser les informations et à améliorer l'expérience utilisateur en offrant un accès rapide aux éléments importants.
Créer une barre latérale de base avec Bootstrap
Maintenant que nous savons ce qu'est une barre latérale, créons-en une en utilisant Bootstrap. Nous allons commencer par un exemple simple et le développer progressivement.
Étape 1 : Mettre en place la structure HTML
Premièrement, nous devons définir notre structure HTML. Voici un template de base :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Démonstration de Barre Latérale Bootstrap</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Barre latérale -->
<div class="col-md-3 sidebar bg-light">
<!-- Le contenu de la barre latérale ira ici -->
</div>
<!-- Contenu principal -->
<div class="col-md-9 main-content">
<!-- Le contenu principal ira ici -->
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Dans ce template, nous avons créé un conteneur avec deux colonnes : une pour la barre latérale (3 unités de large) et une pour le contenu principal (9 unités de large). Bootstrap utilise un système de grille de 12 colonnes, donc ces nombres s'additionnent à 12.
Étape 2 : Ajouter du contenu à la barre latérale
Ajoutons un peu de contenu à notre barre latérale :
<!-- Barre latérale -->
<div class="col-md-3 sidebar bg-light">
<h3 class="mt-3">Menu de la Barre Latérale</h3>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">À propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>Ici, nous avons ajouté un titre et une liste de liens de navigation à notre barre latérale. La classe bg-light lui donne une couleur de fond claire.
Étape 3 : Ajouter du contenu principal
Ajoutons un peu de contenu à la zone principale :
<!-- Contenu principal -->
<div class="col-md-9 main-content">
<h1 class="mt-3">Bienvenue sur notre site</h1>
<p>Cette est la zone de contenu principal. C'est où les informations principales de votre page seront affichées.</p>
</div>Améliorer la barre latérale
Maintenant que nous avons une barre latérale de base, améliorons-la avec quelques fonctionnalités supplémentaires.
Ajouter une boîte de recherche
<div class="col-md-3 sidebar bg-light">
<h3 class="mt-3">Menu de la Barre Latérale</h3>
<form class="d-flex mb-3">
<input class="form-control me-2" type="search" placeholder="Rechercher" aria-label="Rechercher">
<button class="btn btn-outline-success" type="submit">Rechercher</button>
</form>
<!-- ... reste du contenu de la barre latérale ... -->
</div>Cela ajoute une boîte de recherche en haut de notre barre latérale, offrant aux utilisateurs un moyen rapide de trouver du contenu.
Ajouter des menus déroulants
Ajoutons un menu déroulant à notre barre latérale :
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Produits
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Produit 1</a></li>
<li><a class="dropdown-item" href="#">Produit 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Offre Spéciale</a></li>
</ul>
</li>Ajoutez ce code à l'intérieur du <ul class="nav flex-column"> dans votre barre latérale. Cela crée un menu déroulant pour "Produits".
Rendre la barre latérale responsive
Un des défis avec les barres latérales est de les rendre fonctionnelles sur les appareils mobiles. Rendons notre barre latérale responsive :
<div class="container-fluid">
<div class="row">
<!-- Barre latérale -->
<div class="col-md-3 sidebar bg-light" id="sidebar">
<button class="btn btn-primary d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarContent">
Basculer la Barre Latérale
</button>
<div class="collapse d-md-block" id="sidebarContent">
<!-- ... contenu de la barre latérale ... -->
</div>
</div>
<!-- Contenu principal -->
<div class="col-md-9 main-content">
<!-- ... contenu principal ... -->
</div>
</div>
</div>Nous avons ajouté un bouton de bascule qui n'apparaît que sur lespetits écrans (d-md-none), et nous avons enveloppé notre contenu de barre latérale dans un div collapse. Sur les écrans plus grands, la barre latérale sera toujours visible (d-md-block).
Styler la barre latérale
Enfin, ajoutons un peu de CSS personnalisé pour rendre notre barre latérale encore plus belle :
<style>
.sidebar {
min-height: 100vh;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
.sidebar .nav-link {
color: #333;
}
.sidebar .nav-link.active {
color: #007bff;
}
</style>Ajoutez ceci dans le <head> de votre HTML. Ce CSS rend la barre latérale de pleine hauteur, ajoute une ombre subtile et style les liens de navigation.
Conclusion
Félicitations ! Vous venez de créer une barre latérale Bootstrap fonctionnelle et responsive. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec différents layouts et styles.
Voici un tableau résumant les principales classes Bootstrap que nous avons utilisées :
| Classe | But |
|---|---|
| container-fluid | Crée un conteneur en pleine largeur |
| row | Crée un groupe horizontal de colonnes |
| col-md-3 | Crée une colonne 3 unités large sur les écrans medium et plus |
| bg-light | Ajoute une couleur de fond claire |
| nav | Indique un composant de navigation |
| nav-item | Style un élément de navigation |
| nav-link | Style un lien de navigation |
| dropdown | Crée un menu déroulant |
| btn | Style un bouton |
| form-control | Style les inputs de formulaire |
Continuez à coder, continuez à apprendre, et surtout, amusez-vous ! Souvenez-vous, chaque maître a déjà été un débutant. Votre voyage dans le développement web vient de commencer, et je suis excité de voir où il vous mènera !
Credits: Image by storyset