Så denne artikkelen gir deg detaljert kunnskap om
Så i dag skal vi diskutere forskjellige NAV -menyer (navigasjonsmenyer) som en bruker kan bruke i henhold til kravet til å lage et responsivt design.
Hvordan lage en grunnleggende NAV?
Grunnleggende NAV nedenfor er opprettet ved hjelp av .nav klasse med
Men i Bootstrap 5 kan vi bruke NAV som en HTML -tag
Vi kan også endre den horisontale eller vertikale justeringen av NAV -innholdet i henhold til designbehovet.
Horisontal innretting
Start
For å justere NAV-innholdet horisontalt i starten, bruk "Justify-Content-Start" -klassen:
Senter
For å justere NAV-innholdet horisontalt i sentrum, bruk "Justify-Content-Center" -klassen:
Slutt
For å justere NAV-innholdet horisontalt til slutt, bruk "Justify-Content-End" -klassen:
Vertikal justering
For å justere NAV-innholdet vertikalt, bruk "Flex-Column" -klassen:
Slik er en NAV -meny justert vertikalt.
Bootstrap -menystiler
Bootstrap -menyer er klassifisert i to stilkategorier:
Tabs
For å konvertere nav -menyen til faner, bare legg til .Nav Nav-Tabs klasse til din
Faner som bruker
Slik bruker faner
Faner som bruker stikkord
Slik bruker faner Taggen opprettes.
Piller
For å konvertere nav -menyen til piller, bare legg til .Nav Nav-Pills klasse til din
Piller som bruker
Slik bruker piller
Piller som bruker stikkord
Slik bruker piller
Faner med rullegardinmeny ved hjelp av
For å opprette faner med rullegardinmeny ved hjelp av Tag, bruk .fall ned klasse med .Nav-element klasse og pakk den rundt en ankerkode som inneholder .Nav-link, .rullegardin-toggle klasser sammen med Data-BS-Toggle = "Dropdown" Egenskap. Etterpå pakk denne ankerkoden rundt
Tag som inneholder .nedtrekksmenyen klasse, pakket rundt tag som inneholder ankerkode med .rullegardin-element Klasse som fører til rullegardinmenyelementer.
Dette er hvordan faner med rullegardinmenyen bruker
Faner med rullegardinmeny ved hjelp av stikkord
For å opprette faner med rullegardinmeny ved hjelp av
Tag, bruk .fall ned klasse med .Nav-element klasse og pakk den rundt en ankerkode som inneholder .Nav-link, .rullegardin-toggle klasser sammen med Data-BS-Toggle = "Dropdown" Egenskap. Etterpå pakk denne ankerkoden rundt
Tag som inneholder .nedtrekksmenyen klasse, pakket rundt tag som inneholder ankerkode med .rullegardin-element Klasse som fører til rullegardinmenyelementer.
Dette er hvordan faner med rullegardinmenyer bruker
Piller med rullegardinmeny ved hjelp av
Å lage piller med rullegardinmeny ved hjelp av Tag, bruk .fall ned klasse med .Nav-element klasse og pakk den rundt en ankerkode som inneholder .Nav-link, .rullegardin-toggle klasser sammen med Data-BS-Toggle = "Dropdown" Egenskap. Etterpå pakk denne ankerkoden rundt
Tag som inneholder .nedtrekksmenyen klasse, pakket rundt tag som inneholder ankerkode med .rullegardin-element Klasse som fører til rullegardinmenyelementer.
Slik piller med en rullegardinmeny ved hjelp av
Piller med rullegardinmeny ved hjelp av stikkord
Å lage piller med rullegardinmeny ved hjelp av Tag, bruk .fall ned klasse med .Nav-element klasse og pakk den rundt en ankerkode som inneholder .Nav-link, .rullegardin-toggle klasser sammen med Data-BS-Toggle = "Dropdown" Egenskap. Etterpå pakk denne ankerkoden rundt
Tag som inneholder .nedtrekksmenyen klasse, pakket rundt tag som inneholder ankerkode med .rullegardin-element Klasse som fører til rullegardinmenyelementer.
Slik piller med en rullegardinmeny ved hjelp av
Vertikale piller
For å lage vertikale piller, bare legg til en klasse .Flex-kolonne med .Nav-pills klasse.
Fyll og rettferdiggjøre faner og piller -meny
.Nav-fylling Klasse brukes til å fylle rom på uberettiget måte mens .nav-rettferdig Klasse brukes til å fylle rom på berettiget måte.
Faner med .Nav-fylling
For å fylle de avdekkede rommene til en beholder bare legg til .Nav-fylling klasse med .Nav Nav-Tabs. Men .Nav-fylling Klassen fylte bare mellomrommene, men rettferdiggjorde dem ikke.
Dette er slik faner med .Nav-fylling er opprettet.
Faner med .nav-rettferdig
.nav-rettferdig Klasse fyller ikke bare de ideelle rommene, men distribuerer det også like blant alle NAV -varene.
Dette er slik faner med .nav-rettferdig er opprettet.
Piller med .Nav-fylling
For å fylle de avdekket rommene til en beholder, kan du bare legge til en .Nav-fylling klasse med .Nav Nav-Pills. Men .Nav-fylling Klassen fylte bare mellomrommene, men rettferdiggjorde dem ikke.
Slik piller med .Nav-fylling er opprettet.
Piller med .nav-rettferdig
.nav-rettferdig Klasse fyller ikke bare de ideelle rommene, men distribuerer det også like blant alle NAV -varene.
Slik piller med .nav-rettferdig er opprettet.
Konklusjon
Nav -menyer opprettes ved hjelp av