Kuinka luoda Bootstrap 5 -navigointi?
Sisältö
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.
- Perusnavilinkkien luominen
- Pystysuora nro
- Välilehdet nav
- Pillereiden lisääminen nav
- Nav pillereillä ja perustellulla kohdistuksella
- Reagoiva nav
- Navigointi pudotusvalikon kanssa
- Nav, jossa on pystysuora kieleke ja pilleri
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.
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>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:
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ä:
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:
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>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ä:
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:
Tutustu Bootstrap -navigointipalkkikomponentin opetusohjelmaan saadaksesi lisätietoja navigointipalkista.
Opi Bootstrap 5 (hakemisto )