Bootstrap - Navigation Demo

Qu'est-ce qu'une barre de navigation ?

Salut à toi, aspirant(e) développeur(euse) web ! Aujourd'hui, on va plonger dans l'univers passionnant des barres de navigation Bootstrap, ou comme on les appelle affectueusement, "navbars." Imagine que tu construis une maison - la navbar est comme le couloir qui relie toutes les chambres. C'est le hub central qui aide les visiteurs à se déplacer facilement sur ton site web.

Une navbar est un composant de navigation puissant qui se situe en haut de ta page web, offrant des liens vers différentes sections ou pages de ton site. C'est comme une carte routière pour tes visiteurs, les guidant à travers ton paysage numérique.

Pourquoi utiliser Bootstrap pour les navbars ?

Bootstrap, mes amis, est comme un coffre à outils de super-héros pour les développeurs web. Il est rempli de composants pré-conçus qui rendent notre vie plus facile. Utiliser Bootstrap pour les navbars signifie :

1. Une cohérence sur différents appareils (design réactif)
2. Une personnalisation facile
3. Un support intégré pour divers modèles de navigation

Maintenant, mettons nos manches à la pâte et commençons à construire !

Structure de base de la navbar

Voici la structure de base d'une navbar Bootstrap :

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Votre Marque</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Basculer la navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Accueil <span class="sr-only">(actuel)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Fonctionnalités</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tarification</a>
</li>
</ul>
</div>
</nav>

Reprenons cela :

1. <nav class="navbar navbar-expand-lg navbar-light bg-light"> : C'est notre conteneur principal de navbar. Les classes définissent son apparence et son comportement.
2. <a class="navbar-brand" href="#"> : C'est où va ton nom de marque ou ton logo.
3. <button class="navbar-toggler"> : Ce bouton apparaît sur les écrans plus petits pour basculer la navbar.
4. <div class="collapse navbar-collapse"> : Cela contient les éléments de la navbar qui se refermeront sur les écrans plus petits.
5. <ul class="navbar-nav"> : Cette liste non ordonnée contient nos éléments de navigation.
6. <li class="nav-item"> : Chaque élément de la liste représente un élément de navigation.

Personnalisation de ta navbar

Changer les couleurs

Bootstrap propose une variété de schémas de couleurs. Essayons une navbar sombre :

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- Contenu de la navbar -->
</nav>

Ici, nous avons changé navbar-light bg-light en navbar-dark bg-dark. C'est comme donner à ta navbar un look élégant de nuit !

Ajouter un formulaire de recherche

Tu veux ajouter une fonctionnalité de recherche ? Voici comment faire :

<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Rechercher" aria-label="Rechercher">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Rechercher</button>
</form>

Ajoute cela à l'intérieur de ton div navbar-collapse. C'est comme ajouter une loupe à ton couloir de navigation !

Menus déroulants

Reprenons de l'élan avec un menu déroulant :

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu déroulant
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>

Cela crée un menu déroulant dans ta navbar. C'est comme ajouter une pièce secrète à ton couloir de navigation !

Comportement réactif

Les navbars Bootstrap sont réactives par défaut. Sur les écrans plus petits, la navbar se referme en un bouton de bascule (souvent appelé "menu hamburger"). Cela garantit que ta navigation est utilisable sur tous les appareils.

Pour voir cela en action, essaie de redimensionner ta fenêtre de navigateur. Tu remarqueras que les éléments de la navbar disparaissent et que le bouton de bascule apparaît. En cliquant sur ce bouton, tes éléments de navigation apparaissent dans un format déroulant.

Meilleures pratiques

1. Reste simple : Ne submerge pas les utilisateurs avec trop d'options.
2. Utilise des étiquettes claires : Assure-toi que tes éléments de navigation sont faciles à comprendre.
3. Met en avant la page active : Utilise la classe active pour montrer aux utilisateurs où ils se trouvent.
4. Pense à ta marque : Choisis des couleurs et des styles qui correspondent à ton design global.

Conclusion

Félicitations ! Tu viens de construire ta première navbar Bootstrap. Souviens-toi, la pratique fait toujours perfection. Essaie différentes combinaisons, joue avec les couleurs, et surtout, amuse-toi !

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

Classe	Objectif
navbar	Définit le conteneur principal de la navbar
navbar-expand-lg	Définit le point de bascule pour l'expansion de la navbar
navbar-light/dark	Définit le schéma de couleurs de la navbar
bg-light/dark	Définit la couleur de fond de la navbar
navbar-brand	Style la zone de la marque/logo
navbar-toggler	Crée le bouton de bascule pour les petits écrans
navbar-nav	Style la liste de navigation
nav-item	Style les éléments individuels de la navigation
nav-link	Style les liens à l'intérieur des éléments de navigation
dropdown-toggle	Crée un toggle de menu déroulant
dropdown-menu	Style le conteneur du menu déroulant
dropdown-item	Style les éléments à l'intérieur du menu déroulant

Maintenant, va et crée des navbars incroyables ! Souviens-toi, chaque grand site web commence par une grande navigation. Bon codage !

Credits: Image by storyset