dificuldades de criar a funcionalide do botão de menu | Bootstrap: velocidade no front-end

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

Referente ao curso Bootstrap: velocidade no front-end, no capítulo Barra de navegação e atividade Vídeo 1

por Douglas dos santos costa

| 185.2k xp | 82 posts

desenvolvedor

estou fazendo conforme o exemplo, mas na hora de vincular o o data-targgert ocorre um erro que ele não abre o menu do botão

        <nav class="navbar navbar-inverse" >           
            <a href="#" class="navbar-brand">Caelum</a>
            <button type="button" data-target=".navbar-collapse" data-toggle="collapse">Menu</button>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav nav">
                    <li><a href="#">Novidades</a></li>
                    <li><a href="#">Mais vendidos</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            Camisetas
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Masculinas</a></li>
                            <li><a href="#">Femininas</a></li>
                            <li><a href="#">Infantil</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-right">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Digite a sua busca" />
                    </div>
                    <input type="submit" value="Buscar" class="btn btn-default" />
                </form>
            </div>
        </nav>

3 respostas

por Yuri Padilha

| 152.5k xp | 226 posts

Instrutor Desenvolvedor e Instrutor

01/03/2017

Opa Douglas, sei código parece certo, vc importou o JQUERY e o JS do bootstrap no seu HTML?

Abraço!

por Douglas dos santos costa

| 185.2k xp | 82 posts

desenvolvedor

01/03/2017

Sim, fiz a importação do JQuery, porem em algum outro fórum o qual não me recordo, falaram que tem uma versão do jquery que não está compatível com o bootstrap só não consegui descobrir qual é

solução!

por Yuri Padilha

| 152.5k xp | 226 posts

Instrutor Desenvolvedor e Instrutor

01/03/2017

Eu colei seu código aqui e funcionou Douglas. Eu baixei a última versão do jquery estável: https://code.jquery.com/jquery-3.1.1.min.js

E baixei o bootstrap fresquinho tbm: https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip

Tenta eles e ve se funciona. Não esquece de importar. Vou te mandar meu código tbm pra vc ver.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="bootstrap.css">
  <title>Document</title>
</head>
<body>
  <nav class="navbar navbar-inverse" >
    <div class="container">
      <a href="#" class="navbar-brand">Caelum</a>
      <button type="button" data-target=".navbar-collapse" data-toggle="collapse">Menu</button>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav nav">
          <li><a href="#">Novidades</a></li>
          <li><a href="#">Mais vendidos</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Camisetas
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Masculinas</a></li>
              <li><a href="#">Femininas</a></li>
              <li><a href="#">Infantil</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-right">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Digite a sua busca" />
          </div>
          <input type="submit" value="Buscar" class="btn btn-default" />
        </form>
      </div>
    </div>
  </nav>
  <script src="jquery.js"></script>
  <script src="bootstrap.js"></script>
</body>
</html>

Repara que eu deixei td na mesma pasta.