TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda Bootstrap 5 -navigointi?

1

Bootstrapin nav -komponenttia käytetään luomaan eri tyylejä sisältävien linkkien luettelo. Periaatteessa luettelolinkkejä käytetään navigointivalikkona. Tässä opetusohjelmassa tutustutaan erilaisiin linkkityyleihin, jotka voidaan luoda Bootstrap 5 nav -komponentilla.

Bootstrap 5 Navsin opetusohjelma

  1. Perusnavilinkkien luominen
  2. Pystysuora nro
  3. Välilehdet nav
  4. Pillereiden lisääminen nav
  5. Nav pillereillä ja perustellulla kohdistuksella
  6. Reagoiva nav
  7. Navigointi pudotusvalikon kanssa
  8. Nav, jossa on pystysuora kieleke ja pilleri

1 Navigoinnin peruslinkit

Oletus- ja perusnavigointilaitteet näyttävät tältä:

Perusnavin koodi on seuraava:

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

Alla on luokat, joita käytetään oletusnav -komponentin luomisessa:

  • Koko nav on järjestämätön luettelo, joka käyttää ".nav" -luokkaa.
  • Jokainen
  • -tunniste edustaa navigointikohtaa luokkaa ".nav-item" käyttäen.
  • Sisällä
  • -tunnistetta, ankkuritunnistetta käytetään linkin luomiseen todelliseen tekstiin käyttämällä ".nav-link" -luokkaa.

Navin sisältö voidaan kohdistaa keskelle ja oikealle käyttämällä lisäluokkia sisällä

merkitse alla:

  • <ul class = "nav justify-content-center”>-keskittämistä varten.
  • <ul class = “nav justify-content-end”>-kohdistus loppuun tai oikealle.
  • <ul class = “nav nav-fill”>-täytä koko vaakasuuntainen leveys.
  • <ul class = “nav nav navified”>-täytä koko vaakasuuntainen leveys jokaisella navigointilinkillä, jonka leveys on sama.

2 Pystysuora nav

Voit käyttää "flex-column" -luokkaa koko navigointisisällön kohdistamiseen pystysuoriin linkkeihin vaakasuuntaisen sijasta alla olevan kuvan mukaisesti:

Ja koodi pystysuoran nav -komponentin luomiseksi on alla:

<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 Välilehtien luominen Nav

Voit myös luoda helposti välilehtiä sisältävää sisältöä käyttämällä .nav-tabs-luokkaa

tunniste kuten alla:

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

Luokka ".nav-välilehdet" muuntaa oletusnavigoinnin alla olevaan välilehteen:

Kuinka luoda Bootstrap 5 -navigointi?

4 Pillereiden lisääminen Nav

Voit lisätä pillereitä, joissa on ensisijainen taustaväri, linkkeihin käyttämällä .nav-pills-luokkaa.

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

Tulos selaimessa näyttää tältä:

Kuinka luoda Bootstrap 5 -navigointi?

5 Nav, pillereillä ja oikeutetulla kohdistuksella

Jos haluat navigointikohteiden olevan oikeassa koko leveydellä, lisää ".nav-fill" -luokka kuten alla:

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

Se tuottaa seuraavan tuloksen:

Kuinka luoda Bootstrap 5 -navigointi?

6 Reagoiva Nav -komponentti

Tällä hetkellä luodut nav -komponentit eivät ole reagoivia, ja sinun on lisättävä lisää flexbox -apuohjelmaluokkia, jotta se reagoi. Voimme esimerkiksi tehdä siitä joustavan keskikokoisista laitteista käyttämällä ".flex-md-row" -luokkaa, kuten alla:

<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 Pudotusvalikon lisääminen Nav

Lisää ".dropdown" -luokalla pudotusvalikko ja sitten valikkokohteet ".dropdown-menu"-ja ".dropdown-item" -luokkien avulla.

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

Avattava navigointikomponentti pillereineen näyttää tältä:

Kuinka luoda Bootstrap 5 -navigointi?

8 Nav, jossa on pystysuorat välilehdet ja pillerit

Voit myös käyttää ruudukon asettelua ja luoda pystysuoran välilehtisisällön käyttämällä navigointikomponenttia pillereiden kanssa.

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

Se tuottaa seuraavan tuloksen selaimessa:

Kuinka luoda Bootstrap 5 -navigointi?

Tutustu Bootstrap -navigointipalkkikomponentin opetusohjelmaan  saadaksesi lisätietoja navigointipalkista.


Opi Bootstrap 5 (hakemisto )


Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja