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??
5
respostas
respostas
Dúvida na Aula 3 - Barra de Navegação (Bootstrap)
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!