Navbar Bootstrap

Nesse artigo sobre o Bootstrap, vamos falar sobre a famosa barra de navegação, ou, Navbar. Você vai aprender a criar a sua Navbar e estilzá-la do jeito que quiser e que melhor se ajuste ao seu layout.

Como dito no artigo anterior, o Bootstrap é uma biblioteca que transforma a estrutura do seu web site, tornando-o o responsivo e otimizado para todos os dispositivos e com a Navbar não é diferente, ela torna o menu do seu site bem visualizado e ajustado para qualquer tipo de dispositivo, criando aquele velho e famoso “Menu Hamburguer”. Sem mais delongas, vamos ao exemplo do código:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Alterna navegação">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(Página atual)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Destaques</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Preços</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Desativado</a>
      </li>
    </ul>
  </div>
</nav>

Bom, começando pela classe da tag <nav>, podemos observar que o fundo da navbar está com a cor branca! Ou seja, “bg-light” e a classe “navbar-light” é a cor que vai contrastar no seu menu hamburguer. Caso fosse “navbar-dark” o seu menu hamburguer iria aparecer branco, como é “navbar-light” ele irá aparecer com a cor ESCURA! E a tag <button> é o seu menu hamburguer que irá aparecer nos dispositivos móveis. Mas você pode alterar isso com um pouco de CSS, não vamos entrar muito nesse assunto pois não é o foco do artigo.

Indo para a tag <div> que é onde se encontram os links que vão aparecer no seu menu, você pode utilizar a classe deles e estilizá-los via CSS, isso aí varia muito da sua criatividade e do que o seu layout permite fazer, mas quer uma dica? Divirta-se! Pois essa é uma das partes mais interessantes e divertidas do Navbar, utilize animações e transições, bordas, margens, shadow’s, enfim… O que seu layout permitir, você pode atribuir os estilos á classe “nav-item” e também diferenciar o menu ativo com a classe “active” além do atributo hover quando o visitante passar o mouse.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *