Tutoriales básicos de Bootstrap

Plugins de Bootstrap

Navegación de pan de navegación Bootstrap Elementos de navegación Bootstrap

Barra de navegación Bootstrap

La barra de navegación es una función excelente y una característica destacada del sitio web Bootstrap. La barra de navegación actúa como un componente básico de encabezado de navegación sensible en su aplicación o sitio web. En las vistas de dispositivos móviles, la barra de navegación está plegada y, a medida que aumenta el ancho de la ventana visible, la barra de navegación se expande horizontalmente. En el núcleo de la barra de navegación de Bootstrap, esta incluye el nombre del sitio y los estilos de definición básicos de navegación.

Barra de navegación predeterminada

Los pasos para crear una barra de navegación predeterminada son los siguientes:

Agregar una clase a la etiqueta <nav> .navbar, .navbar-default.
Agregar a los elementos anteriores role="navigation"ayuda a mejorar la accesibilidad.
Agregar una clase de título a los elementos <div> .navbar-headerque contiene una clase navbar-brand elemento <a>. Esto haría que el texto se viera un poco más grande.
Para agregar enlaces a la barra de navegación, simplemente agregue una clase .nav, .navbar-nav con una lista desordenada.

A continuación, se muestra un ejemplo de esto:

ejemplo en línea

ejemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Bootstrap　ejemplo　-　Barra de navegación predeterminada</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="#">基础教程网</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="#">Informe Jasper</a></li>
					<li class="divider"></li>
					<li><a href="#">Enlace separado</a></li>
					<li class="divider"></li>
					<li><a href="#">Otro enlace separado</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>
</nav>
</body>
</html>

Prueba y observa ‹/›

Los resultados se muestran a continuación:

Barra de navegación sensible

Para agregar características responsivas a la barra de navegación, el contenido que desea plegar debe estar envuelto en una clase con .collapse, .navbar-collapse del <div>. La barra de navegación plegada es realmente una con la clase .navbar-toggle y dos data- del botón del elemento. El primero es data-togglese utilizan para decirle a JavaScript qué hacer con el botón, el segundo es data-targetpara indicar a qué elemento se debe cambiar. Tres clases con .icon-bar de los <span> para crear lo que se llama botón de hamburguesa. Estos cambiarán a .nav-collapse los elementos dentro de <div>. Para implementar estas funciones, debe incluir Plugin de plegado (Collapse) de Bootstrap.

A continuación, se muestra un ejemplo de esto:

ejemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Bootstrap　ejemplo　-　barra de navegación responsive</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">
　　　　　　　　<button type="button" class="navbar-toggle"　data-toggle="collapse"
　　　　　　　　　　　　　　　　data-target="#example-navbar-collapse">
　　　　　　　　　　　　<span class="sr-only">cambiar navegación</span>
　　　　　　　　　　　　<span class="icon-bar"></span>
　　　　　　　　　　　　<span class="icon-bar"></span>
　　　　　　　　　　　　<span class="icon-bar"></span>
　　　　　　　　</button>
　　　　　　　　<a　class="navbar-brand" href="#">Tutoriales básicos</a>
　　　　</div>
　　　　<div class="collapse navbar-collapse" id="example-navbar-collapse">
　　　　　　　　<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="#">Informe Jasper</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">Enlace separado</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">Otro enlace separado</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　</div>
　　　　</div></nav>
</body>
</html>

Prueba y observa ‹/›

Los resultados se muestran a continuación:

botón en la barra de navegación

Puede usar la clase .navbar-btn Añada un botón al elemento <button> que no está dentro de <form>, y el botón se centrará verticalmente en la barra de navegación..navbar-btn se puede usar en elementos <a> y <input>.

No utilice .navbar-nav se utiliza en el elemento <a> dentro de .navbar-btnporque no es estándar clase button.

A continuación, se muestra un ejemplo de esto:

ejemplo en línea

ejemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
　　　　<title>Bootstrap　ejemplo　-　botón en la barra de navegación/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="#">基础教程网</a>
　　　　</div>
　　　　<div>
　　　　　　　　<form class="navbar-form navbar-left" role="search">
　　　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　　　<input type="text" class="form-control" placeholder="Buscar">
　　　　　　　　　　　　</div>
　　　　　　　　　　　　<button type="submit" class="btn btn-default">botón de envío</button>
　　　　　　　　</form>
　　　　　　　　<button type="button" class="btn btn-navbar predeterminado-btn">
　　　　　　　　　　　　botón de la barra de navegación
　　　　　　　　</button>
　　　　</div>
	</div>
</nav>
</body>
</html>

Prueba y observa ‹/›

Los resultados se muestran a continuación:

texto en la barra de navegación

Si es necesario incluir una cadena de texto en la navegación, utilice la clase .navbar-textoEsto generalmente se usa junto con la etiqueta <p> para asegurar un buen espacio de liderazgo y color. A continuación, se muestra un ejemplo de esto:

ejemplo en línea

ejemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
　　　　<title>Bootstrap　ejemplo　-　texto en la barra de navegación </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="#">基础教程网</a>
　　　　</div>
　　　　<div>
　　　　　　　　<p class="navbar-text">w3codebox usuario inicio </p>
　　　　</div>
	</div>
</nav>
</body>
</html>

Prueba y observa ‹/›

Los resultados se muestran a continuación:

combinada con enlaces de navegación de iconos

Si desea usar iconos dentro de componentes de navegación de barra de navegación normal, utilice la clase glyphicon glyphicon-* para establecer iconos, más información aquí Bootstrap iconos como se muestra en el siguiente ejemplo:

ejemplo en línea

ejemplo

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>Bootstrap　ejemplo　-　Enlaces no de navegación</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="#">基础教程网</a>
　　　　</div>
　　　　<ul　class="nav　navbar-nav navbar-right">
　　　　　　<li><a href="#"><span class="glyphicon glyphicon-user"></span>　Registrar</a></li>
　　　　　　<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>　Iniciar sesión</a></li>
　　　　</ul>
　　</div>
</nav>
</body>
</html>

Prueba y observa ‹/›

Los resultados se muestran a continuación:

Alineación de componentes

Puede usar las clases útiles .navbar-left o .navbar-right Alinear a la izquierda o a la derecha en la barra de navegación Enlaces de navegación, formularios, botones o texto Estos componentes. Ambas clases agregan flotación CSS en la dirección especificada. El siguiente ejemplo ilustra esto:

ejemplo en línea

ejemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
　　　　<title>Bootstrap　ejemplo　-　Alineación de componentes</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="#">基础教程网</a>
　　　　</div>
　　　　<div>
　　　　　　　　!--Alinear a la izquierda-->
　　　　　　　　<ul　class="nav　navbar-nav navbar-left">
　　　　　　　　　　　　<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="#">Informe Jasper</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">Enlace separado</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">Otro enlace separado</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　　　　　<form class="navbar-form navbar-left" role="search">
　　　　　　　　　　　　<button type="submit" class="btn btn-default">
　　　　　　　　　　　　　　　　Alinear a la izquierda-Botón de envío
　　　　　　　　　　　　</button>
　　　　　　　　</form>
　　　　　　　　<p class="navbar-text navbar-left">Alinear a la izquierda-Texto</p>
　　　　　　　　!--Alinear a la derecha-->
　　　　　　　　<ul　class="nav　navbar-nav navbar-right">
　　　　　　　　　　　　<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="#">Informe Jasper</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">Enlace separado</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">Otro enlace separado</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　　　　　<form class="navbar-form navbar-right" role="search">
　　　　　　　　　　　　<button type="submit" class="btn btn-default">
　　　　　　　　　　　　　　　　Alinear a la derecha-Botón de envío
　　　　　　　　　　　　</button>
　　　　　　　　</form>
　　　　　　　　<p class="navbar-text navbar-right">Alinear a la derecha-Texto</p>
　　　　</div>
	</div>
</nav>
</body>
</html>

