NAV E PAGINATION IN BOOTSTRAP 5

NAV MENUS

Se vuoi creare un semplice menu orizzontale, aggiungi la classe .nav a un elemento <ul>, seguita da .nav-item per ogni <li> e aggiungi la classe .nav-link ai loro link:

ESEMPIO DI CODICE

Aggiungi la classe .justify-content-center per centrare il nav e la classe .justify-content-end per allineare a destra il nav.

<!– Centered nav –>
<ul class=”nav justify-content-center“>

<!– Right-aligned nav –>
<ul class=”nav justify-content-end“>

Copy to Clipboard

VERTICAL NAV

Aggiungi la classe .flex-column per creare una nav verticale:

CODICE PER CREARE UNA NAV VERTICALE

Copy to Clipboard

TABS

Trasforma il menu di navigazione in schede di navigazione con la classe .nav-tabs. Aggiungi la classe .active al collegamento attivo/corrente. Le schede possono essere attivabili, come vedremo nell’ultimo esempio.

ESEMPIO DI CODICE PER LE TABS

Copy to Clipboard

<div class="container mt-3">
  <h2>Navigation Tabs</h2>
  <p>Trasforma il menu di navigazione in schede di navigazione con la classe .nav nav-tabs. 
      Aggiungi la classe attiva al collegamento attivo/corrente.
      Se vuoi che le schede siano commutabili, vedi l'ultimo esempio nella pagina del tutorial.
  </p>
  <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>
</div>
</body>
</html>

PILLS

Trasforma il menu di navigazione in pills (pillole di navigazione) con la classe .nav-pills. Se vuoi che le pills siano commutabili, guarda l’ultimo esempio in questa pagina.

<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>
</ul>

CODICE PILLS CON DROPDOWN E TABS CON DROPDOWN

Copy to Clipboard

<div class="container mt-3">
  <h2>Pills with Dropdown</h2>
  <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-bs-toggle="dropdown" href="#">Dropdown</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="#">Disabled</a>
    </li>
  </ul>
</div>
<hr>
<div class="container mt-3">
    <h2>Tabs with Dropdown</h2>
<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-bs-toggle="dropdown" href="#">Dropdown</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="#">Disabled</a>
    </li>
  </ul>
</div>
</body>
</html>

SCHEDE ATTIVABILI DINAMICHE

Per rendere le schede attivabili, aggiungi l’attributo data-bs-toggle=”tab” a ciascun collegamento. Quindi aggiungi una classe .tab-pane con un ID univoco per ogni scheda e avvolgili all’interno di un elemento <div> con classe .tab-content. Se vuoi che le schede si sbiadiscano in entrata e in uscita quando fai clic su di esse, aggiungi la classe .fade al riquadro .tab:

CODICE DI ESEMPIO PER PILLS E TABS

Copy to Clipboard

<div class="container mt-3">
  <h2>Toggleable Tabs</h2>
  <br>
  
  <ul class="nav nav-tabs" role="tablist">
    <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>

<div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
          dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
          totam rem aperiam.</p>
    </div>
  </div>
</div>
</body>
</html>

Copy to Clipboard

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>Toggleable Pills</h2>
  <br>
  
  <ul class="nav nav-pills" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-bs-toggle="pill" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="pill" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="pill" href="#menu2">Menu 2</a>
    </li>
  </ul>

<div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
  </div>
</div>
</body>
</html>

BOOTSTRAP 5 PAGINATION

Se hai un sito web con molte pagine, potresti voler aggiungere una sorta di impaginazione a ciascuna pagina.

Per creare un’impaginazione di base, aggiungi la classe .pagination a un elemento <ul>. Quindi aggiungi .page-item a ciascun elemento <li> e una classe .page-link a ciascun collegamento all’interno di <li>:

Copy to Clipboard

<div class="container mt-3">
  <h2>Pagination</h2>
  <p>Per creare un'impaginazione di base, aggiungi la classe .pagination a un elemento ul. 
      Quindi aggiungi .page-item a ciascun elemento li e una classe .page-link a ciascun collegamento 
      all'interno di li:</p>                  
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</div>
</body>
</html>

ACTIVE STATE

La classe .active viene utilizzata per “evidenziare” la pagina corrente.

Copy to Clipboard

DISABILITARE LO STATO

La classe .disabled viene utilizzata per i collegamenti non cliccabili:

GRANDEZZA DI PAGINAZIONE

Aggiungi la classe .pagination-lg per blocchi più grandi o .pagination-sm per blocchi più piccoli:

LINK AI POST PRECEDENTI

BOOTSTRAP 5

LINK AL CODICE SU GITHUB

GITHUB