7/10/2017 6.7.

Barras de navegacin (Bootstrap 3, el manual oficial)

Ver ndice de contenidos del libro

6.7. Barras de navegacin

Las barras de navegacin son componentes adaptados al diseo web responsive y que se utilizan como elemento principal de
navegacin tanto en las aplicaciones como en los sitios web.

En los dispositivos mviles se muestran inicialmente minimizadas y al pulsar sobre ellas, se despliegan todas sus opciones. Si la
anchura del dispositivo aumenta hasta un nivel su ciente, las barras de navegacin muestran todos sus contenidos
horizontalmente.

Dependiendo del contenido de tu barra de navegacin, puede ser necesario modi car el punto a partir del cual se muestra
horizontal en vez de minimizada. Para ello, modi ca el valor de la variable @grid-float-breakpoint en tu archivo LESS o aade
tu propia media query en el archivo CSS.

6.7.1. Barra de navegacin bsica

Ejemplo:

http://librosweb.es/libro/bootstrap_3/capitulo_6/barras_de_navegacion.html 1/13
7/10/2017 6.7. Barras de navegacin (Bootstrap 3, el manual oficial)

<nav class="navbar navbar-default" role="navigation">

<!-- El logotipo y el icono que despliega el men se agrupan
para mostrarlos mejor en los dispositivos mviles -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Desplegar navegacin</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logotipo</a>
</div>

<!-- Agrupar los enlaces de navegacin, los formularios y cualquier

otro elemento que se pueda ocultar al minimizar la barra -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Enlace #1</a></li>
<li><a href="#">Enlace #2</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Men #1 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Accin #1</a></li>
<li><a href="#">Accin #2</a></li>
<li><a href="#">Accin #3</a></li>
<li class="divider"></li>
<li><a href="#">Accin #4</a></li>

http://librosweb.es/libro/bootstrap_3/capitulo_6/barras_de_navegacion.html 2/13
7/10/2017 6.7. Barras de navegacin (Bootstrap 3, el manual oficial)

<li class="divider"></li>
<li><a href="#">Accin #5</a></li>
</ul>
</li>
</ul>

<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">Enviar</button>
</form>

<ul class="nav navbar-nav navbar-right">

<li><a href="#">Enlace #3</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Men #2 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Accin #1</a></li>
<li><a href="#">Accin #2</a></li>
<li><a href="#">Accin #3</a></li>
<li class="divider"></li>
<li><a href="#">Accin #4</a></li>
</ul>
</li>
</ul>
</div>
</nav>

http://librosweb.es/libro/bootstrap_3/capitulo_6/barras_de_navegacion.html 3/13
7/10/2017 6.7. Barras de navegacin (Bootstrap 3, el manual oficial)

As se ve este ejemplo en tu navegador cuando el dispositivo es pequeo:

Y esta es la imagen del aspecto que debera tener este ejemplo:

Figura 6.28 Barra de navegacin bsica en un dispositivo pequeo en Bootstrap 3

As se ve este ejemplo en tu navegador cuando el dispositivo es grande:

http://librosweb.es/libro/bootstrap_3/capitulo_6/barras_de_navegacion.html 4/13
7/10/2017 6.7. Barras de navegacin (Bootstrap 3, el manual oficial)

Y esta es la imagen del aspecto que debera tener este ejemplo:

Figura 6.29 Barra de navegacin bsica en un dispositivo grande en Bootstrap 3

La nica forma de ver correctamente esta barra de navegacin tan ancha es ver el ejemplo en una nueva pgina
(/ejemplos/bootstrap_3/ejemplo-6-29.html).

ADVERTENCIA
La barra de navegacin responsive requiere el uso del plugin collapse de JavaScript incluido en Bootstrap 3.

TRUCO
http://librosweb.es/libro/bootstrap_3/capitulo_6/barras_de_navegacion.html 5/13
7/10/2017 6.7. Barras de navegacin (Bootstrap 3, el manual oficial)

Para mejorar la accesibilidad de tus sitios y aplicaciones, no olvides aadir el atributo role="navigation" a todas las barras
de navegacin.

6.7.2. Barras de navegacin con botones

Cuando un botn no se encuentra dentro de un formulario, debes aadirle la clase .navbar-btn para que se muestre alineado
verticalmente. Ejemplo:

