부트스트랩 드롭다운
기본 드롭다운
드롭다운 메뉴는 사용자가 미리 정의된 목록에서 하나의 값을 선택할 수 있는 토글 가능한 메뉴입니다.
예시
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
예시 설명
클래스 는 .dropdown드롭다운 메뉴를 나타냅니다.
드롭다운 메뉴를 열려면 의 클래스 .dropdown-toggle와
data-toggle="dropdown"속성이 있는 버튼이나 링크를 사용합니다.
클래스 는 .caret캐럿 화살표 아이콘(), 이는 버튼이 드롭다운임을 나타냅니다.
실제로 드롭다운 메뉴를 빌드하려면 요소에 .dropdown-menu클래스를 추가 합니다.<ul>
드롭다운 디바이더
.divider클래스는 얇은 수평 테두리로 드롭다운 메뉴 내부의 링크를 분리하는 데 사용됩니다 .
예시
<li class="divider"></li>
드롭다운 헤더
.dropdown-header클래스는 드롭다운 메뉴 내에 헤더를 추가하는 데 사용됩니다 .
예시
<li class="dropdown-header">Dropdown header 1</li>
비활성화 및 활성 항목
.active 클래스로 특정 드롭다운 항목을 강조 표시합니다(파란색 배경색 추가).
드롭다운 메뉴에서 항목을 비활성화하려면 .disabled클래스를 사용합니다.
예시
<li class="disabled"><a href="#">CSS</a></li>
<li class="active"><a href="#">HTML</a></li>
드롭다운 위치
드롭다운을 오른쪽 정렬하려면 .dropdown-menu-right.dropdown-menu를 사용하여 요소에 클래스를 추가합니다.
예시
<ul class="dropdown-menu dropdown-menu-right">
드롭업
드롭다운 메뉴가 아래쪽이 아닌 위쪽으로 확장되도록 하려면 class="dropdown"이 있는 <div> 요소를 다음으로 변경합니다 "dropup".
예시
<div class="dropup">
드롭다운 접근성
스크린 리더를 사용하는 사람들의 접근성을 높이려면 드롭다운 메뉴를 만들 때 다음 role과 속성을 포함해야 합니다.aria-*
예시
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">About Us</a></li>
</ul>
</div>
전체 부트스트랩 드롭다운 참조
모든 드롭다운 옵션, 메서드 및 이벤트에 대한 전체 참조를 보려면 Bootstrap JS 드롭다운 참조 로 이동하십시오 .