Bootstrap 구성 요소 드롭다운 menu_javascript 기술 알아보기
- WBOY원래의
- 2016-05-16 15:48:281442검색
Bootstrap은 Twitter 엔지니어가 출시한 HTML, CSS 및 JAVASCRIPT를 기반으로 하는 간단하고 유연한 인기 프런트 엔드 프레임워크로, 라이브러리에 다양한 기능이 정의되어 있는 CSS 및 JS 라이브러리라고 상상할 수 있습니다. . 구성 요소 표시 효과 및 애니메이션.
.dropdown ——상위 요소를 드롭다운 메뉴 구성요소로 설정하고 하위 메뉴를 아래쪽으로 팝업합니다.
.dropup——상위 요소를 드롭다운 메뉴 구성요소로 설정하고 하위 메뉴를 팝업합니다.
.dropdown-toggle——버튼을 드롭다운 메뉴 토글 버튼으로 설정합니다.
.dropdown-menu——ul 요소를 드롭다운 메뉴로 설정합니다.
.dropdown-menu-right - 메뉴를 오른쪽으로 정렬합니다.
.pull-right - 메뉴 구성요소의 상위 요소를 오른쪽으로 정렬합니다.
.dropdown-header - 메뉴 항목에 제목을 추가합니다.
.divider——메뉴 항목 구분선을 추가합니다.
.disabled——해당 메뉴 항목을 비활성화합니다.
구현 코드는 다음과 같습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>CSS全局样式_下拉菜单</title> <link rel="stylesheet" href="bootstrap.min.css" type="text/css"> <script src="jquery-1.11.1.min.js"></script> <script src="bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="dropdown pull-right"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">中超Big4</li> <li><a href="#" role="menuitem">上海上港</a></li> <li><a href="#" role="menuitem">广州恒大</a></li> <li><a href="#" role="menuitem">山东鲁能</a></li> <li class="disabled"><a href="#" role="menuitem">北京国安</a></li> <li role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">中超5-8</li> <li><a href="#" role="menuitem">上海申花</a></li> <li><a href="#" role="menuitem">江苏舜天</a></li> <li><a href="#" role="menuitem">长春亚泰</a></li> <li><a href="#" role="menuitem">河南建业</a></li> </ul> </div> </div> </body> </html>
실현 효과:
위 내용은 이 기사의 전체 내용입니다. 부트스트랩 구성 요소를 사용하여 드롭다운 메뉴를 만드는 모든 사람에게 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.