Cómo agregar un logotipo a la barra de navegación de Bootstrap

La mayoría de los sitios web profesionales muestran un pequeño icono junto a su nombre en la página de inicio llamado "Logo". Este icono de barra de direcciones también se conoce como un favicon. Proporciona el sitio web reconocimiento de marca y autoridad. Más específicamente, Bootstrap ofrece una clase "marina de navicar"Para agregar un logotipo al sitio web. Esta clase se puede aplicar a la mayoría de los elementos. Sin embargo, la etiqueta "" es la mejor para colocar un logotipo.

Esta publicación cubrirá:

• Cómo agregar un texto del logotipo a la barra de navegación de bootstrap?
• Cómo agregar una imagen del logotipo a la barra de navegación de bootstrap?

Cómo agregar un texto del logotipo a la barra de navegación de bootstrap?

Para crear una barra de navegación, siga los pasos mencionados a continuación:

• Agrega un "
• Luego, utiliza el ""Elemento con la clase"marina de navicar"Para incluir un texto del logotipo.
• Después de agregar el logotipo, implementa el "
  " y "
  • "Elementos para agregar los elementos del menú de navegación.

  Html

  Las clases especificadas en el bloque de código anterior se explican a continuación:

  • "barra de navegación" y "defensa de la navbar"Se utilizan para crear una barra de navegación estándar.
  • "Navbar-Expand-LG"La clase responde una barra de navegación.
  • "luz de navicar"Establece el color de texto de la barra de navegación a la oscuridad. Se usa cuando el elemento tiene un fondo ligero.
  • "BG-Light"Ajusta el color de fondo de la barra de navegación a un gris claro.
  • "ítem de navegaciónSe utiliza la clase para agregar los elementos de navegación.
  • "activo"La clase hace que el elemento resalte o se destaque para demostrar que actualmente está activo.
  • "enlace de navegación"Proporciona estilos para los enlaces de navegación.

  Producción
  

  Cómo agregar una imagen del logotipo a la barra de navegación de bootstrap?

  Para colocar una imagen como logotipo, use el ""Etiqueta en lugar de texto siguiendo los pasos:

  • En primer lugar, el ""La etiqueta se coloca con la clase"marina de navicar". El "href"Atributo del""La etiqueta contiene la referencia de la página vinculada.
  • La imagen del logotipo se coloca dentro del "" elemento. Los atributos "SRC", "Ancho" y "Altura" se utilizan para ajustar la imagen.
  • El "SRCEl atributo establece la URL de la imagen.
  • El "ancho" y "altura"Determine la amplitud y altura de la imagen:
  El "ancho" y la "altura" determinan la amplitud y altura de la imagen:
  
  
  

  Producción
  

  Se puede observar que hemos agregado con éxito el logotipo para la página web creada.

  Conclusión

  Para agregar un logotipo, primero, cree una barra de navegación utilizando el "