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?
For å lage en enkel navigasjonslinje ved hjelp av bootstrap -rammeverket, følg trinnene nedenfor:
Beskrivelsen av de viktige bootstrap -klassene som brukes i kodebiten ovenfor er gitt nedenfor:
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:
Nedtrekksmenyen
klasse = "Caret">
I koden ovenfor:
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:
Pakk deretter navigasjonsmenyelementene i et DIV -element som har ID "Mynavbar”:
I ovennevnte kodebit:
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