이 장에서는 부트 스트랩 드롭 다운 메뉴에 중점을 둡니다. 드롭 다운 메뉴는 전환 가능하며 링크를 목록 형식으로 표시하는 컨텍스트 메뉴입니다. 드롭 다운 메뉴 (드롭 다운) JavaScript 플러그인과의 상호 작용을 통해 달성 할 수 있습니다.
다음 메뉴를 사용하려면 클래스 .Dropdown에서 드롭 다운 메뉴를 추가하십시오. 다음 예제는 기본 드롭 다운 메뉴를 보여줍니다.
<! docType html> <html> <head> <Head> <title> bootstrap 인스턴스 - 드롭 다운 메뉴 (드롭 다운) </title> <link href = "/bootstrap/css/bootstrap.min.css"rel = "stylesheet"> <script src = "/jquery.min.js"> src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div> <버튼 유형 = "버튼"id = "dropdownmenu1"dropdown "> 교육 <span> </span> </button> <ul 역할 ="menit ""dropdownmenu1 "> <li role =" "" "" "". tabindex = "-1"href = "#"> java </a> </li> <li 역할 = "프레젠테이션"> <A 역할 = "menuitem"tabindex = "-1"href = "#"> 데이터 마이닝 </a> <li 역할 = "프리젠 테이션"> roble = "menuit"tabindex = "-1" "#"#"#"#"#"#"href = 커뮤니케이션/네트워크 </a> </li> <li 역할 = "프레젠테이션"> </li> <li 역할 = "프레젠테이션"> <A 역할 = "menuitem"tabindex = "-1"href = "#"> 분리 된 링크 </a> </ul> </ul> </div> </body> </html>
결과는 다음과 같습니다.
부트 스트랩 드롭 다운 메뉴 옵션
부트 스트랩 드롭 다운 메뉴 정렬
.pull-right를 .dropdown-menu에 추가하여 드롭 다운 메뉴를 바로 정렬하십시오. 다음 예는 이것을 보여줍니다.
<! docType html> <html> <head> <title> bootstrap 인스턴스-오른쪽 정렬 드롭 다운 메뉴 </title> <link href = "/bootstrap/css/bootstrap.min.css"rel = "stylesheet"> <script src = "/scripts/jquery.min.js"> </script> < src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div> <버튼 유형 = "버튼"id = "dropdownMenu1"dropDight "> topic <span> </span> </button> <ul 역할 ="arria-labelledby = "dropdownmenu1"> <li 역할 = "" "" "" "" "" "" "" ". tabindex = "-1"href = "#"> java </a> </li> <li 역할 = "프레젠테이션"> <A 역할 = "menuitem"tabindex = "-1"href = "#"> 데이터 마이닝 </a> <li 역할 = "프리젠 테이션"> roble = "menuit"tabindex = "-1" "#"#"#"#"#"#"href = 커뮤니케이션/네트워크 </a> </li> <li 역할 = "프레젠테이션"> <A 역할 = "프레젠테이션"> <A 역할 = "menuitem"tabindex = "-1"href = "#"> 분리 된 링크 </a> </li> </ul> </div> </html>
결과는 다음과 같습니다.
부트 스트랩 드롭 다운 메뉴 제목
클래스 드롭 다운 헤더를 사용하여 드롭 다운 메뉴의 레이블 영역에 제목을 추가 할 수 있습니다. 다음 예는 이것을 보여줍니다.
<! docType html> <html> <head> <title> bootstrap 예제 - 드롭 다운 메뉴 제목 </title> <link href = "/bootstrap/css/bootstrap.min.css"rel = "stylesheet"> <script "/scripts/jquery.min.js"> src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div> <버튼 유형 = "버튼"id = "dropdownMenu1"dropDight "> topic <span> </span> </button> <ul 역할 ="menu "arriabelledby ="dropdownmenu1 "> <li role =" "" "" title </li> <li role = "presentation"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> java </a> </li> <li role = "presentation"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 데이터 채굴 </a <li 역할 = "<"hree = ""hree = ""href = "href ="#"> data mining tabindex = "-1"href = "#"> 데이터 통신/네트워크 </a> </li> <li 역할 = "프레젠테이션"> </li> <li 역할 = "프리젠 테이션"> 드롭 다운 메뉴 제목 </li> <li 역할 = "프레젠테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> disased 링크 </a> </li> </ul> </div> </body> </html>
결과는 다음과 같습니다.
위는 편집기가 소개 한 부트 스트랩 레이아웃 구성 요소 자습서의 부트 스트랩 드롭 다운 메뉴에 대한 관련 지식입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!