Barra de navegación Bootstrap
Barras de navegación
Una barra de navegación es un encabezado de navegación que se coloca en la parte superior de la página:
Con Bootstrap, una barra de navegación puede extenderse o contraerse, según el tamaño de la pantalla.
Se crea una barra de navegación estándar con <nav class="navbar navbar-default">.
El siguiente ejemplo muestra cómo agregar una barra de navegación en la parte superior de la página:
Ejemplo
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
...
Nota: Todos los ejemplos en esta página mostrarán una barra de navegación que ocupa demasiado espacio en pantallas pequeñas (sin embargo, la barra de navegación estará en una sola línea en pantallas grandes, porque Bootstrap responde). Este problema (con las pantallas pequeñas) se resolverá en el último ejemplo de esta página.
Barra de navegación invertida
Si no le gusta el estilo de la barra de navegación predeterminada, Bootstrap proporciona una barra de navegación negra alternativa:
Simplemente cambie la .navbar-defaultclase a .navbar-inverse:
Ejemplo
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Barra de navegación con menú desplegable
Las barras de navegación también pueden contener menús desplegables.
El siguiente ejemplo agrega un menú desplegable para el botón "Página 1":
Ejemplo
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Barra de navegación alineada a la derecha
La .navbar-rightclase se utiliza para alinear a la derecha los botones de la barra de navegación.
En el siguiente ejemplo, insertamos un botón "Registrarse" y un botón "Iniciar sesión" a la derecha de la barra de navegación. También agregamos un glyphicon en cada uno de los dos nuevos botones:
Ejemplo
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
Botones de la barra de navegación
Para agregar botones dentro de la barra de navegación, agregue la .navbar-btnclase en un botón Bootstrap:
Ejemplo
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>
Formularios de la barra de navegación
Para agregar elementos de formulario dentro de la barra de navegación, agregue la .navbar-formclase a un elemento de formulario y agregue una(s) entrada(s). Tenga en cuenta que hemos agregado una .form-groupclase al contenedor div que contiene la entrada. Esto agrega el relleno adecuado si tiene más de una entrada (aprenderá más sobre esto en el capítulo Formularios).
Ejemplo
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<form class="navbar-form navbar-left"
action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
También puede utilizar las clases .input-groupy .input-group-addonpara adjuntar un icono o texto de ayuda junto al campo de entrada. Aprenderá más sobre estas clases en el capítulo Entradas de Bootstrap.
Ejemplo
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
Texto de la barra de navegación
Use la .navbar-textclase para alinear verticalmente cualquier elemento dentro de la barra de navegación que no sea un enlace (garantiza el relleno y el color del texto adecuados).
Ejemplo
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<p class="navbar-text">Some text</p>
</nav>
Barra de navegación fija
La barra de navegación también se puede fijar en la parte superior o inferior de la página.
Una barra de navegación fija permanece visible en una posición fija (arriba o abajo) independientemente del desplazamiento de la página.
La .navbar-fixed-topclase hace que la barra de navegación sea fija en la parte superior:
Ejemplo
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
La .navbar-fixed-bottomclase hace que la barra de navegación permanezca en la parte inferior:
Ejemplo
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Contraer la barra de navegación
La barra de navegación suele ocupar demasiado espacio en una pantalla pequeña.
Deberíamos ocultar la barra de navegación; y mostrarlo solo cuando sea necesario.
En el siguiente ejemplo, la barra de navegación se reemplaza por un botón en la esquina superior derecha. Solo cuando se hace clic en el botón, se mostrará la barra de navegación:
Ejemplo
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>