Olá, eu não estou conseguindo fazer um navbar-collapse em meu Menu, talvez por algum problema com o jQuery que não sei. Mas ja baixei a versão informada no exercicio e no curso e mesmo assim não funciona de forma alguma.
Alguém poderia me ajudar??
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Olá, eu não estou conseguindo fazer um navbar-collapse em meu Menu, talvez por algum problema com o jQuery que não sei. Mas ja baixei a versão informada no exercicio e no curso e mesmo assim não funciona de forma alguma.
Alguém poderia me ajudar??
Oi José, tudo certo?
Posta seu código usando o "Inserir código" para que consigamos te ajudar?
Ah, e já dê uma olhadinha e veja se tanto o jQuery.js quanto o Bootstrap.js estão sendo chamados lá em "baixão", antes de fechar o </body>. E eles precisam ficar nessa ordem mesmo (jQuery e depois Bootstrap).
Abcs!
Aqui o meu Código Completo!
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<meta charset="UTF-8">
<title>Loja Virtual</title>
<meta name="viewport" content="width=device-width"> </head>
<body>
<header>
<nav class="nav navbar-inverse">
<a href="#" class="navbar-brand">Alura</a>
<div class="collapse navbar-collapse">
<ul>
<li><a href="#">Novidades</a></li>
<li><a href="#">Mais Vendidos</a></li>
<li><a href="#">Camisetas</a></li>
</ul>
</div>
</nav>
</header>
<main>
<div>
<h3 class="text-center">Novidades</h3> </div>
<div class="col-xs-12 col-md-4 thumbnail text-center">
<figure> <img src="imgs/camisa-azul.png" alt="Camisa Azul Importada">
<div>
<h4>Camisa Azul Importada</h4>
<p>Uma camisa importada com pano de alta qualidade e um preço acessivél.</p>
</div>
</figure> <a href="#" class="btn btn-default">R$ 190,00</a>
<a href="#" class="btn btn-primary"> <span class="glyphicon glyphicon-shopping-cart"></span> Comprar </a>
</div>
<div class="col-xs-12 col-md-4 thumbnail text-center">
<figure> <img src="imgs/camisa-rosa.png" alt="Camisa Azul Importada">
<div>
<h4>Camisa Rosa Argentina</h4>
<p>Uma camisa rosa argentina com pano macio e de alta qualidade e bom preço.</p>
</div>
</figure> <a href="#" class="btn btn-default">R$ 210,00</a>
<a href="#" class="btn btn-primary"> <span class="glyphicon glyphicon-shopping-cart"></span> Comprar </a>
</div>
<div class="col-xs-12 col-md-4 thumbnail text-center">
<figure> <img src="imgs/camisa-azul.png" alt="Camisa Azul Importada">
<div>
<h4>Camisa Azul Nacional</h4>
<p>Uma camisa cor azul nacional com pano de excelente qualidade e muito bonita.</p>
</div>
</figure> <a href="#" class="btn btn-default">R$ 130,00</a>
<a href="#" class="btn btn-primary"> <span class="glyphicon glyphicon-shopping-cart"></span> Comprar </a>
</div>
</main>
<script src="js/query-2.2.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>Oi José,
Você deve ter pulado a parte que o instrutor coloca o botão collapse, ficando assim:
<div class="navbar-header">
<a href="#home" class="navbar-brand">Caelum</a>
<button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">Menu</button>
</div>Se você precisar pode ver o código do curso aqui no Github ou na própria documentação do Bootstrap.
Abcs!
Eu percebi que o Erro esta no meu jQuery... Estou copiando diretamente do site, mas mesmo assim ele apresenta erros...
O meu arquivo JS do bootstrap também.
Ao menos é isso que informa o Debugger do Brackets... Mas não sei o que posso fazer.
Oi José,
Você copiou igual da documentação e o botão não está funcionando?
Se copiou, é 100% de certeza que o problema não é no HTML, pois a documentação do Bootstrap é muito boa.
Peguei o código que você postou, coloquei o código do navbar-header, e está funcionando, dá uma olhada aqui: http://jsbin.com/zeyigoyule/edit?html,js,output
Reparei que no seu código você tá chamando o jQuery assim:
<script src="js/query-2.2.0.min.js" type="text/javascript"></script>Tenta colocar o "J" ali no começo do nome do arquivo, provavelmente é isso também.
Abcs!