목차
- Dropdown 기본
- Dropdown Divider (메뉴구분)
- Dropdown Header (머리말)
- Dropdown Active (활성화) / Disable (비활성화)
- Dropdown Position (위치)
- Dropdown Menu Right (오른쪽하단)
- Dropup (드롭업)
- Dropdown Text (텍스트)
- Dropdown Group Button (그룹버튼)
- Dropdown Split Button (분리버튼)
- Dropdown Vertical Group Button (수직그룹버튼)
- Dropdown 종합 예제
- Dropdown 예제 - 버튼그룹 (가로/세로)
- Dropdown 예제 - 스플릿버튼 드롭다운
Dropdown 기본
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
코딩언어
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">HTML</a>
<a class="dropdown-item" href="#">CSS</a>
<a class="dropdown-item" href="#">JS</a>
</div>
</div>
예제보기
Dropdown Divider (메뉴구분)
<div class="dropdown-divider"></div>
예제보기
Dropdown Header (머리말)
<div class="dropdown-header">앞단 코딩언어</div>
예제보기
Dropdown Active (활성화) / Disable (비활성화)
<a class="dropdown-item active" href="#">링크 활성화</a>
<a class="dropdown-item disabled" href="#">링크 비활성화</a>
Dropdown Position (위치)
버튼 우측에 드롭다운: <div class="dropdown dropright">
버튼 좌측에 드롭다운: <div class="dropdown dropleft">
예제보기
Dropdown Menu Right (오른쪽하단)
<div class="dropdown-menu dropdown-menu-right">
예제보기
Dropup (드롭업)
<div class="dropup">
예제보기
Dropdown Text (텍스트)
<div class="dropdown-menu">
<a class="dropdown-item" href="#">링크1</a>
<a class="dropdown-item" href="#">링크2</a>
<a class="dropdown-item-text" href="#">Text 링크</a>
<span class="dropdown-item-text">Text</span>
</div>
예제보기
Dropdown Group Button (그룹버튼)
<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-toggle="dropdown">
빌더
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">그누보드</a>
<a class="dropdown-item" href="#">영카트</a>
</div>
</div>
</div>
예제보기
Dropdown Split Button (분리버튼)
<div class="btn-group">
<button type="button" class="btn btn-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="#">링크 1</a>
<a class="dropdown-item" href="#">링크 2</a>
</div>
</div>
예제보기
Dropdown Vertical Group Button (수직그룹버튼)
<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-toggle="dropdown">버튼3</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
예제보기
Dropdown 종합 예제
<div class="dropdown dropright">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
코딩언어
</button>
<div class="dropdown-menu dropdown-menu-right">
<h5 class="dropdown-header">브라우저 언어</h5>
<a class="dropdown-item" href="#">HTML</a>
<a class="dropdown-item" href="#">CSS</a>
<a class="dropdown-item-text" href="#">JS</a>
<span class="dropdown-item-text">JQ</span>
<a class="dropdown-item active" href="#">BS</a>
<div class="dropdown-divider"></div>
<h5 class="dropdown-header">서버 언어</h5>
<a class="dropdown-item " href="#">PHP</a>
<a class="dropdown-item disabled" href="#">SQL</a>
</div>
결과보기
[dropdown 클래스 교체]
dropup 클래스 : 드롭업메뉴 (= 무조건 위로 드롭)
(예) <div class="dropup">
btn-group 클래스 : 버튼그룹 (아래예제참고)
[dropdown 클래스 옆]
[드롭다운 위치]
클래스 없는 경우 : 아래로 드롭다운. (아래 공간 부족 시, 위로 드롭)
dropright 클래스 : 오른쪽에 드롭다운
dropleft 클래스 : 왼쪽에 드롭다운
[dropdown-toggle 클래스 옆]
dropdown-toggle-split 클래스 : 스클릿버튼 드롭다운
[dropdown-menu 클래스 옆]
[드롭다운메뉴 정렬]
클래스 없는 경우 : 드롭다운메뉴 왼쪽정렬
dropdown-menu-right 클래스 : 드롭다운메뉴 오른쪽정렬
[소메뉴간 사이]
dropdown-divider 클래스 : 드롭다운 소메뉴 구분선
[dropdown-item 클래스 대체]
dropdown-item-text 클래스 : 소메뉴링크 또는 단순텍스트 (아래예제참고)
[dropdown-item 클래스 옆]
active 클래스 : 메뉴강조 (파란색배경)
disabled 클래스 : 비활성화 (=클릭방지)
Dropdown 예제 - 버튼그룹 (가로/세로)
<div class="btn-group">
<button type="button" class="btn btn-primary">빌더</button>
<button type="button" class="btn btn-primary">서버</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
코딩언어
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">HTML</a>
<a class="dropdown-item" href="#">CSS</a>
</div>
</div>
</div>
[btn-group 클래스 대체]
btn-group-vertical 클래스 : 세로 버튼그룹 드롭다운
[dropdown 클래스 대체]
btn-group 클래스 : 버튼그룹 안에 사용할 땐, dropdown 클래스 대신 btn-group 클래스 사용.
Dropdown 예제 - 스플릿버튼 드롭다운
<div class="btn-group">
<button type="button" class="btn btn-primary">빌더</button>
<button type="button" class="btn btn-primary">서버</button>
<div class="btn-group">
<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="#">HTML</a>
<a class="dropdown-item" href="#">CSS</a>
</div>
</div>
</div>