Bootstrap Basic Tutorial

Bootstrap Plugin

Bootstrap Scrollspy Plugin Bootstrap Modal Plugin

Bootstrap Dropdown Menu (Dropdown) Plugin

Bootstrap Dropdown Menu This chapter explains the dropdown menu, but does not involve the interactive part. This chapter will specifically explain the interaction of the dropdown menu. By using the dropdown menu (Dropdown) plugin, you can add a dropdown menu to any component (such as navigation bar, tab, pill navigation menu, button, etc.).

If you want to quote the functionality of this plugin separately, then you need to quote dropdown.js. Or as Overview of Bootstrap Plugins As mentioned in the chapter, you can quote bootstrap.js or the compressed version of bootstrap.min.js。

Usage

You can toggle the hidden content of the Dropdown (Dropdown) plugin:

through the data attribute: Add data-toggle="dropdown" to switch the dropdown menu, as shown below:

<div>
　　<a data-toggle="dropdown" href="#">Dropdown Menu (Dropdown) Trigger</a>
　　<ul role="menu" aria-labelledby="dLabel">
　　　　...
　　</ul>
</div>

If you need to keep the link complete (useful when JavaScript is not enabled in the browser), please use data-target attribute instead of href="#":

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

Through JavaScript: Use the following method to switch the dropdown menu through JavaScript calls:
```
$('.dropdown-toggle').dropdown()
```

Online Example

Within the navigation bar

The following example demonstrates the usage of dropdown menus within the navigation bar:

Online Example

Example

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap Example<　-　Default navigation bar</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="#">Basic Tutorial Website</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="#">Separated link</a></li>
					<li　class="divider"></li>
					<li><a href="#">Another Separate Link</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>
</nav>
</body>
</html>

Test and see ‹/›

The results are as follows:

Within the tabs

The following example demonstrates the usage of dropdown menus within the tabs:

Online Example

Example

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap Example<　-　Tag pages with dropdown menus</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>Tag pages with dropdown menus</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="#">Separated link</a></li>
		</ul>
	</li>
	<li><a　href="#">PHP</a></li>
</ul>
</body>
</html>

Test and see ‹/›

The results are as follows:

Options

No options.

Methods

There is a simple method to toggle the dropdown menu to show or hide it.

$().dropdown('toggle')

Online Example

The following examples demonstrate the usage of the dropdown plugin methods:

Online Example

Example

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Bootstrap Example<　-　Dropdown Plugin Methods</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="#">Basic Tutorial Website</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="#">meter</a></li>
					<li><a　href="#">EJB</a></li>
					<li><a　href="#">Jasper Report</a></li>
					<li　class="divider"></li>
					<li><a　href="#">Separated link</a></li>
					<li　class="divider"></li>
					<li><a href="#">Another Separate Link</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>	
</nav>
<script>
$(function(){
	//　default display
	$('.dropdown-toggle()).dropdown('toggle');
});　
</script>
</body>
</html>

Test and see ‹/›

The results are as follows:

Bootstrap Scrollspy Plugin Bootstrap Modal Plugin