기본 드롭 다운
드롭 다운 메뉴는 사용자가 미리 정의 된 목록에서 하나의 값을 선택할 수있는 토글 메뉴입니다 :
예
<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 A와 클래스를 <ul> 실제로 드롭 다운 메뉴를 구축 할 요소입니다.
드롭 다운 분배기
.divider 클래스는 얇은 수평 테두리 드롭 다운 메뉴 안에 별도의 링크에 사용된다 :
드롭 다운 헤더
.dropdown-header 클래스는 드롭 다운 메뉴 내부 헤더를 추가하는 데 사용됩니다 :
아이템을 사용하지 않도록 설정
드롭 다운 메뉴에서 항목을 사용하지 않으려면 사용 .disabled 클래스를 :
드롭 다운 위치
에 추가 드롭 다운을 마우스 오른쪽 정렬 .dropdown-menu-right .dropdown 메뉴와 요소에 클래스를 :
Dropup
당신이 드롭 다운 메뉴는, 대신에 아래의 위쪽으로 확장 변경하려면 <div> 와 요소 class="dropdown" 에 "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> »그것을 자신을 시도 연습으로 자신을 테스트!
부트 스트랩 드롭 다운 참조 완료
모든 드롭 다운 옵션, 방법 및 이벤트의 완전한 참고로, 우리로 이동 부트 스트랩 JS 드롭 다운 참조 .