Offcanvas Bootstrap 5

Offcanvas (baner)

Offcanvas jest podobny do modali (domyślnie ukryty i wyświetlany po aktywacji), ale różni się tym, że zwykle jest używany jako menu nawigacyjne w stylu bocznej karty.

Jak utworzyć menu boczne Offcanvas

Poniżej pokazano, jak utworzyć boczne menu offcanvas:

Przykład

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Tytuł</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas">
  </div>
  <div class="offcanvas-body">
    <p>Niektóry tekst. Niektóry tekst. Niektóry tekst.</p>
    <p>Niektóry tekst. Niektóry tekst. Niektóry tekst.</p>
    <button class="btn btn-secondary" type="button">Przycisk</button>
  </div>
</div>
<!-- Przycisk do otwarcia panelu bocznego offcanvas -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Otwórz panel boczny Offcanvas
</button>

Spróbuj sam

Przykład wyjaśnienia

.offcanvas klasa tworzy panel boczny offcanvas.

.offcanvas-start klasa umieszcza offcanvas i ustawia szerokość na 400px. Więcej klas umieszczania można zobaczyć w poniższych przykładach.

.offcanvas-title klasa zapewnia odpowiednie marginesy i wysokość wiersza.

Następnie, dodaj swoje treści do .offcanvas-body klasy.

Aby otworzyć panel boczny offcanvas, musisz użyć <button> lub <a> element wskazuje .offcanvas Identyfikator kontenera (w naszym przykładzie to #demo）。

Aby użyć <a> Element otwiera panel boczny offcanvas, możesz użyć atrybutu href zamiast data-bs-target Atrybut wskazuje #demo.

Umieszczenie Offcanvas

Użyj .offcanvas-start|end|top|bottom Umieść offcanvas po lewej, prawej, na górze lub na dole:

Przykład w prawej części

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

Spróbuj sam

Przykład w górnej części

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

Spróbuj sam

Przykład w dolnej części

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

Spróbuj sam