Bootstrap 4 Nav
Menu di navigazione
Se vuoi creare un semplice menu orizzontale, aggiungi la
.navclasse a un <ul>elemento, seguito da .nav-item
per ciascuno <li>e aggiungi la .nav-linkclasse ai loro collegamenti:
Esempio
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Nav allineato
Aggiungi la .justify-content-centerclasse per centrare il nav e la .justify-content-endclasse per allineare a destra il nav.
Esempio
<!-- Centered nav -->
<ul class="nav justify-content-center">
<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
Navigazione verticale
Aggiungi la .flex-columnclasse per creare un nav verticale:
Esempio
<ul class="nav
flex-column">
Schede
Trasforma il menu di navigazione in schede di navigazione con la .nav-tabsclasse. Aggiungi la .activeclasse al collegamento attivo/corrente. Se vuoi che le schede siano attivabili, vedi l'ultimo esempio in questa pagina.
Esempio
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Pillole
Trasforma il menu di navigazione in pillole di navigazione con la .nav-pillsclasse. Se vuoi che le pillole siano commutabili, guarda l'ultimo esempio in questa pagina.
Esempio
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Compresse/pillole giustificate
Giustifica le compresse/pillole con la .nav-justifiedclasse (uguale larghezza):
Esempio
<ul class="nav nav-pills
nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
Pillole con Dropdown
Esempio
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Schede con menu a discesa
Esempio
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Schede attivabili/dinamiche
CASA
Il dolore stesso è importante, ma il dolore è accresciuto dal processo adipico, ma gli do il tempo di ridurlo in modo da fare un ottimo lavoro e dolore.
Per rendere le schede attivabili, aggiungi l' data-toggle="tab"attributo a ciascun collegamento. Quindi aggiungi una .tab-paneclasse con un ID univoco per ogni scheda e avvolgili all'interno di un
<div>elemento con class .tab-content.
Se vuoi che le schede svaniscano in entrata e in uscita quando fai clic su di esse, aggiungi la
.fadeclasse a .tab-pane:
Esempio
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="tab"
href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
Pillole attivabili/dinamiche
CASA
Il dolore stesso è importante, ma il dolore è accresciuto dal processo adipico, ma gli do il tempo di ridurlo in modo da fare un ottimo lavoro e dolore.
Lo stesso codice si applica alle pillole; cambia solo l'attributo di attivazione/disattivazione dei dati in data-toggle="pill":
Esempio
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
Riferimento completo di Bootstrap 4 Nav
Per un riferimento completo di tutte le opzioni, i metodi e gli eventi delle schede, vai al nostro Bootstrap 4 JS Tab Reference .