Prueba y observa ‹/›

Los resultados se muestran a continuación:

Fijo en la parte superior

La barra de navegación de Bootstrap puede ubicarse dinámicamente. Por defecto, es un elemento de bloque, ubicado en función de su posición en el HTML. Con algunas clases de ayuda, puede colocarla en la parte superior o inferior de la página, o puede hacerla una barra de navegación estática que se deslice con la página.

Si desea que la barra de navegación se fije en la parte superior de la página, agregue a .navbar class Agregar clase .navbar-fixed-topEl siguiente ejemplo ilustra esto:

Para evitar que la barra de navegación se entrelace con otros elementos del contenido principal en la parte superior de la página, agregue al menos 50 píxeles de margen interno (padding), el valor del margen interno se puede ajustar según sus necesidades.

ejemplo en línea

ejemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
　　　　<title>Bootstrap　ejemplo　-　Fijo en la parte superior</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-navbar predeterminado-fixed-top"　role="navigation">　
　　　　<div　class="container-fluid">　
　　　　<div　class="navbar-header">　
　　　　　　　　<a　class="navbar-brand"　href="#">基础教程网</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="#">Informe Jasper</a></li>　
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>　
　　　　　　　　　　　　　　　　　　　　<li><a href="#">Enlace separado</a></li>　
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>　
　　　　　　　　　　　　　　　　　　　　<li><a href="#">Otro enlace separado</a></li>　
　　　　　　　　　　　　　　　　</ul>　
　　　　　　　　　　　　</li>　
　　　　　　　　</ul>　
　　　　</div>　
　　　　</div>　
</nav>
</body>
</html>

Prueba y observa ‹/›

Los resultados se muestran a continuación:

Fijo en la parte inferior

Si desea que la barra de navegación se fije en la parte inferior de la página, agregue a .navbar class Agregar clase .navbar-fixed-bottomEl siguiente ejemplo ilustra esto:

ejemplo en línea

ejemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
　　　　<title>Bootstrap　ejemplo　-　Fijo en la parte inferior</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-navbar predeterminado-fixed-bottom" role="navigation">
	<div　class="container-fluid">　
　　　　<div　class="navbar-header">
　　　　　　　　<a　class="navbar-brand"　href="#">基础教程网</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="#">Informe Jasper</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">Enlace separado</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">Otro enlace separado</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　</div>
	</div>
</nav>
</body>
</html>

Prueba y observa ‹/›

Los resultados se muestran a continuación:

Top estático

Para crear una barra de navegación que se deslice con la página, agregue .navbar-estática-top class. Esta clase no requiere agregar márgenes internos (padding) al <body>.

ejemplo en línea

ejemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
　　　　<title>Bootstrap　ejemplo　-　parte superior estática</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-navbar predeterminado-estática-top"　role="navigation">
	<div　class="container-fluid">　
　　　　<div　class="navbar-header">
　　　　　　　　<a　class="navbar-brand"　href="#">基础教程网</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="#">Informe Jasper</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">Enlace separado</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">Otro enlace separado</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　</div>
	</div>
</nav>
</body>
</html>

Prueba y observa ‹/›

Los resultados se muestran a continuación:

navegación invertida

Para crear una barra de navegación con fondo negro y texto en blanco, simplemente agregue .navbar class añadir .navbar-inverse class como se muestra en el siguiente ejemplo:

ejemplo en línea

ejemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
　　　　<title>Bootstrap　ejemplo　-　invertida de navegación</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-inverse"　role="navigation">
	<div　class="container-fluid">
　　　　<div　class="navbar-header">
　　　　　　　　<a　class="navbar-brand"　href="#">基础教程网</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="#">Informe Jasper</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">Enlace separado</a></li>
　　　　　　　　　　　　　　　　　　　　<li class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a href="#">Otro enlace separado</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　</div>
	</div>
</nav>
</body>
</html>

Prueba y observa ‹/›

Los resultados se muestran a continuación:

Navegación de pan de navegación Bootstrap Elementos de navegación Bootstrap