7-5. 오프캔버스
■ 오프캔버스
오프캔버스(offcanvas)는 모달 창과 유사하지만, 사이드바 메뉴로 자주 사용된다는 점이 다릅니다.
<div class="offcanvas offcanvas-start" id="offcanvas1">
<div class="offcanvas-header">
<h1 class="offcanvas-title">제목</h1>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>안녕하세요.</p>
<p>안녕하세요.</p>
<p>안녕하세요.</p>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
메뉴
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">메뉴1</a></li>
<li><a class="dropdown-item" href="#">메뉴2</a></li>
<li><a class="dropdown-item" href="#">메뉴3</a></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid mt-3">
<h3>오프캔버스(offcanvas) 사용 예</h3>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas1">
버튼 클릭!
</button>
</div>
ex7-5.html의 실행 결과