Bootstrap | Navigasjonslinje
Navigasjonslinjen til et nettsted består av flere menyer knyttet til forskjellige nettstedseksjoner. Mer spesifikt er navigasjonslinjen en sideoverskrift som vanligvis er plassert på nettstedets topp. Ved hjelp av bootstrap -rammeverket kan vi lage en navigasjonslinje med stor letthet. Bootstrap tilbyr også flere klasser med forhåndsdefinerte stiler for å justere navigasjonslinjen.
Denne artikkelen vil guide deg på Bootstrap -navigasjonslinjen ved å illustrere emnene nedenfor:
- Hvordan lage en enkel bootstrap navigasjonslinje?
- Hvordan legge til en rullegardinmeny i navigasjonslinjen?
- Hvordan legge til ikoner i navigasjonslinjen?
- Hvordan justere navigasjonsmenyer?
- Hvordan lage en mørk navigasjonslinje?
- Hvordan fikse plasseringen av navigasjonslinjen?
- Hvordan lage en navigasjonslinje kollaps?
Hvordan lage en enkel bootstrap navigasjonslinje?
For å lage en enkel navigasjonslinje ved hjelp av bootstrap -rammeverket, følg trinnene nedenfor:
- Først, legg til “”Tag med“.Navbar”Og“.Navbar-default”Klasser.
- Legg til en "”Tag med klassen”Container-fluid”For å legge til innhold i navigasjonslinjen.
- For å inkludere en logo, opprette en "" og tilordne den en klasse "Navbar-header”.
- Innenfor dette divelementet, legg til en "”Tag for å gjøre logoen klikkbar, og angi en klasse“Navbar-merke”Til det.
- Etter det, lag en liste over menyer ved å bruke
- Tag med “nav”Og“Navbar-Nav”Klasser.
- Inne i
- tag, inkludere
- Tagger for å spesifisere elementene. Plasser sidenavnene ved hjelp av taggen for å gjøre dem klikkbare:
Beskrivelsen av de viktige bootstrap -klassene som brukes i kodebiten ovenfor er gitt nedenfor:
- “Navbar”Klasse har forhåndsdefinerte stiler for å lage en standard navigasjonslinje.
- “Navbar-default”Brukes til å lage en standard navigasjonslinje.
- “Navbar-Expand-lg”Klasse justeres for å gi fargevalgsklasser og lage en responsiv kollaps.
- “Container-fluid”Gir en beholder i full bredde.
- “Navbar-header”, En arkitektonisk klasse, tildelte området i piksler til venstre for Navbar, som tillater logoen å fylle hele plassen. Det gir også respons til Navbar-merkeklassen som har en logo og unngår å overlappe menyen med logoen.
- “Navbar-merke”Plasser logobildet eller tekst øverst i navigasjonslinjen.
Produksjon
Hvordan legge til en rullegardinmeny i navigasjonslinjen?
Du kan legge til en rullegardinmeny i navigasjonslinjen ved å bruke "fall ned”Klasse.
Følg trinnene for å se hvordan du justerer en rullegardinmeny i navigasjonslinjen:
- Legg til
- element til listen der du vil legge til en rullegardinmeny og tilordne den en klasse "fall ned”.
- For å gjøre menyen klikkbar, tildel menynavnet i taggen. Tilordne den en klasse “rullegardin-toggle”Og attributter”Data-toggle”Og“href”For å legge til en lenke til den. For å legge til et karet -symbol, må du nevne et "Caret”Klasse.
- For å liste opp menyelementene, spesifiser
- Tag med “nedtrekksmenyen”Klasse.
- Innenfor dette
- element, nevn listeelementene ved å bruke
- elementer. Hver av dem holder taggen for å angi lenker til den:
Nedtrekksmenyen
klasse = "Caret">I koden ovenfor:
- “fall ned”Klasse indikerer rullegardinmenyen.
- “rullegardin-toggle”Hjelper med å lage et interaktivt rullegardin for å klikke på menyen.
- “Caret”Oppretter pilikonet.
- “Data-toggle”Attributt brukes til å vise en skjuleseksjon på klikk.
Produksjon
Hvordan legge til ikoner i navigasjonslinjen?
Det er forskjellige glyfikoner i bootstrap som kan brukes gratis for kostnader. Mer spesifikt trenger vi et inline element, for eksempel ",”For å legge inn ikoner i navigasjonslinjen.
For å gjøre det, sett klasseattributtet til elementet som “Glyphicon”, Legg til et rom og nevner deretter“Glyphicon-Name”Som klassenavnet:
Produksjon
Hvordan justere navigasjonsmenyer?
Bootstrap tilbyr flere klasser for å angi justering av navigasjonsmenyer. For eksempel ".Navbar-høyre”Klasse justerer menyens justering til høyre.
Eksempel
Sjekk ut eksemplet nedenfor som viser hvordan du justerer de to listeelementene som skal justeres til høyre:
Produksjon
Hvordan lage en mørk navigasjonslinje?
“Navbar-Inverse”Klasse brukes til å konvertere fargen på navigasjonslinjen til mørke som følger:
Produksjon
Hvordan fikse plasseringen av navigasjonslinjen?
Mange bootstrap -posisjonsverktøy kan fordeles for å sette stilling til navigasjonslinjen. For eksempel ".Navbar-fixed-top”Fikser navigasjonslinjen øverst på siden:
Produksjon
Hvordan lage en navigasjonslinje kollaps?
Som vi vet, er hovedmålet med bootstrap -rammeverket respons. Så for å angi navigasjonslinjen på små skjermstørrelser, la oss legge til en knapp for å utvide navigasjonslinjen på klikk.
For å designe en hamburgerknapp, legg til tre stangikoner i elementet. “Ikon-bar”Klasse viser barikonet. Sett deretter attributtet “Data-toggle" med "kollapse”Verdi. “Datapål”Attributt tildeles“#Mynavbar”Å peke på IDen til div:
Her:
- “Navbar-toggle”Utvider elementene.
- “Data-toggle”Med verdien”kollapse”Bestemmer det sammenleggbare elementet skjult eller synlig på klikk.
- “Datapål”Attributt velger CSS -velgeren som kollapsoperasjonen brukes. “#Mynavbar”Er ID for Div -elementet.
Pakk deretter navigasjonsmenyelementene i et DIV -element som har ID "Mynavbar”:
I ovennevnte kodebit:
- “kollapse”Indikerer innholdet som viser eller skjuler.
- “Navbar-Collaps”Begynner navigasjonsmenyelementene i mobilvisningen.
Den undergitte utgangen betyr at navigasjonslinjen er kollapset i en knapp:
På små skjermer, for eksempel på mobil, vises navigasjonslinjen og synlig når knappen er klikket:
Det er det! Du har lært om å lage bootstrap -navigasjonslinjen ved hjelp av forskjellige klasser.
Konklusjon
For å lage en bootstrap navigasjonslinje, bruker du først HTML
- og
- Tagger for å lage en liste over menyer sammen med bootstrap -klassene. Dessuten brukes flere bootstrap -klasser for å lage en responsiv navigasjonslinje for nettstedet vårt, for eksempel ".Navbar”,“.Navbar-Expand-XL | LG | MD | SM”,“.Nav-merke", og mange flere. Denne artikkelen har forklart hvordan du lager en bootstrap -navigasjonslinje med forskjellige funksjoner.