부트스트랩 드롭다운 메뉴


Bootstrap Dropdown 플러그인

Bootstrap 드롭다운 메뉴 이 장에서는 드롭다운 메뉴에 대해 설명하지만 상호 작용 부분은 다루지 않습니다. 이 장에서는 드롭다운 메뉴의 상호 작용에 대해 자세히 설명합니다. 드롭다운 플러그인을 사용하면 모든 구성 요소(예: 탐색 모음, 탭 페이지, 캡슐 탐색 메뉴, 버튼 등)에 드롭다운 메뉴를 추가할 수 있습니다.

이 플러그인의 기능을 별도로 참조하려면 dropdown.js를 참조해야 합니다. 또는 Bootstrap 플러그인 개요 장에서 언급한 대로 bootstrap.js 또는 bootstrap.min.js의 축소된 버전을 참조할 수 있습니다.

Usage

드롭다운 메뉴(드롭다운) 플러그인의 숨겨진 콘텐츠를 전환할 수 있습니다.

  • 데이터 속성을 통해: 링크나 버튼에 data-toggle="dropdown"을 추가하여 드롭다운을 전환하세요 메뉴, 아래와 같이 ：

<div class="dropdown">
<a data-toggle="dropdown" href="#">드롭다운 메뉴(드롭다운) 트리거</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>

  • 유지해야 하는 경우 링크가 그대로 유지되면(브라우저가 JavaScript를 활성화하지 않을 때 유용함) href="#" 대신 data-target 속성을 사용하세요.

<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
드롭다운 메뉴(드롭다운) <span class="caret "></span>
</a>


<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul> ;
</div>

  • via JavaScript: JavaScript를 통해 드롭다운 메뉴 토글을 호출하려면 다음 방법을 사용하세요:

$('.dropdown-toggle').dropdown ()

탐색 모음의 인스턴스

다음 예에서는 탐색 모음의 드롭다운 메뉴 사용을 보여줍니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 默认的导航栏</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Java 
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">jmeter</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="#">分离的链接</a></li>
               <li class="divider"></li>
               <li><a href="#">另一个分离的链接</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

</body>
</html>

인스턴스 실행»

"실행"을 클릭합니다. 인스턴스' 버튼을 누르면 온라인 예시를 볼 수 있습니다

탭 내

다음 예에서는 탭 내의 드롭다운 메뉴 사용을 보여줍니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 带有下拉菜单的标签页</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<p>带有下拉菜单的标签页</p>
<ul class="nav nav-tabs">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
         Java <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
         <li><a href="#">Swing</a></li>
         <li><a href="#">jMeter</a></li>
         <li><a href="#">EJB</a></li>
         <li class="divider"></li>
         <li><a href="#">分离的链接</a></li>
      </ul>
   </li>
   <li><a href="#">PHP</a></li>
</ul>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

옵션

옵션이 없습니다.

Method

드롭다운 메뉴 토글 드롭다운 메뉴를 표시하거나 숨기는 간단한 방법이 있습니다.

$().dropdown('toggle')

예

다음 예에서는 드롭다운 메뉴(드롭다운) 플러그인 방법의 사용을 보여줍니다.

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 下拉菜单（Dropdown）插件方法</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>

   <div id="myexample">
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Java <b 
               class="caret"></b></a>
               <ul class="dropdown-menu">
                  <li><a id="action-1" href="#">
                     jmeter</a>
                  </li>
                  <li><a href="#">EJB</a></li>
                  <li><a href="#">Jasper Report</a></li>
                  <li class="divider"></li>
                  <li><a href="#">分离的链接</a></li>
                  <li class="divider"></li>
                  <li><a href="#">另一个分离的链接</a></li>
               </ul>
            </li>
         </ul>
      </div>
   </nav>
</div>
<script>
   $(function(){
      $(".dropdown-toggle").dropdown('toggle');
      }); 
</script>

</body>
</html>

예 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요