Tutorial básico do Bootstrap

Plugin Bootstrap

Plugin de Escaneamento de Rolagem Bootstrap Plugin de Janela Modais Bootstrap

Plugin de menu suspenso (Dropdown) do Bootstrap

Menu Suspensível Bootstrap Este capítulo explica o menu suspenso, mas não aborda a parte de interação. Este capítulo explicará detalhadamente a interação do menu suspenso. Usando o plugin de menu suspenso (Dropdown) do Bootstrap, você pode adicionar um menu suspenso a qualquer componente (por exemplo, barra de navegação, pílulas, menu de navegação em capsulas, botões, etc.).

Se você deseja citar funcionalidades específicas do plugin separadamente, você precisa citar dropdown.jsOu, como Visão geral dos plugins Bootstrap Como mencionado no capítulo, você pode citar 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
```

Exemplos Online

在导航栏内

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

Exemplos Online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo 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="#">Site de Tutoriais Básicos</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="#">Link Separado</a></li>
					<li class="divider"></li>
					<li><a href="#">Outro link separado</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>
</nav>
</body>
</html>

Teste e Veja ‹/›

Os resultados são exibidos conforme mostrado a seguir:

在标签页内

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

Exemplos Online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo 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="#">Link Separado</a></li>
		</ul>
	</li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

Teste e Veja ‹/›

Os resultados são exibidos conforme mostrado a seguir:

Opções

Sem opções.

Método

A troca do menu suspenível tem um método simples para mostrar ou ocultar o menu suspenível.

$().dropdown('toggle')

Exemplos Online

Os seguintes exemplos demonstram a utilização do método do plugin de menu suspenível (dropdown):

Exemplos Online

Exemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Exemplo Bootstrap<　-　Métodos do Plugin de Menu Suspensível (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="#">Site de Tutoriais Básicos</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="#">Link Separado</a></li>
					<li class="divider"></li>
					<li><a href="#">Outro link separado</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>	
</nav>
<script>
$(function(){
	//　mostrar por padrão
	$(".dropdown-toggle").dropdown('toggle');
});　
</script>
</body>
</html>

Teste e Veja ‹/›

Os resultados são exibidos conforme mostrado a seguir:

Plugin de Escaneamento de Rolagem Bootstrap Plugin de Janela Modais Bootstrap