Dans ce tutoriel, vous apprendrez à créer des en-têtes de navigation responsive statiques et à positionnement fixe à l’aide du composant Bootstrap navbar.
Création d’une barre de navigation simple avec Bootstrap
Vous pouvez utiliser le composant navbar de Bootstrap pour créer un en-tête de navigation responsive pour votre site Web ou votre application. Ces barres de navigation réactives sont initialement réduites sur les appareils ayant de petites fenêtres d’affichage comme les téléphones cellulaires, mais s’étendent lorsque l’utilisateur clique sur le bouton de basculement. Cependant, elle sera horizontale comme normale sur les appareils moyens et grands comme les ordinateurs portables ou de bureau.
Vous pouvez également créer différentes variations de la navbar comme des navbars avec des menus déroulants et des boîtes de recherche ainsi qu’une navbar positionnée de manière fixe avec beaucoup moins d’efforts. L’exemple suivant vous montrera comment créer une simple navbar statique avec des liens de navigation.
Exemple
Essayez ce code »
<nav class="navbar navbar-expand-md navbar-light bg-light"> <a href="#" class="navbar-brand">Brand</a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <div class="navbar-nav"> <a href="#" class="nav-item nav-link active">Home</a> <a href="#" class="nav-item nav-link">Profile</a> <a href="#" class="nav-item nav-link">Messages</a> <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a> </div> <div class="navbar-nav ml-auto"> <a href="#" class="nav-item nav-link">Login</a> </div> </div></nav>– La sortie de l’exemple ci-dessus ressemblera à quelque chose comme ceci :
De plus, au lieu d’un texte simple, vous pouvez également placer votre image de logo à l’intérieur de la barre de navigation. Cependant, vous devez définir la hauteur du logo manuellement pour le placer correctement à l’intérieur de la barre de navigation, comme indiqué ici :
Exemple
Essayez ce code »
<nav class="navbar navbar-expand-md navbar-light bg-light"> <a href="#" class="navbar-brand"> <img src="images/logo.svg" height="28" alt="CoolBrand"> </a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <div class="navbar-nav"> <a href="#" class="nav-item nav-link active">Home</a> <a href="#" class="nav-item nav-link">Profile</a> <a href="#" class="nav-item nav-link">Messages</a> <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a> </div> <div class="navbar-nav ml-auto"> <a href="#" class="nav-item nav-link">Login</a> </div> </div></nav>– La sortie de l’exemple ci-dessus ressemblera à quelque chose comme ceci :
Note : Utilisez les classes utilitaires telles que .ml-auto.mr-auto.justify-content-between, etc. pour aligner les liens de la nav, les formulaires, les boutons ou le texte à l’intérieur de la navbar.
Ajouter des listes déroulantes à la barre de navigation
Vous pouvez également inclure des listes déroulantes et une boîte de recherche à l’intérieur des barres de navigation, comme illustré ici :
Exemple
Essayez ce code »
<nav class="navbar navbar-expand-md navbar-light bg-light"> <a href="#" class="navbar-brand">Brand</a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-between"> <div class="navbar-nav"> <a href="#" class="nav-item nav-link active">Home</a> <a href="#" class="nav-item nav-link">Profile</a> <div class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Messages</a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">Inbox</a> <a href="#" class="dropdown-item">Sent</a> <a href="#" class="dropdown-item">Drafts</a> </div> </div> </div> <form class="form-inline"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-append"> <button type="button" class="btn btn-secondary"><i class="fa fa-search"></i></button> </div> </div> </form> <div class="navbar-nav"> <a href="#" class="nav-item nav-link">Login</a> </div> </div></nav>– Le résultat de l’exemple ci-dessus ressemblera à quelque chose comme ceci :
Tip : Pour créer une navbar qui n’est pas fixe en haut ou en bas, placez-la n’importe où dans une .container, qui définit la largeur de votre site et de votre contenu.
Voyez la section snippets pour des exemples de navbars Bootstrap magnifiquement conçus.
Placer le formulaire de recherche à l’intérieur de la navbar
Le formulaire de recherche est un composant très commun des navbars et vous l’avez vu sur divers site web assez souvent. Vous pouvez placer divers contrôles et composants de formulaire au sein d’une barre de navigation en utilisant la classe .form-inline sur l’élément <form>, comme le montre l’exemple suivant :
Exemple
Essayez ce code »
<nav class="navbar navbar-expand-md navbar-dark bg-dark"> <a href="#" class="navbar-brand">Brand</a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <div class="navbar-nav"> <a href="#" class="nav-item nav-link active">Home</a> <a href="#" class="nav-item nav-link">About</a> <a href="#" class="nav-item nav-link">Products</a> </div> <form class="form-inline ml-auto"> <input type="text" class="form-control mr-sm-2" placeholder="Search"> <button type="submit" class="btn btn-outline-light">Search</button> </form> </div></nav>– La sortie de l’exemple ci-dessus ressemblera à quelque chose comme ceci :
Changement de la palette de couleurs des barres de navigation
Vous pouvez également changer la palette de couleurs de la barre de navigation en utilisant la .navbar-light pour les couleurs de fond claires, ou .navbar-dark pour les couleurs de fond sombres. Ensuite, personnalisez-le avec les classes utilitaires de couleur de fond, telles que .bg-dark.bg-primary, et ainsi de suite.
Alternativement, vous pouvez également appliquer vous-même la propriété CSS background-color sur l’élément .navbar pour personnaliser le thème de la barre navale, comme le montre l’exemple suivant :
Exemple
Essayez ce code »
<nav class="navbar navbar-expand-md navbar-dark bg-dark"> <!-- Navbar content --></nav><nav class="navbar navbar-dark bg-primary"> <!-- Navbar content --></nav><nav class="navbar navbar-light" style="background-color: #ddeeff;"> <!-- Navbar content --></nav>– Le résultat de l’exemple ci-dessus ressemblera à quelque chose comme ceci :
Bootstrap Fixed Navbar
Bootstrap fournit également un mécanisme pour créer une barre de navigation qui est fixe en haut ou en bas du viewport et qui défilera avec le contenu de la page.
Création de la navbar fixe en haut
Appliquez la classe utilitaire position .fixed-top à l’élément .navbar pour fixer la navbar en haut du viewport, afin qu’elle ne défile pas avec la page. Voici un exemple :
Exemple
Essayez ce code »
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <!-- Navbar content --></nav>Création de la barre de navigation fixe en bas
De la même manière, ajoutez la classe .fixed-bottom sur l’élément .navbar pour fixer la barre de navigation au bas du viewport, comme le montre l’exemple suivant :
Exemple
Essayez ce code »
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-bottom"> <!-- Navbar content --></nav>Création de la barre de navigation supérieure collante
Vous pouvez également créer une barre de navigation supérieure collante qui défile avec la page jusqu’à ce qu’elle atteigne le haut, puis y reste, en utilisant simplement la classe .sticky-top sur l’élément .navbar, comme ceci :
Exemple
Essayez ce code »
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top"> <!-- Navbar content --></nav>Conseil : Placez le contenu fixe .navbar à l’intérieur du .container ou .container-fluid pour un rembourrage et un alignement corrects avec le reste du contenu.
Note : N’oubliez pas d’ajouter padding (au moins 70px) en haut ou en bas de l’élément <body> pour empêcher le contenu de passer en dessous de la barre navale lors de la mise en œuvre de la barre navale fixe supérieure ou inférieure. Veillez également à ajouter votre feuille de style personnalisée après le fichier CSS de base de Bootstrap, sinon les règles de style de votre feuille de style peuvent être remplacées par celle de Bootstrap.
.