Barras de navegación
Una barra de navegación es una cabecera de navegación que se coloca en la parte superior de la página:
Con Bootstrap , una barra de navegación se puede extender o contraer, dependiendo del tamaño de la pantalla.
Una barra de navegación estándar se crea 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
<body>
<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>
...
Inténtalo tú mismo " Todos los ejemplos en esta página se mostrará 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 las pantallas grandes - porque Bootstrap es sensible). Este problema (con las pequeñas pantallas) será resuelto en el último ejemplo de esta página.
Invertida barra de navegación
Si no te gusta el estilo de la barra de navegación por defecto, Bootstrap ofrece una alternativa, negro barra de navegación:
Sólo cambia el .navbar-default clase en .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>
Inténtalo tú mismo " Fijo barra de navegación
La barra de navegación también puede ser fijado en la parte superior o en la parte inferior de la página.
Una barra de navegación fijo permanece visible en una posición fija (superior o inferior) independiente de la página de desplazamiento.
El .navbar-fixed-top de clase hace que la barra de navegación fijo 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> Inténtalo tú mismo " El .navbar-fixed-bottom de clase hace que la estancia barra de navegación 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> Inténtalo tú mismo " Con la barra de navegación desplegable
Las barras de navegación también pueden contener menús desplegables.
El siguiente ejemplo añade un menú desplegable para el botón de "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> Inténtalo tú mismo " Alineado a la derecha Barra de navegación
El .navbar-right clase se utiliza para alineación derecha botones de la barra de navegación.
En el siguiente ejemplo insertamos un botón "Registrarse" y un botón de "Inicio de sesión" a la derecha en la barra de navegación. También añadimos 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>
<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>
</nav> Inténtalo tú mismo " El colapso de la barra de navegación
La barra de navegación ocupa demasiado espacio en una pequeña pantalla.
Debemos ocultar la barra de navegación; y mostrar sólo cuando se necesita.
En el siguiente ejemplo la barra de navegación se sustituye por un botón en la esquina superior derecha. Sólo 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> Inténtalo tú mismo " Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4»