6-3. 드롭다운
■ 드롭다운 메뉴
클래스 .dropdown은 드롭다운 메뉴를 나타냅니다.
드롭다운 메뉴를 열려면 클래스 .dropdown-toggle와 data-bs-toggle="dropdown" 속성을 버튼이나 링크를 사용합니다.
드롭다운 메뉴를 실제로 빌드하려면 <ul> 요소에 클래스 .dropdown-menu를 추가합니다.
그런 다음 드롭다운 메뉴 내부의 각 요소인 링크나 버튼에 .dropdown-item 클래스를 추가합니다.
<div class="container mt-3">
<h3>드롭다운 메뉴</h3>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
메뉴1
</button>
<ul class="dropdown-menu">
<li><h5 class="dropdown-header">헤더1</h5></li>
<li><a class="dropdown-item" href="#">서브1</a></li>
<li><a class="dropdown-item" href="#">서브2</a></li>
<li><hr class="dropdown-divider"></hr></li>
<li><h5 class="dropdown-header">헤더2</h5></li>
<li><a class="dropdown-item" href="#">서브3</a></li>
</ul>
</div>
</div>
ex6-15.html의 실행 결과
■ 드롭다운 위치
클래스 .dropend를 사용하면 드롭다운 메뉴의 위치를 설정할 수 있습니다.
<div class="container mt-3">
<h3>드롭다운 위치</h3>
<div class="dropdown dropend">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
메뉴1
</button>
<ul class="dropdown-menu">
<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>
ex6-16.html의 실행 결과
■ 드롭다운 버튼 그룹
다음은 드롭다운 버튼을 그룹화한 예입니다.
<div class="container mt-3">
<h3>드롭다운 버튼 그룹</h3>
<div class="btn-group">
<button type="button" class="btn btn-primary">버튼1</button>
<button type="button" class="btn btn-primary">버튼2</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">버튼3</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">서브1</a></li>
<li><a class="dropdown-item" href="#">서브2</a></li>
</ul>
</div>
</div>
</div>
ex6-17.html의 실행 결과
■ 수직 드롭다운 버튼 그룹
다음은 수직 드롭다운 버튼을 그룹화한 예입니다.
수직 드롭다운 버튼 그룹
ex6-18.html
<div class="container mt-3">
<h3>수직 드롭다운 버튼 그룹</h3>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">버튼1</button>
<button type="button" class="btn btn-primary">버튼2</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">버튼3</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">서브1</a></li>
<li><a class="dropdown-item" href="#">서브2</a></li>
</ul>
</div>
</div>
</div>
ex6-18.html의 실행 결과
