Navigation latérale Bootstrap5 (Offcanvas)
La barre latérale Bootstrap5 est similaire à une boîte modale et est couramment utilisée sur les appareils mobiles.
Créer une navigation coulissante
Nous pouvons utiliser JavaScript pour définir s'il faut ajouter après la.offcanvasclasse, ajouter la.showclasse, contrôlant ainsi l'affichage et le masquage de la barre latérale :
.offcanvasMasquer le contenu (Par défaut).offcanvas.showAfficher le contenu
Vous pouvez utiliser l'attribut du lien ahrefattribut, ou utiliser l'attribut de l'élément buttondata-bs-targetattribut pour définir la barre latérale. Les deux cas nécessitent d'utiliserdata-bs-toggle="offcanvas"。
L'exemple de création d'une navigation coulissante est le suivant :
Exemple
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">Utilisez l'attribut href du lien</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">Utilisez data-bs-target dans le bouton</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Barre latérale</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
</div>
<div class="offcanvas-body">
<div>
Un texte comme espace réservé. Dans la réalité, vous pouvez avoir les éléments que vous avez choisis. Comme du texte, des images, des listes, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Bouton déroulant
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Une autre action</a></li>
<li><a class="dropdown-item" href="#">Autre chose ici</a></li>
</ul>
</div>
</div>
</div>
Essayez-le »
Direction de la barre latérale
La direction de la barre latérale peut être contrôlée par les quatre classes suivantes :
.offcanvas-startAffichage à gauche, comme dans l'exemple ci-dessus..offcanvas-endAffichage à droite.offcanvas-topAffichage en haut.offcanvas-bottomAffichage en bas
Exemple
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Barre de navigation supérieure</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel">Affiché dans la barre de navigation supérieure</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
Essayez-le »
Exemple
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Barre latérale droite</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Affiché dans la barre latérale droite</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
Essayez-le »
Exemple
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Barre de navigation inférieure</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Affiché dans la barre de navigation inférieure</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
</div>
<div class="offcanvas-body small">
...
</div>
</div>
Essayez-le »
Définir l'arrière-plan et indiquer si l'arrière-plan peut défiler
Lorsque la barre latérale s'affiche, nous pouvons définir<body>si l'élément peut défiler, et aussi définir s'il faut afficher un canevas d'arrière-plan. Utilisezdata-bs-scrollattribut pour définir<body>si l'élément est défilable,data-bs-backdroppour basculer l'affichage du canevas d'arrière-plan.
Exemple
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">l'élément body peut défiler</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Afficher le canevas d'arrière-plan (par défaut)</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Autoriser le défilement et afficher la toile de fond</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasScrollingLabel">Le contenu du corps peut défiler</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
</div>
<div class="offcanvas-body">
<p>Faites défiler la page pour voir l'effet.</p>
</div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Utiliser la toile de fond</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
</div>
<div class="offcanvas-body">
<p>Le contenu du corps ne peut pas défiler</p>
</div>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Utiliser le canevas d'arrière-plan, le contenu du corps peut défiler</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
</div>
<div class="offcanvas-body">
<p>Faites défiler la page pour voir l'effet.</p>
</div>
</div>
Essayez-le »
