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>
<!-- Offcanvas 사이드바를 엽니다. 버튼 -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Offcanvas 사이드바 열기
</button>

직접 테스트해 보세요

예제 설명

.offcanvas 클래스를 사용하여 offcanvas 사이드바를 생성합니다.

.offcanvas-start 클래스를 사용하여 offcanvas를 위치시키고, 너비를 400px로 설정합니다. 더 많은 위치 클래스에 대한 정보는 아래 예제를 참조하세요.

.offcanvas-title 클래스를 사용하여 적절한 마argins과 line-height를 보장합니다.

그런 다음, 내용을 .offcanvas-body 클래스 중에 사용해야 합니다.

offcanvas 사이드바를 엽니다. <button> 또는 <a> 요소를 지정합니다 .offcanvas 컨테이너의 id를 (예를 들어, 우리의 예제에서) #demo）。

사용하려면 <a> 요소가 offcanvas 사이드바를 엽니다. 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">

직접 테스트해 보세요