Bootstrap 5 Offcanvas

Offcanvas (bådfart)

Offcanvas ligner en modal (standardvis skjult og vises ved aktivering), forskellen er, at den ofte bruges som en sidepanel-navigationsmenu.

Hvordan oprettes Offcanvas-sidepanel

Følgende eksempel viser, hvordan man opretter en offcanvas-sidepanel:

Eksempel

<!-- 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>Nogle tekst. Nogle tekst. Nogle tekst.</p>
    <p>Nogle tekst. Nogle tekst. Nogle tekst.</p>
    <button class="btn btn-secondary" type="button">Knap</button>
  </div>
</div>
<!-- Knap til at åbne offcanvas-sidepanelet -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Åbn Offcanvas Sidepanel
</button>

Prøv det selv

Eksempel Forklaring

.offcanvas klassen opretter offcanvas-sidepanelet.

.offcanvas-start klassen placerer offcanvas og sætter bredden til 400px. For flere placeringseklasser, se nedenstående eksempler.

.offcanvas-title klassen sikrer passende margener og liniehøjde.

Herefter, tilføj dit indhold til .offcanvas-body klassen.

Hvis du vil åbne offcanvas-sidepanelet, skal du bruge <button> eller <a> Element peger på .offcanvas Kontainerets id (i vores eksempel #demo）。

Hvis du vil bruge <a> Elementer åbner offcanvas-sidepanelet, og du kan bruge href-egenskaben i stedet for data-bs-target Egenskab peger på #demo.

Offcanvas定位

Brug .offcanvas-start|end|top|bottom Placer offcanvas til venstre, højre, top eller bund:

Højre eksempel

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

Prøv det selv

Toppeksample

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

Prøv det selv

Bundende eksempel

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

Prøv det selv