Tutoriales básicos de Bootstrap

Complemento de Bootstrap

Complemento de escucha de desplazamiento de Bootstrap Complemento de cuadro de diálogo de Bootstrap

Complemento (Dropdown) de Bootstrap

Menú desplegable de Bootstrap Este capítulo explica el menú desplegable, pero no la parte de interacción. Este capítulo explicará específicamente la interacción del menú desplegable. Al usar el complemento de menú desplegable (Dropdown) de Bootstrap, puede agregar un menú desplegable a cualquier componente (como la barra de navegación, las pestañas, el menú de navegación en cápsula, los botones, etc.).

Si desea citar funcionalidades del complemento por separado,则需要引用 dropdown.jso, como Resumen de complementos Bootstrap Como se mencionó en el capítulo, puede 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
```

Ejemplo en línea

在导航栏内

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

Ejemplo en línea

Ejemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title> Ejemplo de 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="#">Sitio web de tutoriales básicos<a>/a>
	</div>
	<div>
		<ul　class="nav　navbar-nav">
			<li　class="active"><a　href="#">iOS<a>/a></li>
			<li><a　href="#">SVN<a>/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>/a></li>
					<li><a　href="#">Jasper Report<a>/a></li>
					<li　class="divider"></li>
					<li><a　href="#">separado <a>/a></li>
					<li　class="divider"></li>
					<li><a href="#">Otro enlace separado</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>
</nav>
</body>
</html>

Prueba aquí ‹/›

Los resultados se muestran a continuación:

在标签页内

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

Ejemplo en línea

Ejemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title> Ejemplo de 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>/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>/a></li>
			<li　class="divider"></li>
			<li><a　href="#">separado <a>/a></li>
		</ul>
	</li>
	<li><a　href="#">PHP<a>/a></li>
</ul>
</body>
</html>

Prueba aquí ‹/›

Los resultados se muestran a continuación:

Opciones

Sin opciones.

Método

El cambio de menú desplegable tiene un método simple para mostrar u ocultar el menú desplegable.

$().dropdown('toggle')

Ejemplo en línea

Los siguientes ejemplos demuestran el uso del método del complemento de menú desplegable (Dropdown):

Ejemplo en línea

Ejemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title> Ejemplo de Bootstrap<　-　métodos del complemento de menú desplegable (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="#">Sitio web de tutoriales básicos<a>/a>
	</div>
	<div　id="myexample">
		<ul　class="nav　navbar-nav">
			<li　class="active"><a　href="#">iOS<a>/a></li>
			<li><a　href="#">SVN<a>/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="#">medidor<a>/a></li>
					<li><a　href="#">EJB<a>/a></li>
					<li><a　href="#">Jasper Report<a>/a></li>
					<li　class="divider"></li>
					<li><a　href="#">separado <a>/a></li>
					<li　class="divider"></li>
					<li><a href="#">Otro enlace separado</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>	
</nav>
<script>
$(function(){
	//　mostrado por defecto
	$(".dropdown-toggle").dropdown('toggle');
});　
</script>
</body>
</html>

Prueba aquí ‹/›

Los resultados se muestran a continuación:

Complemento de escucha de desplazamiento de Bootstrap Complemento de cuadro de diálogo de Bootstrap