부트스트랩 4 드롭다운
기본 드롭다운
드롭다운 메뉴는 사용자가 미리 정의된 목록에서 하나의 값을 선택할 수 있도록 하는 전환 가능한 메뉴다.
.dropdown 클래스는 드롭다운 메뉴를 나타낸다.
예제
드롭다운 메뉴를 열려면 .dropdown-toggle 클래스 및 data-toggle=”dropdown”속성이 포함된 버튼이나 링크를 사용하자.
드롭다운 메뉴를 실제로 구축하려면 <div> 요소에 .dropdown-menu 클래스를 추가하자.
그런 다음 드롭다운 메뉴 내의 각 요소(링크 또는 버튼)에 .dropdown-item 클래스를 추가한다.
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
드롭다운 구분
.dropdown-divider클래스는 드롭다운 메뉴 내부의 링크를 얇은 가로 테두리로 구분하는 데 사용된다.
예제
<div class="dropdown-divider"></div>
드롭다운 헤더
.dropdown-header클래스는 드롭다운 메뉴 내에 헤더를 추가하는 데 사용된다.
예제
<div class="dropdown-header">Dropdown header 1</div>
비활성화 및 활성 항목
.active 클래스로 특정 드롭다운 항목을 강조 표시한다.
드롭다운 메뉴에서 항목을 비활성화하려면 .disabled 클래스를 사용한다.
예제
<a class="dropdown-item active" href="#">Active</a> <a class="dropdown-item disabled" href="#">Disabled</a>
드롭다운 위치
드롭다운 요소에 .dropright 또는 .dropleft 클래스 를 추가하여 “dropright” 또는 “dropleft” 메뉴를 생성할 수도 있다.
캐럿/화살표는 자동으로 추가된다.
예제 1
<div class="dropdown dropright">
예제 2
<div class="dropdown dropleft">
드롭다운 메뉴 오른쪽
드롭다운 메뉴를 오른쪽 정렬하려면 .dropdown-menu를 사용하여 요소에 .dropdown-menu-right 클래스를 추가한다.
예제
<div class="dropdown-menu dropdown-menu-right">
드롭업
드롭다운 메뉴를 아래쪽이 아닌 위쪽으로 확장하려면 class=”dropdown”인
예제
<div class="dropup">
드롭다운 텍스트
.dropdown-item-text 클래스는 드롭다운 항목에 일반 텍스트를 추가하는 데 사용되거나 기본 링크 스타일을 위한 링크에 사용된다.
예제
<div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item-text" href="#">Text Link</a> <span class="dropdown-item-text">Just Text</span> </div>
드롭다운이 있는 그룹화된 버튼
예제
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
분할 버튼 드롭다운
예제
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div>
드롭다운이 있는 수직 버튼 그룹
예제
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
참고
