Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Dúvida sobre a funcionalidade "Dropdown" do Bootstrap

Boa tarde, amigos.

Sei que este tópico em específico não foi abordado no curso, mas se alguém puder me ajudar com isso seria bacana.

Tentei implementar um dropdown no navbar da forma que está no Bootstrap. No entanto, embora o ícone do dropdown com a setinha para baixo apareça na página em questão, o botão não funciona. Eu clico e nada acontece.

Será que eu preciso implementar alguma outra coisa (como algum script) para que ele funcione?

Página do Bootstrap de onde eu tirei o exemplo: https://getbootstrap.com/docs/4.5/components/navbar/

Eis o código (com itens diferentes dos que foram vistos no curso, pois eu estou fazendo testes e "brincando" com o código):

        <nav class="navbar navbar-expand navbar-light bg-dark d-flex justify-content-between mb-5">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="home">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="info">Informações</a>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Transações
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <a class="dropdown-item" href="transaction/buy">Comprar</a>
                      <a class="dropdown-item" href="transaction/transfer">Transferir</a>
                    </div>
                  </li>
              </ul>
            </div>
        </nav>

Obrigado.

2 respostas
solução!

Olá Henrique, tudo bem?

Isso mesmo, alguns componentes do Bootstrap criam uma obrigação de importar 3 scripts:

  • Poper.js
  • Jquery
  • Bootstrap

Então no final do body do seu html seria necessário fazer a importação:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

Dessa forma todo o código javascript de seleção e controle de eventos estará habilitado :)

Sempre que quiser pegar a versão mais atual é bom entrar na home do Bootstrap

Abraços e Bons Estudos!

Opa! Deu certo agora.

Imaginei que deveria ser algo fácil assim hahaha.

Valeu!!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software