Bootstrap - Navs and Tabs
Introduzione
Ciao, aspiranti sviluppatori web! Oggi andremo a immergerci in uno dei componenti più comunemente utilizzati nel design web: i menu di navigazione e le schede. Questi elementi sono come i cartelli stradali del tuo sito web, guidando gli utenti attraverso diverse sezioni e contenuti. Con i componenti nav e tab di Bootstrap, possiamo creare sistemi di navigazione eleganti e reattivi che funzionano su tutti i dispositivi. Allora, mettiamo le mani sporche e iniziamo a programmare!
Nav di base
Iniziamo dalle basi. Bootstrap offre un modo semplice per creare menu di navigazione utilizzando la classe .nav. Ecco un esempio di base:
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chi siamo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Servizi</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Contatti</a>
</li>
</ul>Questo codice crea una lista orizzontale di link di navigazione. La classe active evidenzia la pagina corrente, mentre la classe disabled sfuma i link che non sono attualmente cliccabili.
Stili disponibili
Bootstrap offre vari stili per le tue nav. Esaminiamo due dei più popolari:
Nav tabs
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profilo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messaggi</a>
</li>
</ul>Questo crea un menu di navigazione a schede, perfetto per organizzare i contenuti in diverse sezioni.
Nav pills
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profilo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messaggi</a>
</li>
</ul>Lo stile delle pillole dà un'aspetto più simile a pulsanti ai tuoi link di navigazione.
Allineamento orizzontale
Puoi facilmente cambiare l'allineamento dei tuoi elementi nav. Ecco come:
<ul class="nav justify-content-center">
<!-- Elementi nav qui -->
</ul>
<ul class="nav justify-content-end">
<!-- Elementi nav qui -->
</ul>La classe justify-content-center centra gli elementi nav, mentre justify-content-end li allinea a destra.
Lavorare con le utilità flex
Le utilità flex di Bootstrap ti danno ancora più controllo sul layout della tua nav:
<nav class="nav flex-column">
<a class="nav-link active" href="#">Attivo</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabilitato</a>
</nav>Questo crea un menu di navigazione verticale utilizzando la classe flex-column.
Riguardo all'accessibilità
Quando si costruiscono nav, è fondamentale considerare l'accessibilità. Usa gli elementi <nav> dove appropriato, e aggiungi aria-current="page" all'elemento attivo:
<nav class="nav">
<a class="nav-link active" aria-current="page" href="#">Attivo</a>
<!-- Altri elementi nav -->
</nav>Utilizzo dei menu a discesa
Le nav possono includere menu a discesa per strutture di navigazione più complesse:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Attivo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Menu a discesa</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Azione</a></li>
<li><a class="dropdown-item" href="#">Altra azione</a></li>
<li><a class="dropdown-item" href="#">Qualcosa di diverso qui</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Link separato</a></li>
</ul>
</li>
<!-- Altri elementi nav -->
</ul>Questo codice crea una nav con un menu a discesa. L'attributo data-bs-toggle="dropdown" abilita la funzionalità del menu a discesa.
Schede con menu a discesa
Puoi anche includere menu a discesa in nav a schede:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Attivo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Menu a discesa</a>
<ul class="dropdown-menu">
<!-- Elementi del menu a discesa -->
</ul>
</li>
<!-- Altri elementi nav -->
</ul>Pillole con menu a discesa
Il medesimo principio si applica alle nav a schede:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Attivo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Menu a discesa</a>
<ul class="dropdown-menu">
<!-- Elementi del menu a discesa -->
</ul>
</li>
<!-- Altri elementi nav -->
</ul>Comportamento JavaScript
I plugin JavaScript di Bootstrap possono aggiungere comportamenti dinamici alle tue nav e schede. Ecco come creare un set di schede con pannelli di contenuti:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profilo</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Contenuto della home...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Contenuto del profilo...</div>
</div>Questo codice crea un set di schede che, quando cliccate, mostrano diversi pannelli di contenuti.
Accessibilità
Per rendere le tue schede accessibili, utilizza gli attributi role, aria-controls, aria-selected, e aria-labelledby come mostrato nell'esempio precedente.
Utilizzo degli attributi dati
Gli attributi dati ti permettono di controllare il comportamento delle schede senza scrivere JavaScript:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<!-- Altri pulsanti della scheda -->
</ul>Gli attributi data-bs-toggle="tab" e data-bs-target="#home" abilitano la funzionalità della scheda senza ulteriore JavaScript.
Attraverso JavaScript
Puoi anche attivare le schede tramite JavaScript:
var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})Questo codice aggiunge listener di eventi di clic a ciascun pulsante della scheda, attivando la scheda corrispondente quando viene cliccato.
Effetto di dissolvenza
Per aggiungere un effetto di dissolvenza alle tue schede, utilizza la classe fade:
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
</div>Questo crea un effetto di transizione fluida quando si passa da una scheda all'altra.
Ecco fatto! Hai appena imparato a creare e personalizzare menu di navigazione e schede utilizzando Bootstrap. Ricorda, la pratica fa la perfezione, quindi prova a sperimentare con questi componenti nei tuoi progetti. Buon codice!
Credits: Image by storyset