Offcanvas Bootstrap 5

Offcanvas (帆布)

L'offcanvas est similaire à un modal (caché par défaut et affiché lors de l'activation), mais il est généralement utilisé comme menu de navigation latéral.

Comment créer une barre latérale offcanvas

L'exemple suivant montre comment créer une barre latérale offcanvas :

Exemple

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Titre</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas">Fermer</button>
  </div>
  <div class="offcanvas-body">
    <p>Un certain texte. Un certain texte. Un certain texte.</p>
    <p>Un certain texte. Un certain texte. Un certain texte.</p>
    <button class="btn btn-secondary" type="button">Bouton</button>
  </div>
</div>
<!-- Bouton pour ouvrir la sidebar offcanvas -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Ouvrir la sidebar Offcanvas
</button>

Essayer vous-même

Explication des exemples

.offcanvas classe crée la sidebar offcanvas.

.offcanvas-start classe positionne offcanvas et réglage la largeur à 400px. Pour plus d'informations sur les classes de positionnement, voir les exemples ci-dessous.

.offcanvas-title classe pour garantir des marge extérieure et hauteur de ligne appropriées.

Ensuite, ajoutez votre contenu à .offcanvas-body dans la classe.

Pour ouvrir la sidebar offcanvas, vous devez utiliser <button> ou <a> pointe .offcanvas L'ID du conteneur (dans notre exemple, #demo）。

Pour utiliser <a> Pour ouvrir la sidebar offcanvas, utilisez l'attribut href plutôt que data-bs-target Attribut de pointage #demo.

Position de Offcanvas

Utilisez .offcanvas-start|end|top|bottom Placez offcanvas à gauche, à droite, en haut ou en bas :

Exemple à droite

<div class="offcanvas offcanvas-end" id="demo">

Essayer vous-même

Exemple en haut

<div class="offcanvas offcanvas-top" id="demo">

Essayer vous-même

Exemple en bas

<div class="offcanvas offcanvas-bottom" id="demo">

Essayer vous-même