목차
Dropdown 기본 Dropdown Divider (메뉴구분) Dropdown Header (머리말) Dropdown Active (활성화) / Disable (비활성화) Dropdown Position (위치) Dropdown Menu Right (오른쪽하단) Dropup (드롭업) Dropdown Text (텍스트) Dropdown Group Button (그룹버튼) Dropdown Vertical Group Button (수직그룹버튼)
※ BS4와 거의 동일. 단 일부 바뀜.
Dropdown 기본
<div class="dropdown ">
<button type="button" class="btn btn-primary dropdown-toggle " data-bs-toggle="dropdown" >
코딩언어
</button>
<ul class="dropdown-menu ">
<li><a class="dropdown-item " href="#">HTML</a></li>
<li><a class="dropdown-item" href="#">CSS</a></li>
<li><a class="dropdown-item" href="#">JS</a></li>
</ul>
</div>
결과보기
cf. BS4 경우, data-toggle="dropdown" 속성 사용.
Dropdown Divider (메뉴구분)
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
코딩언어
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">HTML</a></li>
<li><a class="dropdown-item" href="#">CSS</a></li>
<li><a class="dropdown-item" href="#">JS</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">PHP</a></li>
<li><a class="dropdown-item" href="#">SQL</a></li>
</ul>
</div>
결과보기
※ BS4와 동일
Dropdown Header (머리말)
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
코딩언어
</button>
<ul class="dropdown-menu">
<li><h5 class="dropdown-header">앞단 코딩언어</h5></li>
<li><a class="dropdown-item" href="#">HTML</a></li>
<li><a class="dropdown-item" href="#">CSS</a></li>
<li><a class="dropdown-item" href="#">JS</a></li>
<li><h5 class="dropdown-header">뒷단 코딩언어</h5></li>
<li><a class="dropdown-item" href="#">PHP</a></li>
<li><a class="dropdown-item" href="#">SQL</a></li>
</ul>
</div>
결과보기
Dropdown Active (활성화) / Disable (비활성화)
※ <a> 태그에 아래 클래스 추가
.active 클래스 - 링크 활성화 (※ 파란색 배경에 흰글씨로 표시)
.disabled 클래스 - 링크 비활성화 (※ 연회색 글씨로 표시)
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
코딩언어
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">HTML</a></li>
<li><a class="dropdown-item active " href="#">CSS</a></li>
<li><a class="dropdown-item disabled " href="#">JS</a></li>
</ul>
</div>
결과보기
※ BS4와 동일
Dropdown Position (위치)
※ .dropdown 클래스 옆에 아래 클래스 추가
.dropend 클래스 - 버튼 우측 사이드에 드롭다운
.dropstart 클래스 - 버튼 좌측 사이드에 드롭다운
<div class="dropdown dropend ">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
코딩언어
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">HTML</a></li>
<li><a class="dropdown-item active" href="#">CSS</a></li>
<li><a class="dropdown-item disabled" href="#">JS</a></li>
</ul>
</div>
<div class="dropdown dropstart text-end">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
코딩언어
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">HTML</a></li>
<li><a class="dropdown-item active" href="#">CSS</a></li>
<li><a class="dropdown-item disabled" href="#">JS</a></li>
</ul>
</div>
결과보기
PS. 주의사항
드롭다운 공간 부족 시, 자동으로 위치가 반대로 바뀜.
.dropstart 효과 보여주기 위해 .text-end 클래스 추가함.
※ BS4 경우, (.dropright / .dropleft) 클래스 사용.
Dropdown Menu Right (오른쪽하단)
※ .dropdown 클래스 옆에 .dropdown-menu-end 클래스 추가.
<div class="dropdown dropdown-menu-end ">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
홈짱닷컴 (Homzzang.com) 코딩언어 강의
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">HTML</a></li>
<li><a class="dropdown-item" href="#">CSS</a></li>
<li><a class="dropdown-item" href="#">JS</a></li>
</ul>
</div>
결과보기
cf. BS4 경우, .dropdown-menu-right 클래스 사용.
Dropup (드롭업)
※ .dropdown 클래스 대신, .dropup 클래스 사용. (나머진 동일)
<div class="dropup ">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
코딩언어
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">HTML</a></li>
<li><a class="dropdown-item" href="#">CSS</a></li>
<li><a class="dropdown-item" href="#">JS</a></li>
</ul>
</div>
결과보기
Dropdown Text (텍스트)
※ .dropdown-item 클래스 대신, dropdown-item-text 클래스 사용.
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
코딩언어
</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-text " href="#">TEXT 링크</a></li>
<li><span class="dropdown-item-text ">TEXT</span></li>
</ul>
</div>
</div>
결과보기
※ BS4와 동일
Dropdown Group Button (그룹버튼)
※ .dropdown 클래스 대신 .btn-group 클래스 사용.
<div class="btn-group">
<button type="button" class="btn btn-primary">HTML</button>
<button type="button" class="btn btn-primary">CSS</button>
<div class="btn-group ">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">빌더</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">그누보드</a></li>
<li><a class="dropdown-item" href="#">영카트</a></li>
</ul>
</div>
</div>
결과보기
Dropdown Vertical Group Button (수직그룹버튼)
※ 맨 외곽 .btn-group 클래스 대신 .btn-group-vertical 클래스 사용.
<div class="btn-group-vertical ">
<button type="button" class="btn btn-primary">HTML</button>
<button type="button" class="btn btn-primary">CSS</button>
<div class="btn-group ">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">빌더</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">그누보드</a></li>
<li><a class="dropdown-item" href="#">영카트</a></li>
</ul>
</div>
</div>
결과보기
최신댓글