Bootstrap - Elementi di navigazione

Bootstrap fornisce alcune opzioni diverse per definire gli elementi di navigazione. Tutti condividono lo stesso markup e la stessa classe di base,.nav. Bootstrap fornisce anche una classe helper, per condividere markup e stati. Scambia le classi dei modificatori per passare da uno stile all'altro.

Navigazione tabulare o schede

Per creare un menu di navigazione a schede:

Inizia con un elenco di base non ordinato con la classe base di .nav
Aggiungi classe .nav-tabs.

Il seguente esempio lo dimostra:

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

Pillole di navigazione

Pillole di base

Per trasformare le schede in pillole, segui gli stessi passaggi di cui sopra, usa la classe .nav-pills invece di .nav-tabs.

Il seguente esempio lo dimostra:

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

Pillole verticali

Puoi impilare le pillole verticalmente usando la classe .nav-stacked insieme alle classi - .nav, .nav-pills.

Il seguente esempio lo dimostra:

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

Nav giustificato

Puoi creare tab o pillole di larghezza uguale a quella del loro genitore su schermi più larghi di 768px usando class .nav-justified insieme a .nav, .nav-tabs o .nav, .nav-pillsrispettivamente. Sugli schermi più piccoli, i collegamenti di navigazione sono impilati.

Il seguente esempio lo dimostra:

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

Collegamenti disabilitati

Per ciascuno dei file .nav classi, se aggiungi il file .disabled class, creerà un collegamento grigio che disabilita anche il file :hover stato come mostrato nell'esempio seguente:

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

Questa classe cambierà solo l'aspetto di <a>, non la sua funzionalità. Usa JavaScript personalizzato per disabilitare i link qui.

Menu a discesa

I menu di navigazione condividono una sintassi simile con i menu a discesa. Per impostazione predefinita, hai un elemento di elenco che ha un'ancora che lavora insieme ad alcuni attributi di dati per attivare un elenco non ordinato con un.dropdown-menu classe.

Schede con menu a discesa

Per aggiungere menu a discesa alla scheda:

Inizia con un elenco di base non ordinato con la classe base di .nav
Aggiungi la classe .nav-tabs.
Ora aggiungi un elenco non ordinato con un file .dropdown-menu classe.

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

Pillole con menu a discesa

Per fare la stessa cosa con le pillole, scambia semplicemente il file .nav-tabs classe con .nav-pills come mostrato nell'esempio seguente.

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