Ver índice de contenidos del libro

6.6. Elementos de navegación

Bootstrap 3 define varios elementos de navegación que comparten el mismo código HTML y la misma clase base .nav. Para seleccionar el estilo del elemento, se modifica su clase CSS específica.

Aplica la clase .nav para crear un elemento de navegación y después aplica la clase .nav-tabs para mostrar sus enlaces en forma de pestaña. Ejemplo:

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Inicio</a></li>
  <li><a href="#">Perfil</a></li>
  <li><a href="#">Mensajes</a></li>
</ul>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Elemento de navegación con pestañas en Bootstrap 3

Figura 6.21 Elemento de navegación con pestañas en Bootstrap 3

Aplicando la clase .nav-pills al mismo código HTML del ejemplo anterior, los enlaces se muestran como botones ("pills" en inglés) en vez de como pestañas. Ejemplo:

<ul class="nav nav-pills">
  <li class="active"><a href="#">Inicio</a></li>
  <li><a href="#">Perfil</a></li>
  <li><a href="#">Mensajes</a></li>
</ul>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Elemento de navegación con botones en Bootstrap 3

Figura 6.22 Elemento de navegación con botones en Bootstrap 3

La navegación con botones también se puede mostrar verticalmente añadiendo la clase .nav-stacked. Ejemplo:

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Elemento de navegación vertical con botones en Bootstrap 3

Figura 6.23 Elemento de navegación vertical con botones en Bootstrap 3

Bootstrap 3 también permite crear elementos de navegación que ocupan toda la anchura del elemento en el que se encuentran y en los que todos sus enlaces tienen la misma anchura. Para ello, añade la clase .nav-justified al elemento de navegación. Ten en cuenta que este comportamiento sólo es posible para los dispositivos con una anchura superior a 768px. En el resto de dispositivos, el elemento de navegación se muestra verticalmente. Ejemplo:

<ul class="nav nav-tabs nav-justified">
  <li class="active"><a href="#">Inicio</a></li>
  <li><a href="#">Perfil</a></li>
  <li><a href="#">Mensajes</a></li>
</ul>
 
<ul class="nav nav-pills nav-justified">
  <li class="active"><a href="#">Inicio</a></li>
  <li><a href="#">Perfil</a></li>
  <li><a href="#">Mensajes</a></li>
</ul>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Elemento de navegación justificado en Bootstrap 3

Figura 6.24 Elemento de navegación justificado en Bootstrap 3

6.6.4. Deshabilitando enlaces

Aplica la clase .disabled a cualquier enlace del elemento de navegación para mostrarlo de color gris y sin que cambie de color al pasar el ratón por encima suyo.

Advertencia Al aplicar la clase .disabled solamente se modifica el aspecto de los enlaces, pero no su funcionamiento. Así que si el usuario pincha el enlace deshabilitado, se ejecutará la acción asociada.

<ul class="nav nav-pills">
  <li><a href="#">Enlace activo</a></li>
  <li><a href="#">Enlace activo</a></li>
  <li class="disabled"><a href="#">Enlace deshabilitado</a></li>
</ul>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Elemento de navegación con enlaces deshabilitados en Bootstrap 3

Figura 6.25 Elemento de navegación con enlaces deshabilitados en Bootstrap 3

Usando el plugin dropdown de JavaScript y un poco de código HTML, es posible añadir menús desplegables tanto a las pestañas como a los botones.

6.6.5.1. Pestañas con menús desplegables

<ul class="nav nav-tabs">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Menú desplegable <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Pestañas con menús desplegables en Bootstrap 3

Figura 6.26 Pestañas con menús desplegables en Bootstrap 3

6.6.5.2. Botones con menús desplegables

<ul class="nav nav-pills">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Menú desplegable <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Botones con menús desplegables en Bootstrap 3

Figura 6.27 Botones con menús desplegables en Bootstrap 3