Bootstrap 5 Navigazione

menu di navigazione

Se si desidera creare un menu orizzontale semplice, aggiungi .nav 类添加到 <ul> elementi, quindi per ogni <li> elementi .nav-item e aggiungi .nav-link Aggiungi la classe ai loro link:

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="#">Disabilitato</a>
  </li>
</ul>

Prova personalmente

allinea la barra di navigazione

aggiungi .justify-content-center La classe allinea la navigazione al centro, aggiungi .justify-content-end La classe allinea la navigazione a destra.

Esempio

<!-- Allineamento al centro della navigazione -->
<ul class="nav justify-content-center">
<!-- Allineamento a destra della navigazione -->
<ul class="nav justify-content-end">

Prova personalmente

barra di navigazione verticale

aggiungi .flex-column Classi per creare una navigazione verticale:

Esempio

<ul class="nav flex-column">

Prova personalmente

Schede

Utilizzate .nav-tabs Classi per trasformare il menu di navigazione in schede di navigazione. E aggiungete .active Classi per aggiungere attività/collegamento attuale. Se desiderate che le schede siano intercambiabili, consultate l'ultimo esempio di questa pagina.

Esempio

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Attivo</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="#">Disabilitato</a>
  </li>
</ul>

Prova personalmente

capsule

Utilizzate .nav-pills Classi per impostare il menu di navigazione come navigazione a capsula. Se desiderate che le capsule siano intercambiabili, consultate l'ultimo esempio di questa pagina.

Esempio

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Attivo</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="#">Disabilitato</a>
  </li>
</ul>

Prova personalmente

schede a schede/navigazione a capsula uniforme

Utilizzate .nav-justified Classi (uniformi) per allineare etichette/capsule:

Esempio

<ul class="nav nav-pills nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>

Prova personalmente

Menu a discesa a capsula

Esempio

<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="#">Menu a discesa</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link 1</a></li>
      <li><a class="dropdown-item" href="#">Link 2</a></li>
      <li><a class="dropdown-item" href="#">Link 3</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabilitato</a>
  </li>
</ul>

Prova personalmente

Menu a discesa delle schede

Esempio

<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="#">Menu a discesa</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link 1</a></li>
      <li><a class="dropdown-item" href="#">Link 2</a></li>
      <li><a class="dropdown-item" href="#">Link 3</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabilitato</a>
  </li>
</ul>

Prova personalmente

schede intercambiabili / schede dinamiche

Per rendere le schede intercambiabili, aggiungete data-toggle="tab" 属性添加到每个链接。然后为每个选项卡添加有唯一 ID 的 .tab-pane 类，并将它们包装在带有 .tab-content 类的 <div> all'elemento.

Se desiderate che le schede si animino con sfumature quando vengono cliccate, aggiungete .fade 类添加到 .tab-pane：

Esempio

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
  </li>
</ul>
<!-- Panelli delle schede -->
<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>

Prova personalmente

Navigazione a capsula scambiabile / dinamica

Lo stesso codice è applicabile alla navigazione; cambia solo l'attributo data-toggle in data-toggle="pill" Fatto:

Esempio

<!-- Capsule di navigazione -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="pill" href="#home">Chunri</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu1">Chuxia</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu2">Shanxing</a>
  </li>
</ul>
<!-- Scheda della finestra delle opzioni -->
<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>

Prova personalmente