Bootstrap 5 Offcanvas

Offcanvas (Båtduk)

Offcanvas liknar modaler (standardvis dold och visas när den aktiveras), men skiljer sig från dessa genom att det ofta används som en sidomeny för navigering.

Hur man skapar en Offcanvas sidopanel

Följande exempel visar hur man skapar en offcanvas sidopanel:

Exempel

<!-- 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>Några texter. Några texter. Några texter.</p>
    <p>Några texter. Några texter. Några texter.</p>
    <button class="btn btn-secondary" type="button">Knapp</button>
  </div>
</div>
<!-- Knapp för att öppna offcanvas sidopanel -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Öppna Offcanvas sidopanel
</button>

Prova själv

Exempel förklaring

.offcanvas klassen skapar offcanvas sidopanel.

.offcanvas-start klassen placerar offcanvas och ställer in bredden till 400px. För mer information om platsklasser, se exempel nedan.

.offcanvas-title klassen säkerställer lämpliga marginaler och radhöjder.

Därefter, lägg till ditt innehåll i .offcanvas-body klassen.

För att öppna offcanvas sidopanel måste du använda <button> eller <a> pekar på .offcanvas Kont容器的 id (i vårt exempel är #demo）。

För att använda <a> Element öppnar offcanvas sidopanel, du kan använda href-attributet istället för data-bs-target Egenskap pekar på #demo.

Offcanvas-placering

Använd .offcanvas-start|end|top|bottom Placera offcanvas till vänster, höger, topp eller botten:

Högerexempel

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

Prova själv

Toppexempel

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

Prova själv

Bottenexempel

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

Prova själv