TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur skapar jag Bootstrap 5 -navigering?

1

Nav -komponenten i Bootstrap används för att skapa en lista med länkar med olika stilar. I grunden används listlänkarna som en navigeringsmeny. Låt oss i denna handledning utforska olika länklägen som kan skapas med Bootstrap 5 nav -komponenten.

Handledning för Bootstrap 5 Navs

  1. Skapa grundläggande navlänkar
  2. Vertikal nr
  3. Flikar med nav
  4. Lägger till piller i nav
  5. Nav med piller och motiverad justering
  6. Lyhörd nav
  7. Navigera med rullgardinsmenyn
  8. Nav med vertikal flik och piller

1 Grundläggande navlänkar

Standard och grundläggande nav kommer att se ut nedan:

Koden för den grundläggande navigeringen är enligt nedan:

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

Nedan visas de klasser som används för att skapa standard nav -komponent:

  • Hela navet är en orörd lista med klassen ".nav".
  • Varje
  • tag representerar ett nav-objekt med klassen ".nav-item".
  • Inuti
  • tag, används ankartaggen för att skapa länken till verklig text med ".nav-link" -klassen.

Innehållet i nav kan justeras mitt och höger med hjälp av ytterligare klasser inom

tag som nedan:

  • <ul class = "nav justify-content-center”>-för mittjustering.
  • <ul class = “nav justify-content-end”>-för änd- eller högerjustering.
  • <ul class = “nav nav-fill”>-fyll i hela den horisontella bredden.
  • <ul class = “nav nav-justified”>-fyll i hela den horisontella bredden med varje navlänk som har samma bredd.

2 Vertikal Nav

Du kan använda "flex-column" -klassen för att få hela nav-innehållet att justeras i vertikala länkar istället för horisontellt enligt nedan:

Och koden för att skapa vertikal navkomponent är nedan:

<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 Skapa flikar med Nav

Du kan också enkelt skapa innehåll med flikar med klassen ".nav-tabs" inuti

tag som nedan:

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

Klassen ".nav-tabs" kommer att konvertera standardnav till en flik som nedan:

Hur skapar jag Bootstrap 5 -navigering?

4 Lägga till piller i Nav

Du kan lägga till piller, låda med primär bakgrundsfärg, till länkarna med ".nav-piller" -klassen.

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

Resultatet i webbläsaren kommer att se ut nedan:

Hur skapar jag Bootstrap 5 -navigering?

5 Nav med piller och motiverad inriktning

Om du vill att navigeringsobjekten ska vara motiverade till hela bredden lägger du till ".nav-fill" -klassen som nedan:

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

Det ger följande resultat:

Hur skapar jag Bootstrap 5 -navigering?

6 Responsiv Nav -komponent

Från och med nu är de skapade navkomponenterna inte lyhörda och du bör lägga till ytterligare flexbox -verktygsklasser för att göra det responsivt. Till exempel kan vi göra det flexibelt från medelstora enheter med klassen ".flex-md-row" som nedan:

<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 Lägga till rullgardinsmenyn i Nav

Använd ".dropdown" -klassen för att infoga en rullgardinsmeny och sedan menyalternativen med klasserna ".dropdown-menu" och ".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>

Nedrullningsbara nav -komponenten med piller kommer att se ut nedan:

Hur skapar jag Bootstrap 5 -navigering?

8 Nav med vertikala flikar och piller

Du kan också använda rutnätlayout och skapa ett vertikalt flikinnehåll med navkomponent med piller.

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

Det ger följande resultat i webbläsaren:

Hur skapar jag Bootstrap 5 -navigering?

Kolla in handledning för Bootstrap -navbar -komponent för att lära dig mer om navbar.


Lär dig Bootstrap 5 (Index )


Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer