2.1.8. Menús

Navigation Bars

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 ::

See the Pen LGMWLE by JOSE (@albatros) on CodePen.

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 responsive -. ¡Este problema (con las pequeñas pantallas ) será resuelto en el último ejemplo en esta página!

Inverted Navigation Bar

See the Pen xZmqYx by JOSE (@albatros) on CodePen.

Fixed Navigation Bar

The .navbar-fixed-top class makes the navigation bar fixed at the top:

See the Pen RrEpeV by JOSE (@albatros) on CodePen.


The .navbar-fixed-bottom class makes the navigation bar stay at the bottom:

See the Pen VeqpVm by JOSE (@albatros) on CodePen.

Navigation Bar With Dropdown

See the Pen eJbvoq by JOSE (@albatros) on CodePen.

Right-Aligned Navigation Bar

The .navbar-right class is used to right-align navigation bar buttons.

In the following example we insert a "Sign Up" button and a "Login" button to the right in the navigation bar. We also add a glyphicon on each of the two new buttons:

See the Pen adPwYj by JOSE (@albatros) on CodePen.

Collapsing The Navigation Bar

The navigation bar takes up too much space on a small screen.

We should hide the navigation bar; and only show it when it is needed.

In the following example the navigation bar is replaced by a button in the top right corner. Only when the button is clicked, the navigation bar will be displayed:

See the Pen BjvRKO by JOSE (@albatros) on CodePen.

Existen en la red múltiples generadores de menús en Boorstrap. Son útiles a la hora de gestionar la barra de navegación