Offcanvas Bootstrap 5

Offcanvas (боковая панель)

Offcanvas (боковая панель) подобна модальному окну (по умолчанию скрыто и отображается при активации), но отличается тем, что обычно используется в качестве бокового меню навигации.

Как создать Offcanvas боковую панель

Следующий пример показывает, как создать offcanvas боковую панель:

Пример

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Заголовок</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Некоторый текст. Некоторый текст. Некоторый текст.</p>
    <p>Некоторый текст. Некоторый текст. Некоторый текст.</p>
    <button class="btn btn-secondary" type="button">Кнопка</button>
  </div>
</div>
<!-- Кнопка для открытия offcanvassidebar -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Откройте Offcanvassidebar
</button>

Попробуйте сами

Объяснение примеров

.offcanvas класс создает offcanvassidebar.

.offcanvas-start класс позиционирует offcanvas и устанавливает ширину 400px. О других классах позиционирования см.下面的 примеры.

.offcanvas-title класс гарантирует соответствующие отступы и высоту строки.

Затем, добавьте ваше содержимое в .offcanvas-body классе.

Если вы хотите открыть offcanvassidebar, вы должны использовать <button> или <a> элемент указывающий .offcanvas ID контейнера (в нашем примере это #demo）。

Если вы хотите использовать <a> Элемент открывает offcanvassidebar, вы можете использовать атрибут href вместо data-bs-target Свойство указывающее #demo.

Отметка Offcanvas

Используйте .offcanvas-start|end|top|bottom Отметьте offcanvas на左侧,右侧, верх или низ:

Пример в правой части

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

Попробуйте сами

Пример в верхней части

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

Попробуйте сами

Пример в нижней части

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

Попробуйте сами