Jak dodać logo do paska nawigacji bootstrap

Większość profesjonalnych stron internetowych wyświetla niewielką ikonę obok ich nazwiska na stronie głównej o nazwie „Logo". Ta ikona paska adresowego jest również znana jako favicon. Zapewnia witrynie rozpoznawanie marki i autorytet. Mówiąc dokładniej, Bootstrap oferuje klasę „Brand Navbar„Aby dodać logo do strony internetowej. Ta klasa może być stosowana do większości elementów. Jednak znacznik „” jest najlepszy do umieszczenia logo.

Ten post obejmie:

• Jak dodać tekst logo do paska nawigacji bootstrap?
• Jak dodać obraz logo do paska nawigacji bootstrap?

Jak dodać tekst logo do paska nawigacji bootstrap?

Aby utworzyć pasek nawigacyjny, postępuj zgodnie z poniższymi krokami:

• Dodać "
• Następnie użyj „„Element z klasą”Brand Navbar”Aby dołączyć tekst logo.
• Po dodaniu logo zaimplementuj „
  " I "
  • ”Elementy do dodania elementów menu nawigacyjnego.

  Html

  Klasy określone w powyższym bloku kodu wyjaśniono poniżej:

  • "Navbar" I "navbar-default”Służą do utworzenia standardowego paska nawigacyjnego.
  • "Navbar-Expand-lg„Klasa sprawia, że ​​pasek nawigacyjny responuje.
  • "Light navbar”Ustawia kolor tekstu paska nawigacyjnego na ciemność. Jest używany, gdy element ma lekkie tło.
  • "BG Light”Dostosowuje kolor tła paska nawigacyjnego do jasnoszarego.
  • "Nav-Item„Klasa jest wykorzystywana do dodawania elementów nawigacyjnych.
  • "aktywny”Klasa sprawia, że ​​element jest wyróżnieniem lub wyróżnia się, pokazując, że jest on obecnie aktywny.
  • "Nav-Link”Zapewnia style linków nawigacyjnych.

  Wyjście
  

  Jak dodać obraz logo do paska nawigacji bootstrap?

  Aby umieścić obraz jako logo, użyj „„Tag zamiast tekstu, postępując zgodnie z krokami:

  • Po pierwsze, „„Tag jest umieszczony w klasie”Brand Navbar". „„Href”Atrybut„”Tag zawiera odniesienie ze strony połączonej.
  • Obraz logo jest umieszczony w „" element. Atrybuty „SRC”, „Szerokość” i „Wysokość” są wykorzystywane do dostosowania obrazu.
  • „„src”Atrybut ustawia adres URL obrazu.
  • „„szerokość" I "wysokość„Określ szerokość i wysokość obrazu:
  „Szerokość” i „wysokość” określają szerokość i wysokość obrazu:
  
  
  

  Wyjście
  

  Można zauważyć, że pomyślnie dodaliśmy logo dla utworzonej strony internetowej.

  Wniosek

  Aby dodać logo, najpierw utwórz pasek nawigacyjny za pomocą „