Bootstrap 基础教程

Bootstrap 插件

Bootstrap 스크롤 리스너 플러그인 Bootstrap 모달 플러그인

Bootstrap 下拉菜单（Dropdown）插件

Bootstrap 드롭다운 메뉴 这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单(Dropdown)插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。

如果您想要单独引用该插件的功能，那么您需要引用 dropdown.js。或者，正如 Bootstrap 插件概览一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

您可以切换下拉菜单(Dropdown)插件的隐藏内容：

通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单，如下所示：

<div>
　　<a　data-toggle="dropdown"　href="#">下拉菜单(Dropdown)触发器</a>
　　<ul　role="menu"　aria-labelledby="dLabel">
　　　　...
　　</ul>
</div>

如果您需要保持链接完整（在浏览器不启用 JavaScript 时有用），请使用 data-target 属性代替 href="#"：

<div>
　　<a　id="dLabel"　role="button"　data-toggle="dropdown"　data-target="#"　href="/page.html">
　　　　下拉菜单(Dropdown)　<span></span>
　　</a>
　　<ul　role="menu"　aria-labelledby="dLabel">
　　　　...
　　</ul>
</div>

通过 JavaScript：通过 JavaScript 调用下拉菜单切换，请使用下面的方法：
```
$('.dropdown-toggle').dropdown()
```

온라인 예제

在导航栏内

下面的示例演示了在导航栏内的下拉菜单的用法：

온라인 예제

예제

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　默认的导航栏</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav　class="navbar　navbar-default"　role="navigation">
	<div　class="container-fluid">　
	<div　class="navbar-header">
		<a　class="navbar-brand"　href="#">기본 튜토리얼 웹사이트</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>
	</div>
</nav>
</body>
</html>

테스트해보세요 ‹/›

결과는 다음과 같습니다:

在标签页内

下面的示例演示了在标签页内的下拉菜单的用法：

온라인 예제

예제

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　带有下拉菜单的标签页</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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>

테스트해보세요 ‹/›

결과는 다음과 같습니다:

옵션

옵션 없음

메서드

下拉菜单切换에는 간단한 메서드가 있습니다.下拉菜单을 보이거나 숨기는 데 사용됩니다。

$().dropdown('toggle')

온라인 예제

아래의 예제는下拉菜单(Dropdown)插件方法的用法을 보여줍니다：

온라인 예제

예제

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Bootstrap　示例　-　下拉菜单(Dropdown)插件方法</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav　class="navbar　navbar-default"　role="navigation">
	<div　class="container-fluid">　
	<div　class="navbar-header">
		<a　class="navbar-brand"　href="#">기본 튜토리얼 웹사이트</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="#">미터</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>
	</div>	
</nav>
<script>
$(function(){
	//　기본적으로 표시
	$(".dropdown-toggle").dropdown('toggle');
});　
</script>
</body>
</html>

테스트해보세요 ‹/›

결과는 다음과 같습니다:

Bootstrap 스크롤 리스너 플러그인 Bootstrap 모달 플러그인