Como adicionar um logotipo à barra de navegação de bootstrap

A maioria dos sites profissionais exibe um pequeno ícone ao lado de seu nome na página inicial chamada “Logotipo”. Este ícone da barra de endereços também é conhecido como um favicon. Ele fornece ao site reconhecimento e autoridade da marca. Mais especificamente, o Bootstrap oferece uma aula “Brand-marinho”Para adicionar um logotipo ao site. Esta classe pode ser aplicada à maioria dos elementos. No entanto, a tag "" é melhor para colocar um logotipo.

Este post cobrirá:

• Como adicionar um texto de logotipo à barra de navegação de bootstrap?
• Como adicionar uma imagem de logotipo à barra de navegação de bootstrap?

Como adicionar um texto de logotipo à barra de navegação de bootstrap?

Para criar uma barra de navegação, siga as etapas mencionadas abaixo:

• Adicione um “
• Então, utilize o “”Elemento com a classe“Brand-marinho”Para incluir um texto de logotipo.
• Depois de adicionar o logotipo, implemente o “
  " e "
  • ”Elementos para adicionar os itens do menu de navegação.

  Html

  As classes especificadas no bloco de código acima são explicadas abaixo:

  • ““Navi" e "Navbar-Default”São usados ​​para criar uma barra de navegação padrão.
  • ““NavBar-Expand-LG”Classe torna uma barra de navegação responsiva.
  • ““luz da marinha”Define a cor do texto da barra de navegação para escurecer. É usado quando o elemento tem um fundo leve.
  • ““BG-Light”Ajusta a cor de fundo da barra de navegação para um cinza claro.
  • ““NAV-ITEM”A classe é utilizada para adicionar os itens de navegação.
  • ““ativo”Class faz com que o elemento destaque ou se destaque para mostrar que está atualmente ativo.
  • ““Nav-link”Fornece estilos para os links de navegação.

  Saída
  

  Como adicionar uma imagem de logotipo à barra de navegação de bootstrap?

  Para colocar uma imagem como um logotipo, use o “”Tag em vez de texto seguindo as etapas:

  • Em primeiro lugar, o “”A tag é colocada com a classe“Brand-marinho”. O "HrefAtributo do “”A tag contém a referência da página vinculada.
  • A imagem do logotipo é colocada dentro do “" elemento. Os atributos "SRC", "Largura" e "Altura" são utilizados para ajustar a imagem.
  • O "src”Atributo define o URL da imagem.
  • O "largura" e "altura”Determine a amplitude e a altura da imagem:
  A "largura" e "altura" determinam a largura e a altura da imagem:
  
  
  

  Saída
  

  Pode -se observar que adicionamos com sucesso o logotipo da página da web criada.

  Conclusão

  Para adicionar um logotipo, primeiro, crie uma barra de navegação usando o “