<button type="button" class="btn btn-default navbar-btn">Entrar</button>

As se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debera tener este ejemplo:

Figura 6.30 Barra de navegacin con botones en Bootstrap 3

6.7.3. Barras de navegacin con texto

De la misma forma, si quieres mostrar texto dentro de una barra de navegacin, encirralo en un elemento con la clase
.navbar-text para que su color y tamao sea el adecuado. Ejemplo:

<p class="navbar-text">Conectado como "Nombre Apellidos"</p>

http://librosweb.es/libro/bootstrap_3/capitulo_6/barras_de_navegacion.html 6/13
7/10/2017 6.7. Barras de navegacin (Bootstrap 3, el manual oficial)

As se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debera tener este ejemplo:

Figura 6.31 Barra de navegacin con texto en Bootstrap 3

6.7.4. Barras de navegacin con enlaces

Las barras de navegacin de Bootstrap 3 tambin pueden contener enlaces que no formen parte de las opciones de
navegacin. Para mostrarlos con los estilos adecuados, aplica la clase .navbar-link a todos esos enlaces. Ejemplo:

<p class="navbar-text pull-right">

Conectado como <a href="#" class="navbar-link">Nombre Apellidos</a>
</p>

As se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debera tener este ejemplo:

http://librosweb.es/libro/bootstrap_3/capitulo_6/barras_de_navegacion.html 7/13
7/10/2017 6.7. Barras de navegacin (Bootstrap 3, el manual oficial)

Figura 6.32 Barra de navegacin con enlaces en Bootstrap 3

6.7.5. Alineando los elementos de la barra de navegacin

Para alinear los enlaces, formularios, botones o texto de la barra de navegacin, puedes utilizar las clases .navbar-left y
.navbar-right , que aaden a ese elemento un float en la direccin correspondiente. As, para alinear por ejemplo varios
enlaces de navegacin, puedes encerrarlos dentro de un elemento <ul> y aplicar sobre este ltimo una de las dos clases CSS
mencionadas anteriormente.

En realidad, estas clases se basan en las clases genricas .pull-left y .pull-right explicadas en los captulos anteriores. La
diferencia es que han sido adaptadas a los diferentes media queries para que los elementos de la barra de navegacin se vean
lo mejor posible en todo tipo de dispositivos.

6.7.6. Barra de navegacin ja en la parte superior de la pgina

Aplica la clase .navbar-fixed-top a la barra de navegacin para jarla en la parte superior de la pgina.

ADVERTENCIA
Debido a los estilos aplicados, la barra de navegacin ja puede tapar los contenidos que se encuentran en la parte
superior de la pgina. Para evitarlo, aade un padding en la parte superior del elemento <body> . Como por defecto la barra
de navegacin tiene una altura de 50px , este es el estilo recomendado por defecto:

body { padding-top: 70px; }

No olvides incluir este estilo despus de todos los estilos de Bootstrap 3.

http://librosweb.es/libro/bootstrap_3/capitulo_6/barras_de_navegacion.html 8/13
7/10/2017 6.7. Barras de navegacin (Bootstrap 3, el manual oficial)

Ejemplo:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

...
</nav>

Ver ejemplo en una nueva pgina (/ejemplos/bootstrap_3/ejemplo-6-33.html)

6.7.7. Barra de navegacin ja en la parte inferior de la pgina

Aplica la clase .navbar-fixed-bottom a la barra de navegacin para jarla en la parte inferior de la pgina.

ADVERTENCIA
Debido a los estilos aplicados, la barra de navegacin ja puede tapar los contenidos que se encuentran en la parte inferior
de la pgina. Para evitarlo, aade un padding en la parte inferior del elemento <body> . Como por defecto la barra de
navegacin tiene una altura de 50px , este es el estilo recomendado por defecto:

body { padding-bottom: 70px; }

No olvides incluir este estilo despus de todos los estilos de Bootstrap 3.

Ejemplo:

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">

...
</nav>

Ver ejemplo en una nueva pgina (/ejemplos/bootstrap_3/ejemplo-6-34.html)

6.7.8. Barra de navegacin esttica en la parte superior de la pgina

http://librosweb.es/libro/bootstrap_3/capitulo_6/barras_de_navegacion.html 9/13
7/10/2017 6.7. Barras de navegacin (Bootstrap 3, el manual oficial)

Aplica la clase .navbar-static-top para crear una barra de navegacin que ocupa toda la anchura del elemento en el que se
encuentra, pero que a diferencia de las clases .navbar-fixed-* , s que desaparece al hacer scroll en la pgina.

Ejemplo:

<nav class="navbar navbar-default navbar-static-top" role="navigation">

...
</nav>

Ver ejemplo en una nueva pgina (/ejemplos/bootstrap_3/ejemplo-6-35.html)

6.7.9. Barra de navegacin invertida

El estilo por defecto de las barras de navegacin no queda muy bien en las pginas con fondo oscuro. Por eso Bootstrap 3
de ne un estilo alternativo muy oscuro que se activa aplicando la clase .navbar-inverse a la barra de navegacin. Ejemplo:

<nav class="navbar navbar-inverse" role="navigation">

...
</nav>

As se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debera tener este ejemplo:

http://librosweb.es/libro/bootstrap_3/capitulo_6/barras_de_navegacion.html 10/13
7/10/2017 6.7. Barras de navegacin (Bootstrap 3, el manual oficial)

Figura 6.33 Barra de navegacin invertida en Bootstrap 3

Anterior Siguiente
6.6. Elementos de navegacin 6.8. Migas de pan

(../capitulo_6/elementos_de_navegacion.html) (../capitulo_6/migas_de_pan.html)

INDICE DE CONTENIDOS

1. Primeros pasos (../capitulo_1.html)

2. Diseando con rejilla (../capitulo_2.html)

3. Tipografa (../capitulo_3.html)

4. Elementos CSS (../capitulo_4.html)

5. Formularios (../capitulo_5.html)

Captulo 6. Componentes (../capitulo_6.html)

6.1. Iconos (glyphicons) (../capitulo_6/iconos_glyphicons.html)

6.2. Mens desplegables (../capitulo_6/menus_desplegables.html)

6.3. Grupos de botones (../capitulo_6/grupos_de_botones.html)

6.4. Botones desplegables (../capitulo_6/botones_desplegables.html)

6.5. Grupos de campos de formulario (../capitulo_6/grupos_de_campos_de_formulario.html)

6.6. Elementos de navegacin (../capitulo_6/elementos_de_navegacion.html)

6.7. Barras de navegacin (../capitulo_6/barras_de_navegacion.html)

http://librosweb.es/libro/bootstrap_3/capitulo_6/barras_de_navegacion.html 11/13
7/10/2017 6.7. Barras de navegacin (Bootstrap 3, el manual oficial)

6.8. Migas de pan (../capitulo_6/migas_de_pan.html)

6.9. Paginadores (../capitulo_6/paginadores.html)

6.10. Etiquetas (../capitulo_6/etiquetas.html)

6.11. Badges (../capitulo_6/badges.html)

6.12. Jumbotron (../capitulo_6/jumbotron.html)

6.13. Encabezado de pgina (../capitulo_6/encabezado_de_pagina.html)

6.14. Imgenes en miniatura (../capitulo_6/imagenes_en_miniatura.html)

6.15. Mensajes de alerta (../capitulo_6/mensajes_de_alerta.html)

6.16. Barras de progreso (../capitulo_6/barras_de_progreso.html)

6.17. Objetos multimedia (../capitulo_6/objetos_multimedia.html)

6.18. Listas de elementos (../capitulo_6/listas_de_elementos.html)

6.19. Paneles (../capitulo_6/paneles.html)

6.20. Pozos (../capitulo_6/pozos.html)

7. Plugins de JavaScript (../capitulo_7.html)

2006-2017 LibrosWeb.es Contacto (/sitio/contacto) Novedades (https://plus.google.com/+librosweb) Condiciones (/sitio/condiciones) Privacidad

(/sitio/privacidad)

3.952
das online

http://librosweb.es/libro/bootstrap_3/capitulo_6/barras_de_navegacion.html 12/13
7/10/2017 6.7. Barras de navegacin (Bootstrap 3, el manual oficial)

http://librosweb.es/libro/bootstrap_3/capitulo_6/barras_de_navegacion.html 13/13