TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare la navigazione Bootstrap 5?

4

Il componente nav in Bootstrap viene utilizzato per creare un elenco di collegamenti con stili diversi. Fondamentalmente i collegamenti all’elenco vengono utilizzati come menu di navigazione. In questo tutorial esploriamo i diversi stili di collegamenti che possono essere creati con il componente nav Bootstrap 5.

Tutorial Bootstrap 5 Navs

  1. Creazione di collegamenti di navigazione di base
  2. No verticale
  3. Schede con navigazione
  4. Aggiunta di pillole in nav
  5. Nav con pillole e allineamento giustificato
  6. Navigazione reattiva
  7. Navigazione con menu a tendina
  8. Navigatore con tab verticale e pillola

1 Collegamenti di navigazione di base

Il navigatore predefinito e di base apparirà come di seguito:

Il codice per il navigatore di base è il seguente:

<ul class="nav"> <li class="nav-item"> <a class="nav-link active" 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>

Di seguito sono riportate le classi utilizzate nella creazione del componente di navigazione predefinito:

  • L’intero nav è un elenco non ordinato che utilizza la classe ".nav".
  • Ogni
  • tag rappresenta un elemento di navigazione utilizzando la classe ".nav-item".
  • Dentro
  • tag, il tag di ancoraggio viene utilizzato per creare il collegamento sul testo effettivo utilizzando la classe ".nav-link".

Il contenuto di nav può essere allineato al centro ea destra utilizzando classi aggiuntive all’interno

taggare come di seguito:

  • <ul class="nav require-content-center"> – per l’allineamento al centro.
  • <ul class="nav require-content-end"> – per l’allineamento alla fine oa destra.
  • <ul class="nav nav-fill"> – riempie l’intera larghezza orizzontale.
  • <ul class="nav nav-justified"> – riempi l’intera larghezza orizzontale con ogni collegamento di navigazione ha la stessa larghezza.

2 Navigazione verticale

È possibile utilizzare la classe "flex-column" per allineare l’intero contenuto di nav in collegamenti verticali anziché orizzontali come mostrato di seguito:

E il codice per la creazione del componente di navigazione verticale è di seguito:

<ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" 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>

3 Creazione di schede con Nav

Puoi anche creare facilmente contenuti a schede utilizzando la classe ".nav-tabs" all’interno

tag come di seguito:

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" 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>

La classe ".nav-tabs" convertirà il nav predefinito in una scheda come di seguito:

Come creare la navigazione Bootstrap 5?

4 Aggiunta di pillole in Nav

Puoi aggiungere pillole, box con colore di sfondo primario, ai link usando la classe ".nav-pills".

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" 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>

Il risultato sul browser sarà simile al seguente:

Come creare la navigazione Bootstrap 5?

5 Nav con pillole e allineamento giustificato

Se vuoi che gli elementi di navigazione siano giustificati per l’intera larghezza, aggiungi la classe ".nav-fill" come di seguito:

<ul class="nav nav-pills nav-fill"> <li class="nav-item"> <a class="nav-link active" 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>

Produrrà il seguente risultato:

Come creare la navigazione Bootstrap 5?

6 Componente di navigazione reattivo

A partire da ora i componenti di navigazione creati non sono reattivi e dovresti aggiungere ulteriori classi di utilità flexbox per renderlo reattivo. Ad esempio, possiamo renderlo flessibile dai dispositivi di medie dimensioni utilizzando la classe ".flex-md-row" come di seguito:

<ul class="nav nav-pills flex-column flex-md-row"> <li class="nav-item"> <a class="nav-link active" 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>

7 Aggiunta di menu a discesa in Nav

Utilizzare la classe ".dropdown" per inserire un menu a discesa e quindi le voci di menu utilizzando le classi ".dropdown-menu" e ".dropdown-item".

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> <a class="dropdown-item" href="#">Link 4</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Link 5</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 6</a> </li> </ul>

Il componente di navigazione a discesa con le pillole avrà il seguente aspetto:

Come creare la navigazione Bootstrap 5?

8 Nav con schede verticali e pillole

Puoi anche utilizzare il layout della griglia e creare un contenuto a schede verticali utilizzando il componente nav con le pillole.

<div class="row"> <div class="col-3"> <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"> <a class="nav-link active" id="v-pills-tab1-tab" data-toggle="pill" href="#v-pills-tab1" role="tab" aria-controls="v-pills-tab1" aria-expanded="true">TAB 1</a> <a class="nav-link" id="v-pills-tab2-tab" data-toggle="pill" href="#v-pills-tab2" role="tab" aria-controls="v-pills-tab2" aria-expanded="true">TAB 2</a> <a class="nav-link" id="v-pills-tab3-tab" data-toggle="pill" href="#v-pills-tab3" role="tab" aria-controls="v-pills-tab3" aria-expanded="true">TAB 3</a> <a class="nav-link" id="v-pills-tab4-tab" data-toggle="pill" href="#v-pills-tab4" role="tab" aria-controls="v-pills-tab4" aria-expanded="true">TAB 4</a> </div> </div> <div class="col-9"> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-tab1" role="tabpanel" aria-labelledby="v-pills-home-tab">Here is a content for tab 1.</div> <div class="tab-pane fade" id="v-pills-tab2" role="tabpanel" aria-labelledby="v-pills-tab2-tab">Here is a content for tab 2.</div> <div class="tab-pane fade" id="v-pills-tab3" role="tabpanel" aria-labelledby="v-pills-tab3-tab">Here is a content for tab 3.</div> <div class="tab-pane fade" id="v-pills-tab4" role="tabpanel" aria-labelledby="v-pills-tab4-tab">Here is a content for tab 4.</div> </div> </div> </div>

Produrrà il seguente risultato sul browser:

Come creare la navigazione Bootstrap 5?

Checkout tutorial sul componente navbar Bootstrap  per saperne di più su navbar.


Impara Bootstrap 5 (Indice )


Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More