Hvordan legge til en logo i Bootstrap -navigasjonslinjen

Flertallet av profesjonelle nettsteder viser et lite ikon ved siden av navnet sitt på hjemmesiden som heter "Logo”. Dette adressefeltikonet er også kjent som et favicon. Det gir nettstedet merkevare anerkjennelse og autoritet. Mer spesifikt tilbyr Bootstrap en klasse “Navbar-merke”For å legge til en logo på nettstedet. Denne klassen kan brukes på de fleste av elementene. Imidlertid er "" "-merket best for å plassere en logo.

Dette innlegget vil dekke:

• Hvordan legge til en logotekst i Bootstrap -navigasjonslinjen?
• Hvordan legge til et logobilde i Bootstrap -navigasjonslinjen?

Hvordan legge til en logotekst i Bootstrap -navigasjonslinjen?

Følg trinnene som er nevnt nedenfor for å lage en navigasjonslinje:

• Legg til en "
• Bruk deretter “”Element med klassen“Navbar-merke”For å inkludere en logotekst.
• Etter å ha lagt til logoen, implementer "
  ”Og“
  • ”Elementer for å legge til navigasjonsmenyelementene.

  Html

  Klassene som er spesifisert i kodeblokken ovenfor, er forklart nedenfor:

  • “Navbar”Og“Navbar-default”Brukes til å lage en standard navigasjonslinje.
  • “Navbar-Expand-lg”Klasse gjør en navigasjonslinje lydhør.
  • “Navbar-lys”Angir tekstfargen på navigasjonslinjen til mørke. Det brukes når elementet har en lys bakgrunn.
  • “BG-lys”Justerer navigasjonslinjens bakgrunnsfarge til en lysegrå.
  • “Nav-element”Klasse brukes til å legge til navigasjonselementene.
  • “aktiv”Klasse gjør elementet høydepunkt eller skiller seg ut for å vise at det for øyeblikket er aktivt.
  • “Nav-link”Gir stiler for navigasjonslenkene.

  Produksjon
  

  Hvordan legge til et logobilde i Bootstrap -navigasjonslinjen?

  For å plassere et bilde som en logo, bruk "”Tag i stedet for tekst ved å følge trinnene:

  • For det første “”Tag er plassert med klassen“Navbar-merke”. “href”Attributt til“”Tag inneholder referansen til den koblede siden.
  • Logobildet er plassert inne i “”Element. “SRC”, “bredde” og “høyde” -attributter brukes til å justere bildet.
  • “src”Attributt angir bilde -url.
  • “bredde”Og“høyde”Bestem bildens bredde og høyde:
  "Bredde" og "høyde" bestemmer bildens bredde og høyde:
  
  
  

  Produksjon
  

  Det kan observeres at vi har lagt til logoen for den opprettede websiden med hell.

  Konklusjon

  For å legge til en logo, oppretter først en navigasjonslinje ved hjelp av "