La classe nav applicata alle liste le identifica come un insieme di collegamenti che consentono di "navigare" tra i contenuti. Nello specifico vedremo come utilizzare questa classe per creare dei sistemi di disposizione e visualizzazione dei contenuti all’interno di spazi ridotti.
Fondamentalmente, abbiamo due tipi di nav: tabs e pills che possono poi essere variati mettendoli in pila (stacked) invece che in orizzontale (disposizione di default). Il loro meccanismo di funzionamento è assolutamente analogo.
Proviamo il funzionamento usando i tabs, poi riproporremo l’esempio con pills.
Tabs
Il meccanismo di funzionamento di questi oggetti si basa su due elementi: una lista che crea delle "linguette" e un div che crea i pannelli (a loro volta singoli div) da mostrare al clic su ciascuna linguetta.
Cominciamo dalla lista
<ul class="<font color="#FF0000">nav nav-tabs" id="mioTab">
<liclass="active"><a href="#home"data-toggle="tab">Home</a></li>
<li><a href="#uno"data-toggle="tab">Uno</a></li>
<li><a href="#due"data-toggle="tab">Due</a></li>
<li><a href="#tre"data-toggle="tab">Tre</a></li>
</ul>Ci sono alcune cose da notare. Innanzi tutto, alla lista devono essere assegnate le classi nav e nav-tabs, quindi la linguetta attiva è quella contrassegnata dalla classe active. Ogni elemento della lista contiene un collegamento a cui è assegnato l’attributo data-toggle="tab". Senza questo attributo lo spostamento da una linguetta all’altra (cioè lo spostamento della classe active da un collegamento all’altro) e la visualizzazione del relativo contenuto non avviene.
Passiamo quindi al secondo elemento.
<div class="<font color="#FF0000">tab-content">
<div<font color="#FF0000"> class="tab-pane active" id="home"><h1>Home</h1>
<p> Lorem ipsum dolor sit amet ... <p>
</div>
<divclass="tab-pane" id="uno"><h1>Uno</h1>
<p>Curabitur pretium tincidunt lacus...</p>
</div>
<divclass="tab-pane" id="due"><h1>Due</h1>
<p>Proin nonummy...</p></div>
<divclass="tab-pane" id="tre"><h1>Tre</h1>
<p>Fusce convallis,...</p>
</div>
</div>Il div contenitore dei pannelli deve avere la classe tab-content, mentre i div che costituiscono i singoli pannelli devono avere la classe tab-pane. Il pannello attualmente visualizzato ha la classe active.
Perchè i pannelli si visualizzino automaticamente al clic sulla linguetta corrispondente, occorre che il loro ID corrisponda al valore dell’attributo href della linguetta che li deve attivare.
Pills
Il principio di funzionamento di questo elemento è identico a tabs, quindi ci limiteremo a riportare il codice che lo fa funzionare.
<ul class="<font color="#FF0000">nav nav-pills">
<liclass="active"><a href="#home"data-toggle="pill">Uno</a></li>
<li><a href="#uno"data-toggle="pill">Due</a></li>
<li><a href="#due"data-toggle="pill">Tre</a></li>
<li><a href="#tre"data-toggle="pill">Quattro</a></li>
</ul>
<divclass="pill-content">
<divclass="pill-pane active" id="home"><h1>Home</h1>
...
</div>
<divclass="pill-pane" id="uno"><h1>Uno</h1>
...
</div>
<divclass="pill-pane" id="due"><h1>Due</h1>
...
</div>
<divclass="pill-pane" id="tre"><h1>Tre</h1>
...
</div>
</div>Elementi in pila
Se aggiungete alla lista anche la classe nav-stacked le linguette dei tab o i pills si disporranno in verticale e non in orizzontale.
<ul class="nav nav-pillsnav-stacked">
Elementi giustificati
Per giustificare le linguette o i pulsanti, potete aggiungere alla lista la classe nav-justified. In questo modo le tabs o i pills si distribuiranno occupando lo spazio in modo omogeneo.
