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.
6.6.1. Navegación con pestañas
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:
6.6.2. Navegación con botones
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:
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:
6.6.3. Navegación justificada
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:
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:
6.6.5. Navegación con menús desplegables
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:
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: