Come aggiungere un logo alla barra di navigazione bootstrap

La maggior parte dei siti Web professionali mostra una piccola icona accanto al loro nome nella home page chiamata "Logo". Questa icona della barra degli indirizzi è anche conosciuta come Favicon. Fornisce al sito Web il riconoscimento e l'autorità del marchio. Più specificamente, Bootstrap offre una classe "Navbar-brand"Per aggiungere un logo al sito Web. Questa classe può essere applicata alla maggior parte degli elementi. Tuttavia, il tag "" è il migliore per posizionare un logo.

Questo post coprirà:

• Come aggiungere un testo logo alla barra di navigazione bootstrap?
• Come aggiungere un'immagine logo alla barra di navigazione bootstrap?

Come aggiungere un testo logo alla barra di navigazione bootstrap?

Per creare una barra di navigazione, seguire i passaggi indicati di seguito:

• Aggiungere un "
• Quindi, utilizza il ""Elemento con la classe"Navbar-brand"Per includere un testo del logo.
• Dopo aver aggiunto il logo, implementa il "
  " E "
  • "Elementi per aggiungere le voci del menu di navigazione.

  Html

  Le classi specificate nel blocco di codice sopra sono spiegate di seguito:

  • "Navbar" E "Navbar-Default"Vengono utilizzati per creare una barra di navigazione standard.
  • "Navbar-Expand-LG"La classe rende una barra di navigazione reattiva.
  • "Navbar Light"Imposta il colore del testo della barra di navigazione su scuro. Viene utilizzato quando l'elemento ha uno sfondo leggero.
  • "BG-Light"Regola il colore di sfondo della barra di navigazione su un grigio chiaro.
  • "Nav-Item"La classe viene utilizzata per aggiungere gli elementi di navigazione.
  • "attivo"La classe fa evidenziare o distinguere l'elemento per dimostrare che è attualmente attivo.
  • "Nav-link"Fornisce stili per i collegamenti di navigazione.

  Produzione
  

  Come aggiungere un'immagine logo alla barra di navigazione bootstrap?

  Per posizionare un'immagine come logo, usa il “"Tag invece del testo seguendo i passaggi:

  • In primo luogo, il "Il tag è posizionato con la classe "Navbar-brand". IL "Href"Attributo del""Il tag contiene il riferimento della pagina collegata.
  • L'immagine del logo è posizionata all'interno del “"Elemento. Gli attributi "SRC", "larghezza" e "altezza" vengono utilizzati per regolare l'immagine.
  • IL "src"Attributo imposta l'URL dell'immagine.
  • IL "larghezza" E "altezza"Determina l'ampiezza e l'altezza dell'immagine:
  La "larghezza" e "altezza" determinano l'ampiezza e l'altezza dell'immagine:
  
  
  

  Produzione
  

  Si può osservare che abbiamo aggiunto correttamente il logo per la pagina Web creata.

  Conclusione

  Per aggiungere un logo, prima, crea una barra di navigazione utilizzando "