So fügen Sie der Bootstrap -Navigationsleiste ein Logo hinzu

Die Mehrheit der professionellen Websites zeigt ein kleines Symbol neben ihrem Namen auf der Homepage namens “Logo”. Dieses Adressleistensymbol ist auch als Favicon bekannt. Es bietet der Website Markenerkennung und Autorität. Insbesondere bietet Bootstrap eine Klasse “Navigationsbrand”Um der Website ein Logo hinzuzufügen. Diese Klasse kann auf die meisten Elemente angewendet werden. Das "" -Tag ist jedoch am besten zum Platzieren eines Logos geeignet.

Dieser Beitrag wird abdecken:

• So fügen Sie der Bootstrap -Navigationsleiste einen Logo -Text hinzu?
• So fügen Sie der Bootstrap -Navigationsleiste ein Logo -Bild hinzu?

So fügen Sie der Bootstrap -Navigationsleiste einen Logo -Text hinzu?

Befolgen Sie die unten genannten Schritte, um eine Navigationsleiste zu erstellen:

• Füge hinzu ein "
• Dann verwenden Sie die “"Element mit der Klasse"Navigationsbrand”Um einen Logo -Text einzuschließen.
• Implementieren Sie nach dem Hinzufügen des Logos das “
  " Und "
  • Elemente, um die Menüelemente der Navigation hinzuzufügen.

  Html

  Die im obigen Codeblock angegebenen Klassen werden unten erläutert:

  • “Navillat" Und "Navi-Default”Werden verwendet, um eine Standardnavigationsleiste zu erstellen.
  • “navbar-expand-lgDie Klasse macht eine Navigationsleiste reaktionsschnell.
  • “Navigationslicht”Legt die Textfarbe der Navigationsleiste auf Dunkelheit fest. Es wird verwendet, wenn das Element einen leichten Hintergrund hat.
  • “BG-Licht”Passt die Hintergrundfarbe der Navigationsleiste an ein hellgrau.
  • “NAV-ITEMDie Klasse wird verwendet, um die Navigationselemente hinzuzufügen.
  • “aktivDie Klasse lässt das Element hervorheben oder hervorheben, um zu zeigen, dass es derzeit aktiv ist.
  • “Nav-Link”Bietet Stile für die Navigationslinks.

  Ausgang
  

  So fügen Sie der Bootstrap -Navigationsleiste ein Logo -Bild hinzu?

  Verwenden Sie die “, um ein Bild als Logo zu platzieren”Tag anstelle von Text, indem Sie den Schritten folgen:

  • Erstens das ""Tag wird mit der Klasse platziert"Navigationsbrand”. Der "href”Attribut der“Das Tag enthält die Referenz der verknüpften Seite.
  • Das Logo -Bild befindet sich in die “" Element. Die Attribute „SRC“, „Breite“ und „Höhe“ werden verwendet, um das Bild anzupassen.
  • Der "srcDas Attribut legt die Bild -URL fest.
  • Der "Breite" Und "Höhe”Bestimmen Sie die Breite und Größe des Bildes:
  Die „Breite“ und „Höhe“ bestimmen die Breite und Größe des Bildes:
  
  
  

  Ausgang
  

  Es kann beobachtet werden, dass wir das Logo für die erstellte Webseite erfolgreich hinzugefügt haben.

  Abschluss

  Um ein Logo hinzuzufügen, erstellen Sie zunächst eine Navigationsleiste mit der “