Bootstrap 5-Offcanvas

Offcanvas (Brett)

Offcanvas ähnelt Modalen (standardmäßig versteckt und wird bei Aktivierung angezeigt), unterscheidet sich jedoch darin, dass es in der Regel als Seitenleisten-Navigationsmenü verwendet wird.

Wie man eine Offcanvas-Kantelecke erstellt

Das folgende Beispiel zeigt, wie man eine offene Kantelecke erstellt:

Beispiel

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Titel</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Einige Texte. Einige Texte. Einige Texte.</p>
    <p>Einige Texte. Einige Texte. Einige Texte.</p>
    <button class="btn btn-secondary" type="button">Taste</button>
  </div>
</div>
<!-- Button to open the offcanvas sidebar -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Offcanvas-Seitenleiste öffnen
</button>

Versuchen Sie es selbst

Beispiel Erklärung

.offcanvas Klasse erstellt die offcanvas-Seitenleiste.

.offcanvas-start Klasse positioniert die offcanvas und setzt die Breite auf 400px. Weitere Positionierungsklassen finden Sie in den folgenden Beispielen.

.offcanvas-title Klasse hinzufügen, um angemessene Außenabstände und Zeilenhöhen zu gewährleisten.

Fügen Sie dann Ihren Inhalt in .offcanvas-body in der Klasse verwenden.

Um die offcanvas-Seitenleiste zu öffnen, müssen Sie <button> oder <a> Element verweist auf .offcanvas Container-ID (im Beispiel #demo）。

verwenden, um <a> Element öffnet die offcanvas-Seitenleiste, Sie können das href-Attribut anstatt data-bs-target Attribut verweist auf #demo.

Offcanvas-Position

Verwenden Sie .offcanvas-start|end|top|bottom Positionieren Sie die offcanvas links, rechts, oben oder unten:

Rechter Beispiel

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

Versuchen Sie es selbst

Beispiel am Anfang

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

Versuchen Sie es selbst

Beispiel am Ende

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

Versuchen Sie es selbst