Comment créer un Offcanvas dans Bootstrap
Comment créer un Offcanvas dans Bootstrap
-
Objectifs
- Connaitre le Offcanvas Bootstrap
- Être capable d’utiliser les Offcanvas Bootstrap
-
Présentation
- Offcanvas est un plug-in bootstrap 5 pour un menu latéral qui apparaît à l’écran de gauche, de droite, du haut ou du bas selon les besoins de l’utilisateur.
- Offcanvas peut être utilisé comme menu secondaire ou comme menu principal et il peut être déclenché par un bouton ou un lien.
- Lorsque la barre latérale hors toile est déclenchée, elle bloque la page de tout type d’interaction, car lorsque le menu se révèle, la page se cache derrière elle.
-
Comment créer une barre latérale
Offcanvas - Pour créer une barre latérale offcanvas, ajoutez la classe
.offcanvasdans une balise div avec sa position de révélation.offcanvas-startet un identifiant unique . - Ensuite, enroulez cette div autour d’une div avec la classe
.offcanvas-headerqui contient le titre de la barre latérale avec son bouton de renvoi et une div avec la classe.offcanvas-bodyqui contient le contenu de la barre latérale. - Enfin, pour déclencher la barre latérale offcanvas, utilisez
data-bs-toggle="offcanvas"etdata-bs-target="#id"pour connecter la barre latérale avec un bouton ou un lien qui, en cliquant, révèle la barre latéraleoffcanvas: - La barre latérale Offcanvas est créée en ajoutant la classe
.offcanvasà un div. - Ajoutez ensuite
.offcanvas-start/end/top/bottompour spécifier la position de la barre latérale et l’ attribut id pour donner à la barre latérale un identifiant unique. - Ensuite, enveloppez cette div autour d’une div avec la classe
.offcanvas-headerqui contient le titre de la barre latérale avec son bouton de renvoi - Puis une div avec la classe
.offcanvas-bodyqui contient le contenu de la barre latérale. - Utilisez
data-bs-toggle="offcanvas"pour déclencher la barre latérale offcanvas, et data-bs-target= »#id » pour connecter la barre latérale avec un bouton ou un lien qui, en cliquant, révèle la barre latérale offcanvas -
Positions d’une barre latérale
Offcanvas - La barre latérale
Offcanvaspeut être révélée à partir de n’importe quel bord de l’écran selon les besoins de l’utilisateur. - Pour spécifier la position
offcanvas, ajoutez simplement la classe.offcanvas-start/end/top/bottomavec la classe .offcanvas . -
La classe
.offcanvas-start - La classe .offcanvas-start révélera la barre latérale du côté gauche de la page.
-
La classe
.offcanvas-end - La classe .
offcanvas-endrévélera la barre latérale du côté droit de la page. -
La classe
.offcanvas-top - La classe
.offcanvas-toprévélera la barre latérale en haut de la page. -
La classe
.offcanvas-bottom - La classe
.offcanvas-bottomrévélera la barre latérale à partir du bas de la page. -
Application
- Suivez le processus mentionné ci-dessus pour créer un composant bootstrap offcanvas.
Exemple:
.
<div class="offcanvas offcanvas-start" id = "start"><div class = "offcanvas offcanvas-end" id = "end"><div class = "offcanvas offcanvas-top" id = "top"><div class = "offcanvas offcanvas-bottom" id = "bottom">