Tutoriales básicos de Bootstrap

plugins de Bootstrap

Grupo de botones de Bootstrap Iconos de fuentes (Glyphicons) de Bootstrap

Menú desplegable de Bootstrap

Este capítulo se centrará en los menús desplegables de Bootstrap. Los menús desplegables son menús que se pueden activar y desactivar, mostrando enlaces en formato de lista. Esto se puede lograr mediante Plugin JavaScript para menú desplegable (Dropdown) para su interacción.

Para usar el menú desplegable, simplemente en la clase .dropdown Agregar un menú desplegable. A continuación, se muestra un ejemplo básico de menú desplegable:

在线示例

Ejemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　Menú desplegable (Dropdowns)</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>
<div　class="dropdown">
	<button　type="button"　class="btn　dropdown-toggle"　id="dropdownMenu1"　
			data-toggle="dropdown">
		主题
		<span　class="caret"></span>
	</button>
	<ul　class="dropdown-menu"　role="menu"　aria-labelledby="dropdownMenu1">
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">Java</a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">数据挖掘</a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">数据通信/网络</a>
		</li>
		<li　role="presentation"　class="divider"></li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">分离的链接</a>
		</li>
	</ul>
</div>
</body>
</html>

测试看看 ‹/›

如所示结果：

Opción

Alinear

A través de .dropdown-menu Agregar clase .pull-right Alinear a la derecha el menú desplegable. A continuación, se muestra un ejemplo que ilustra esto:

在线示例

Ejemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　Alinear a la derecha el menú desplegable</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>
<div　class="dropdown">
	<button　type="button"　class="btn　dropdown-toggle"　id="dropdownMenu1"　
			data-toggle="dropdown">Tema
		<span　class="caret"></span>
	</button>
	<ul　class="dropdown-menu　pull-right"　role="menu"　
		aria-labelledby="dropdownMenu1">
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">Java</a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">数据挖掘</a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">数据通信/网络</a>
		</li>
		<li　role="presentation"　class="divider"></li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">分离的链接</a>
		</li>
	</ul>
</div>
</body>
</html>

测试看看 ‹/›

如所示结果：

标题

您可以使用 class dropdown-header 向下拉菜单的标签区域添加标题。下面的示例演示了这点：

在线示例

Ejemplo

!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>
<div　class="dropdown">
	<button　type="button"　class="btn　dropdown-toggle"　id="dropdownMenu1"　
			data-toggle="dropdown">
		主题
		<span　class="caret"></span>
	</button>
	<ul　class="dropdown-menu"　role="menu"　aria-labelledby="dropdownMenu1">
		<li　role="presentation"　class="dropdown-header">下拉菜单标题</li>
		<li　role="presentation"　>
			<a　role="menuitem"　tabindex="-1"　href="#">Java</a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">数据挖掘</a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">
				数据通信/网络
			</a>
		</li>
		<li　role="presentation"　class="divider"></li>
		<li　role="presentation"　class="dropdown-header">下拉菜单标题</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">分离的链接</a>
		</li>
	</ul>
</div>
</body>
</html>

测试看看 ‹/›

如所示结果：

Más ejemplos

Clase	Descripción	Ejemplo
.dropdown	Especificar el menú desplegable, todos los menús desplegables están envueltos en .dropdown	Prueba
.dropdown-menu	Crear un menú desplegable	Prueba
.dropdown-menu-right	Alinear a la derecha el menú desplegable	Prueba
.dropdown-header	Agregar un título al menú desplegable	Prueba
.dropup	Especificar un menú desplegable que se abre hacia arriba	Prueba
.disabled	Elemento inhabilitado en el menú desplegable	Prueba
.divider	Línea de división en el menú desplegable	Prueba

Grupo de botones de Bootstrap Iconos de fuentes (Glyphicons) de Bootstrap