부트 스트랩 드롭 다운 메뉴
이 장에서는 부트 스트랩 드롭 다운 메뉴에 초점을 맞출 것이다. 드롭 다운 메뉴는 링크 목록 형식 컨텍스트 메뉴에 표시됩니다, 전환된다. 이 작업은 함께 할 수있는 플러그인이 자바 스크립트 풀다운 메뉴 (드롭 다운) 달성하기 위해 상호 작용하는.
다음 메뉴를 사용하려면, 당신은 단지클래스 .dropdown의 드롭 다운 메뉴를 추가해야합니다.다음의 예는 기본 메뉴를 예시한다 :
예
<사업부 클래스 = "드롭 다운">
<버튼 = "버튼"을 입력 클래스 = "BTN 드롭 다운-전환" ID = "dropdownMenu1" 데이터 전환 = "드롭 다운"> 테마 <스팬 클래스 = "캐럿"> </ SPAN>
</ 버튼>
<UL 클래스 = "드롭 다운 메뉴" 역할 = "메뉴" 아리아 - labelledby = "dropdownMenu1">
<리 역할 = "프리젠 테이션">
<A 역할 = "메뉴 항목" 모두 tabIndex = "-1" HREF = "#"> 자바 < / A>
</ 리>
<리 역할 = "프리젠 테이션">
<A 역할 = "메뉴 항목" 모두 tabIndex = "-1" HREF = "#"> 데이터 마이닝 </ A>
</ 리>
<리 역할 = "프리젠 테이션">
<A 역할 = "메뉴 항목" 모두 tabIndex = "-1" HREF = "#"> 데이터 통신 / 네트워크 </ A>
</ 리>
<리 역할 = "프리젠 테이션" 클래스 = "분배기"> </ 리>
<리 역할 = "프리젠 테이션">
<A 역할 = "메뉴 항목" 모두 tabIndex = "-1" HREF = "#"> 고립 링크 </ A>
</ 리>
</ UL>
</ DIV>
»시도
결과는 다음과 같다 :
옵션
정렬
오른쪽에있는 드롭 다운 메뉴를 정렬메뉴를 .dropdown하는 클래스.pull 오른쪽을 추가하여. 다음의 예는이 점을 보여
예
<사업부 클래스 = "드롭 다운">
<버튼 = "버튼"을 입력 클래스 = "BTN 드롭 다운-전환" ID = "dropdownMenu1" 데이터 전환 = "드롭 다운"> 테마 <스팬 클래스 = "캐럿"> </ SPAN>
</ 버튼>
<UL 클래스 = "드롭 다운 메뉴를 풀다운 권리" 역할 = "메뉴" 아리아 - labelledby = "dropdownMenu1">
<리 역할 = "프리젠 테이션">
<A 역할 = "메뉴 항목" 모두 tabIndex = "-1" HREF = "#"> 자바 < / A>
</ 리>
<리 역할 = "프리젠 테이션">
<A 역할 = "메뉴 항목" 모두 tabIndex = "-1" HREF = "#"> 데이터 마이닝 </ A>
</ 리>
<리 역할 = "프리젠 테이션">
<A 역할 = "메뉴 항목" 모두 tabIndex = "-1" HREF = "#"> 데이터 통신 / 네트워크 </ A>
</ 리>
<리 역할 = "프리젠 테이션" 클래스 = "분배기"> </ 리>
<리 역할 = "프리젠 테이션">
<A 역할 = "메뉴 항목" 모두 tabIndex = "-1" HREF = "#"> 고립 링크 </ A>
</ 리>
</ UL>
</ DIV>
»시도
결과는 다음과 같다 :
표제
당신은 레이블 영역 드롭 다운 메뉴에 타이틀을 추가 할클래스 드롭 다운 헤더를 사용할 수 있습니다.다음의 예는이 점을 보여
예
<사업부 클래스 = "드롭 다운">
<버튼 = "버튼"을 입력 클래스 = "BTN 드롭 다운-전환" ID = "dropdownMenu1" 데이터 전환 = "드롭 다운"> 테마 <스팬 클래스 = "캐럿"> </ SPAN>
</ 버튼>
<UL 클래스 = "드롭 다운 메뉴" 역할 = "메뉴" 아리아 - labelledby = "dropdownMenu1">
<리 역할 = "프리젠 테이션" 클래스 = "드롭 다운 헤더"> 드롭 다운 메뉴 제목 </ 리>
<리 역할 = "프리젠 테이션">
<A 역할 = "메뉴 항목" 모두 tabIndex = "-1" HREF = "#"> 자바 < / A>
</ 리>
<리 역할 = "프리젠 테이션">
<A 역할 = "메뉴 항목" 모두 tabIndex = "-1" HREF = "#"> 데이터 마이닝 </ A>
</ 리>
<리 역할 = "프리젠 테이션">
<A 역할 = "메뉴 항목" 모두 tabIndex = "-1" HREF = "#"> 데이터 통신 / 네트워크 </ A>
</ 리>
<리 역할 = "프리젠 테이션" 클래스 = "분배기"> </ 리>
<리 역할 = "프리젠 테이션" 클래스 = "드롭 다운 헤더"> 드롭 다운 메뉴 제목 </ 리>
<리 역할 = "프리젠 테이션">
<A 역할 = "메뉴 항목" 모두 tabIndex = "-1" HREF = "#"> 고립 링크 </ A>
</ 리>
</ UL>
</ DIV>
»시도
결과는 다음과 같다 :
더 많은 예제
| 범주 | 기술 | 예 |
|---|---|---|
| .dropdown | 풀다운 메뉴, 드롭 다운 메뉴는 .dropdown 레인에 싸여있다 지정 | 시험 |
| .dropdown 메뉴 | 드롭 다운 메뉴 만들기 | 시험 |
| .dropdown 메뉴 오른쪽 | 드롭 다운 메뉴는 오른쪽 정렬 | 시험 |
| .dropdown 헤더 | 드롭 다운 메뉴에서 제목을 추가하려면 | 시험 |
| .dropup | 팝업 드롭 다운 메뉴를 지정합니다 | 시험 |
| .disabled | 드롭 다운 메뉴 항목이 비활성화 | 시험 |
| .divider | 드롭 다운 메뉴의 분할 선 | 시험 |