English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriales básicos de Bootstrap

Plugins de Bootstrap

Elementos de navegación de Bootstrap

En este capítulo, explicaremos algunas opciones que Bootstrap proporciona para definir elementos de navegación. Utilizan la misma etiqueta y clase base .nav.Bootstrap también proporciona una clase auxiliar para compartir etiquetas y estado. Cambiando la clase adornada, se puede cambiar entre diferentes estilos.

Navegación de tabla o etiqueta

Crear un menú de navegación con etiquetas:

  • Agregar una class .nav la lista desordenada.

  • Añadir class .nav-tabs.

hacer que los menús de navegación en forma de etiqueta o cápsula tengan el mismo ancho que el elemento padre. En pantallas más pequeñas, los enlaces de navegación se apilarán.

Ejemplo en línea

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Ejemplo　-　标签式的导航菜单Ver la prueba ‹/›

El resultado se muestra a continuación:

<p>Menú de navegación en forma de etiqueta<

Menú de navegación en forma de cápsula

Menú de navegación en forma de cápsula básico .nav-pills Si necesita cambiar la etiqueta al estilo de cápsula, solo necesita usar class .nav-tabs reemplazado por

hacer que los menús de navegación en forma de etiqueta o cápsula tengan el mismo ancho que el elemento padre. En pantallas más pequeñas, los enlaces de navegación se apilarán.

Ejemplo en línea

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Ejemplo　-　es suficiente, los otros pasos son los mismos que los anteriores./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>
Menú de navegación en forma de cápsula básico</p>
<ul class="nav nav-pills">
	<li class="active"><a href="#">Inicio</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
Ver la prueba ‹/›

El resultado se muestra a continuación:

<p>Menú de navegación en forma de cápsula básico<

Menú de navegación en forma de cápsula vertical o-pills .nav, .nav .nav-stackedPuede usar class

hacer que los menús de navegación en forma de etiqueta o cápsula tengan el mismo ancho que el elemento padre. En pantallas más pequeñas, los enlaces de navegación se apilarán.

Ejemplo en línea

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Ejemplo　-　para que las cápsulas se apilen verticalmente./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>
Menú de navegación en forma de cápsula vertical</p>
<ul class="nav nav-<p>Elementos de navegación alineados por ambos lados<-<p>Menú de navegación en forma de cápsula vertical<
	<li class="active"><a href="#">Inicio</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
Ver la prueba ‹/›

El resultado se muestra a continuación:

apilados">

navegación alineada por ambos lados 768Puede hacer que los elementos de navegación alineados por ambos lados se muestren cuando la anchura de la pantalla sea mayor que o-tabs px, pasando a usar o-pills .nav, .nav .nav-justifiedal mismo tiempo utilizando class

hacer que los menús de navegación en forma de etiqueta o cápsula tengan el mismo ancho que el elemento padre. En pantallas más pequeñas, los enlaces de navegación se apilarán.

Ejemplo en línea

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Ejemplo　-　el siguiente ejemplo demuestra esto:/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>
Elementos de navegación alineados por ambos lados</p>
<ul class="nav nav-<p>Elementos de navegación alineados por ambos lados<-nav tabs
	<li class="active"><a href="#">Inicio</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</nav pills
<ul class="nav nav-<ul><br><br><br>-nav tabs
	<li class="active"><a href="#">Inicio</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
Ver la prueba ‹/›

El resultado se muestra a continuación:

justificado">

enlace deshabilitado .nav para cada .disabled class, si se agrega class, se creará un enlace gris y se deshabilitará el enlace :hover

Ejemplo en línea

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Ejemplo　-　estado, como se muestra en el siguiente ejemplo:/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>Enlaces deshabilitados en los elementos de navegación</p>
<ul class="nav nav-pills">
	<li class="active"><a href="#">Inicio</a></li>
	<li><a href="#">SVN</a></li>
	<li class="disabled"><a href="#">iOS (enlace deshabilitado)</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</<ul><br><br>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">Inicio</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li class="disabled"><a href="#">VB.Net (enlace deshabilitado)</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>	
</body>
</html>
Ver la prueba ‹/›

El resultado se muestra a continuación:

Esta clase solo cambia el aspecto de <a>, sin afectar su funcionalidad. Aquí, necesitará usar JavaScript personalizado para deshabilitar los enlaces.

menú desplegable

El menú desplegable utiliza una sintaxis similar a la del menú de navegación. Por defecto, los elementos de la lista se combinan con ciertas propiedades de datos para activar los vínculos con .dropdown-menu class de la lista desordenada.

etiquetas con menú desplegable

Los pasos para agregar un menú desplegable a las etiquetas son los siguientes:

  • Agregar una class .nav la lista desordenada.

  • Añadir class .nav-tabs.

  • Añadir con .dropdown-menu class de la lista desordenada.

Ejemplo en línea

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Ejemplo　-　<etiquetas con 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>
<p>etiquetas con menú desplegable</p>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">Inicio</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="#">Enlace separado</a></li>
		</ul>
	</li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
Ver la prueba ‹/›

El resultado se muestra a continuación:

capsulas con menú desplegable

Los pasos son los mismos que para crear una etiqueta con un menú desplegable, solo que se necesita cambiar .nav-tabs class cambiado por .nav-pillscomo se muestra en el siguiente ejemplo:

Ejemplo en línea

!DOCTYPE html
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Ejemplo　-　Cápsula con 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>
<p>Cápsula con menú desplegable</p>
<ul class="nav nav-pills">
	<li class="active"><a href="#">Inicio</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="#">Enlace separado</a></li>
		</ul>
	</li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
Ver la prueba ‹/›

El resultado se muestra a continuación:

Más ejemplos de componentes de elementos de navegación

Pestañas y pestañas en forma de cápsula

ClaseDescripciónEjemplo
.nav nav-tabsPestañasPrueba
.nav nav-pillsPestañas en forma de cápsulaPrueba
.nav nav-pills nav-stackedPestañas en forma de cápsula apiladas verticalmentePrueba
.nav-justifiedPestañas alineadas a ambos lados, en más grande que 768pantallas de px, a través de .nav-La clase 'justified' permite fácilmente que las pestañas o las etiquetas en forma de cápsula tengan el mismo ancho. En las pantallas pequeñas, los enlaces de navegación se presentan en estilo apilado.Prueba
.disabledPestaña de etiquetas deshabilitadaPrueba
Añadir menú desplegable de etiquetasPrueba
Pestañas en forma de cápsula con menú desplegablePrueba
.tab-contentjunto con .tab-pane y data-usar toggle="tab" (data-usar toggle="pill" ) junto con, establecer el contenido de la pestaña correspondiente para cambiar con el cambio de la pestañaPrueba
.tab-panejunto con .tab-content y data-usar toggle="tab" (data-usar toggle="pill" junto con, establecer el contenido de la pestaña correspondiente para cambiar con el cambio de la pestañaPrueba
Barra de navegación de BootstrapGrupo de campos de entrada de Bootstrap