Bootstrap 5 Barra di Navigazione

Barra di navigazione

La barra di navigazione è la pagina di intestazione di navigazione situata in alto nella pagina:

Barra di navigazione di base

Utilizzando Bootstrap, la barra di navigazione può essere espansa o ripiegata in base alla dimensione dello schermo.

Utilizza .navbar Classe per creare la barra di navigazione standard, seguita dalle classi di piegatura responsiva:.navbar-expand-xxl|xl|lg|md|sm（posizionati orizzontalmente su dispositivi di grande, molto grande, grande, medio o piccolo schermo, o stackati verticalmente su schermi piccoli）。

Per aggiungere link alla barra di navigazione, usa class="navbar-nav" con <ul> elemento (o <div>）。Aggiungi quindi l'elemento .nav-item Classe <li> elemento, seguito da .nav-link Classe <a> Elemento:

Esempio

<!-- barra di navigazione orizzontale grigia che diventa verticale sui dispositivi di piccolo schermo -->
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <!-- link -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </div>
</nav>

Prova tu stesso

barra di navigazione verticale

Elimina .navbar-expand-* La classe può creare una barra di navigazione sempre verticale:

Esempio

<!-- barra di navigazione verticale grigia -->
<nav class="navbar bg-light">
  ...
</nav>

Prova tu stesso

barra di navigazione centrata

Aggiungi .justify-content-center La classe può centrare la barra di navigazione:

Esempio

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  ...
</nav>

Prova tu stesso

barra di navigazione colorata

Usa qualsiasi .bg-color Cambia il colore di sfondo della barra di navigazione con le classi:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Suggerimento:Utilizza .navbar-dark Aggiungi il colore del testo bianco a tutti i link della barra di navigazione, o usa .navbar-light Aggiungi il colore del testo nero.

Esempio

<!-- colore grigio di sfondo, testo bianco -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        活动
      </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 active" href="#">Attivo</a>
      </li>
    </ul>
  </div>
</nav>
<a class="nav-link disabled" href="#">Disabilitato</a>
<!-- Sfondo nero, testo bianco -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Sfondo blu, testo bianco -->

Prova tu stesso

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>Stato attivo/disabilitato: .active La classe a <a> L'elemento può evidenziare il link attuale, o aggiungere .disabled La classe per indicare che il link non è cliccabile.

Marchio / Logo

.navbar-brand per evidenziare il nome del marchio/pagebrand/projecto della pagina:

Esempio

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
  </div>
</nav>

Prova tu stesso

Se si utilizza la classe .navbar-brand Quando la classe viene utilizzata insieme all'immagine, Bootstrap 5 imposta automaticamente lo stile dell'immagine, adattandosi verticalmente alla barra di navigazione.

Esempio

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill"> 
    </a>
  </div>
</nav>

Prova tu stesso

Testo della barra di navigazione

Utilizza .navbar-text La classe .navbar-text allinea verticalmente qualsiasi elemento non collegato nella barra di navigazione (assicurarsi di avere il giusto spaziatore interno e colore del testo).

Esempio

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <span class="navbar-text">Testo della barra di navigazione</span>
  </div>
</nav>

Prova tu stesso

Spesso, specialmente sugli schermi piccoli, si desidera nascondere i link di navigazione e sostituirli con un pulsante, che mostra questi link quando viene cliccato.

Per creare una barra di navigazione ripiegabile, utilizzare la classe già impostata class="navbar-toggler"、data-bs-toggle="collapse" e data-bs-target="#thetarget" e poi avvolgere il contenuto della navigazione (link ecc.) nel class="collapse navbar-collapse" l'elemento <div> successivo, seguendo il pulsante della data-bs-target corrispondente id："thetarget"。

Esempio

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-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>
      </ul>
    </div>
  </div>
</nav>

Prova tu stesso

Suggerimento:È possibile anche rimuovere .navbar-expand-md Le classi nascondono sempre i link della barra di navigazione e mostrano il pulsante di commutazione.

Barra di navigazione con menu a discesa

La barra di navigazione può contenere menu a discesa:

Esempio

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Menu a discesa</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link</a></li>
    <li><a class="dropdown-item" href="#">Un altro link</a></li>
    <li><a class="dropdown-item" href="#">Terzo link</a></li>
  </ul>
</li>

Prova tu stesso

Menu e pulsanti della barra di navigazione

È possibile includere anche moduli nella barra di navigazione:

Esempio

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Cerca">
        <button class="btn btn-primary" type="button">Cerca</button>
      </form>
    </div>
  </div>
</nav>

Prova tu stesso

Barra di navigazione posizionata in modo fisso

La barra di navigazione può anche essere fissata nella parte superiore o inferiore della pagina.

La barra di navigazione fissa rimane visibile in una posizione fissa indipendente dalla scorrimento della pagina (alto o basso).

.fixed-top La classe mantiene la barra di navigazione fissa nella paginaTop:

Esempio

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>

Prova tu stesso

Utilizza la classe .fixed-bottom per mantenere la barra di navigazione fissa nella parte inferiore della pagina:

Esempio

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>

Prova tu stesso

Utilizza .sticky-top La classe mantiene la barra di navigazione bloccata/ferma nella pagina quando la pagina scorreTop。

Nota:Questo tipo non funziona in IE11 e versioni precedenti (consideralo come position:relative）。

Esempio

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>

Prova tu stesso