드롭 다운 메뉴는 링크 목록의 토글 가능하고 상황에 맞는 메뉴를 표시하는 데 사용됩니다.
1. 케이스
드롭 다운 메뉴 트리거 및 드롭 다운 메뉴를 .DropDown에서 래핑 한 다음 메뉴를 구성하는 HTML 코드를 추가하십시오.
<div> <button type = "button"id = "dropdownmenu1"data-toggle = "dropdown"> dropdown "> dropdown <span> </span> </button> <ul 역할 ="menu "aria-labelledby ="dropdownmenu1 "> <li role ="presentation "> a 역할 ="menuitem "탭 역할 = "프레젠테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 또 다른 행동 </a> </li> <li 역할 = "프리젠 테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 여기에 다른 것 </a> </li> <li roal = "presitation"> <li> "" "" "" "" "" "". tabindex = "-1"href = "#"> 분리 된 링크 </a> </li> </ul> </div>
위의 코드를 통해 많은 낯선 스타일 클래스 나 속성이있을 수 있음을 찾을 수 있습니다.
오른쪽에는 드롭 다운 버튼과 작은 아이콘이 있습니다. 물론,이 작은 아이콘과 버튼의 텍스트는 같은 수준입니다.
먼저 버튼 버튼과 데이터 토글 속성에 드롭 다운 토글이 있음을 살펴 보겠습니다. 이 속성에 따라 목록이 나타납니다.
그 후 즉시 UL 레이블의 드롭 다운 메뉴는 위의 버튼의 스타일 클래스 드롭 다운 플레그와 함께 사용하고 위의 버튼을 aria-labelledby를 통해 바인딩해야합니다.
다음으로, 네 번째 Li 태그에는 실제로 선을 나누기위한 스타일 클래스 인 분배기가 있습니다.
어쩌면 나는 이런 식으로 이해하지만, 나는 그것을 제대로 이해하지 못한다.
2. 정렬 옵션
드롭 다운 메뉴에 .text-right를 추가하십시오. DROPDOWN-MENU 텍스트를 오른쪽으로 정렬하십시오.
<div> <button type = "button"id = "dropdownmenu1"data-toggle = "dropdown"> dropdown "> dropdown <span> </span> </button> <ul 역할 ="menu "aria-labelledby ="dropdownmenu1 "> <li role ="presentation "> a 역할 ="menuitem "탭 역할 = "프레젠테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 또 다른 행동 </a> </li> <li 역할 = "프리젠 테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 여기에 다른 것 </a> </li> <li roal = "presitation"> <li> "" "" "" "" "" "". tabindex = "-1"href = "#"> 분리 된 링크 </a> </li> </ul> </div>
위의 코드에서 UL 태그에 텍스트 오른쪽 스타일 클래스를 추가하십시오.
3. 제목
모든 드롭 다운 메뉴에 제목을 추가하여 작업 세트를 표시 할 수 있습니다.
<h1> 드롭 다운 메뉴 </h1> <div> <버튼 유형 = "버튼"id = "dropdownmenu1"data-toggle = "dropdown"> 드롭 다운 <span> </span> </button> <ul 역할 = "menu"aria-labelledby = "dropdownmenu1"> <li role = "prespord"> dropdown header </li> <li rocel = ""recone = "a roble" ". tabindex = "-1"href = "#"> action </a> </li> <li 역할 = "프레젠테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 또 다른 액션 </a> <li role = "프리젠 테이션"> role = "menuitem"tabindex = ""href = "#"#"" ""#""# 역할 = "프리젠 테이션"> </li> <li robol = "프레젠테이션"> 드롭 다운 헤더 </li> <li 역할 = "프레젠테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 분리 된 링크 </a> </li> </ul> </div>
가장 중요한 것은 <li role = "Presentation"> Dropdown Header </li>에 .dropdown-header 스타일 클래스를 추가하는 것입니다.
4. 비활성화 된 메뉴 항목
드롭 다운 메뉴에서 .disabled를 추가하여 링크를 비활성화하십시오.
위의 코드를 계속 수정하여 여기에서 다른 줄의 코드를 바꾸십시오.
다음과 같이 코드를 복사하십시오.
주로 LI 태그에 .disabled 스타일 클래스를 추가하십시오.
실행 한 후에는 효과를 볼 수 있습니다. 실제로 효과는 위의 타이틀 스타일과 유사합니다. 클릭하면 비활성화 된 아이콘이 표시됩니다.
5. 기본 사례
1) 버튼 타입 드롭 다운 메뉴
모든 버튼을 .BTN-Group에 넣고 올바른 메뉴 표시를 추가하여 드롭 다운 메뉴 트리거를 만듭니다.
단일 버튼 드롭 다운 메뉴
기본 표시를 변경하고 버튼을 드롭 다운 메뉴 스위치로 바꾸십시오.
<div> <버튼 유형 = "버튼"데이터-토글 = "드롭 다운"> 액션 <span> </span> </button> <ul 역할 = "menu"> <li> <a href = "#"> action </a> </li> <li> <a href = "#"> 다른 행동 </a> </li> <li> <a href = "#"> <li> <a href = "#"> 분리 된 링크 </a> </li> </ul> </div>
분할 버튼 풀다운 메뉴
마찬가지로 분할 버튼 드롭 다운 메뉴에는 동일한 변경 마크가 필요하지만 별도의 버튼이 하나만 필요합니다.
<div> <버튼 유형 = "button"> action </button> <div> <버튼 유형 = "버튼"data-toggle = "dropdown"> </span> </span> <span> 토글 드롭 다운 </span> </button> <ul 역할 = "메뉴"> <li> <a href = "#"> action </a> <li> <a href = "#"> ">"> ">"> ">"> href = "#"> 여기에 다른 것들 </a> </li> <li> </li> <li> <a href = "#"> 분리 된 링크 </a> </li> </div> </div
작은 아이콘 만 클릭하면 나타날 수 있습니다.
2) 크기
드롭 다운 메뉴 버튼은 모든 크기의 버튼에 적용됩니다.
<div> <버튼 유형 = "버튼"데이터-토글 = "드롭 다운"> 큰 버튼 <span> </span> </button> <ul> ... </ul> </div> <!-작은 버튼 그룹-> <div> <버튼 유형 = "button"data-toggle = "dropdown"> 작은 버튼 </span> </button> <ul> ... </ul> </ul> </ul> </ul> </ul> < data-toggle = "dropdown"> 추가 작은 버튼 <span> </span> </button> <ul> ... </ul> </div>
스타일 클래스 .btn-lg, .btn-sm 및 .btn-xs를 통해 버튼의 크기를 제어하십시오.
3) 상향 팝업 메뉴
부모 요소에 .Dropup을 추가하면 요소 위의 트리거 된 드롭 다운 메뉴가됩니다.
<div> <버튼 유형 = "버튼"> 드롭업 </button> <버튼 유형 = "버튼"Data-Toggle = "dropdown"> <span "> </span> <span> 토글 드롭 다운 </span> </button> <ul> <!-드롭 다운 메뉴 링크-> </ul> </div>
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
이 기사는 주로 드롭 다운 메뉴의 관련 내용을 소개 한 다음 버튼과 드롭 다운 메뉴의 조합을 소개합니다. 많은 변화가 있으며 스타일도 좋습니다. 나는 모두가 그것을 좋아하기를 바랍니다.