Bootstrap 5 Offcanvas

Offcanvas (zeil)

Offcanvas (zeil) is vergelijkbaar met een modaal (standaard verborgen en wordt weergegeven wanneer het wordt geactiveerd), maar het wordt meestal gebruikt als een zijbalk navigatiemenu.

Hoe je een Offcanvas zijbalk kunt maken

Hieronder wordt getoond hoe je een offcanvas zijbalk kunt maken:

Voorbeeld

<!-- 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>Enkele tekst. Enkele tekst. Enkele tekst.</p>
    <p>Enkele tekst. Enkele tekst. Enkele tekst.</p>
    <button class="btn btn-secondary" type="button">Knop</button>
  </div>
</div>
<!-- Knop om de offcanvas zijbalk te openen -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Open Offcanvas Zijbalk
</button>

Probeer het zelf

Voorbeeld uitleg

.offcanvas klasse maakt een offcanvas zijbalk.

.offcanvas-start klasse positioneert de offcanvas en stelt de breedte in op 400px. Voor meer positioneerklasse, zie de voorbeelden hieronder.

.offcanvas-title klasse zorgt ervoor dat de juiste marges en lijnhoogte worden gewaarborgd.

Voeg vervolgens uw inhoud toe aan .offcanvas-body klasse.

Om de offcanvas zijbalk te openen, moet u gebruik maken van <button> of <a> Element wijst op .offcanvas Het id van de container (in ons voorbeeld #demo）。

Om te gebruiken <a> Element opent de offcanvas zijbalk, u kunt de href-eigenschap gebruiken in plaats van data-bs-target Eigenschap wijst op #demo.

Offcanvas定位

Gebruik .offcanvas-start|end|top|bottom Plaats offcanvas aan de linkerkant, rechterkant, bovenkant of onderkant:

Rechter voorbeeld

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

Probeer het zelf

Bovenste voorbeeld

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

Probeer het zelf

Bodemvoorbeeld

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

Probeer het zelf