Bootstrap - Elementos de navegación

Bootstrap proporciona algunas opciones diferentes para diseñar elementos de navegación. Todos comparten el mismo marcado y clase base,.nav. Bootstrap también proporciona una clase de ayuda para compartir marcas y estados. Intercambia clases de modificadores para cambiar entre cada estilo.

Navegación tabular o pestañas

Para crear un menú de navegación con pestañas:

Comience con una lista básica desordenada con la clase base de .nav
Agregar clase .nav-tabs.

El siguiente ejemplo demuestra esto:

<p>Tabs Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Navegación de pastillas

Pastillas basicas

Para convertir las pestañas en píldoras, siga los mismos pasos que el anterior, use la clase .nav-pills en lugar de .nav-tabs.

El siguiente ejemplo demuestra esto:

<p>Pills Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Pastillas verticales

Puede apilar las píldoras verticalmente usando la clase .nav-stacked junto con las clases - .nav, .nav-pills.

El siguiente ejemplo demuestra esto:

<p>Vertical Pills Example</p>

<ul class = "nav nav-pills nav-stacked">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Navegación justificada

Puede crear pestañas o píldoras de anchos iguales a los de su padre en pantallas de más de 768 px usando class .nav-justified junto con .nav, .nav-tabs o .nav, .nav-pillsrespectivamente. En pantallas más pequeñas, los enlaces de navegación se apilan.

El siguiente ejemplo demuestra esto:

<p>Justified Nav Elements Example</p>

<ul class = "nav nav-pills nav-justified">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

<br>
<br>
<br>

<ul class = "nav nav-tabs nav-justified">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Enlaces deshabilitados

Para cada uno de los .nav clases, si agrega el .disabled clase, creará un enlace gris que también deshabilita la :hover estado como se muestra en el siguiente ejemplo:

<p>Disabled Link Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   
   <li class = "disabled"><a href = "#">iOS(disabled link)</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

<br>
<br>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   
   <li class = "disabled"><a href = "#">VB.Net(disabled link)</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Esta clase solo cambiará la apariencia de <a>, no su funcionalidad. Utilice JavaScript personalizado para deshabilitar los enlaces aquí.

Listas deplegables

Los menús de navegación comparten una sintaxis similar con los menús desplegables. De forma predeterminada, tiene un elemento de lista que tiene un ancla que funciona junto con algunos atributos de datos para activar una lista desordenada con un.dropdown-menu clase.

Pestañas con menús desplegables

Para agregar menús desplegables a la pestaña:

Comience con una lista básica desordenada con la clase base de .nav
Agregar la clase .nav-tabs.
Ahora agregue una lista desordenada con un .dropdown-menu clase.

<p>Tabs With Dropdown Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java 
         <span class = "caret"></span>
      </a>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

Pastillas con menús desplegables

Para hacer lo mismo con las píldoras, simplemente cambie el .nav-tabs clase con .nav-pills como se muestra en el siguiente ejemplo.

<p>Pills With Dropdown Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java <span class = "caret"></span>
      </a>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

↰ Previous page Next page ↱