Fiz exatamente o que o instrutor falou, so q nao funciona, li outrs posts falando sobre versao do JQuery, porém não deu certo, preciso de ajuda urgente.
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas
respostas
Nav bar nao funciona
Olá Roberto
Tens o código ainda? Podes incluir ele aqui no tópico, por favor?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Loja virtual</title>
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery-2.2.0.min.js" type="text/javascript"></script>
</script>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
</head>
<body>
<header>
<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>
</header>
<main>
<div class="">
<h3 class="text-center">Novidades</h3>
</div>
<div class="thumbnail text-center col-md-4">
<figure>
<div class="">
<img src="img/camisaazul.jpg" alt="Camisa Azul">
<h4>Camisa Azul Importada</h4>
<p>Camisa azul importada por um preço acessível e pano de qualidade</p>
</div>
</figure>
<div class="btn-group">
<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>
<div class="thumbnail text-center col-md-4">
<figure>
<div class="">
<img src="img/camisa-azul.jpg" alt="Camisa Azul">
<h4>Camisa Azul Importada</h4>
<p>Camisa azul brasileira por um preço acessível e pano de qualidade</p>
</div>
</figure>
<div class="btn-group">
<a href="#" class="btn btn-default">R$ 200,00</a>
<a href="#" class="btn btn-primary"><span class="glyphicon glyphicon-shopping-cart"></span> Comprar</a>
</div>
</div>
<div class="thumbnail text-center col-md-4">
<figure>
<div class="">
<img src="img/camisarosa.jpg" alt="Camisa Azul">
<h4>Camisa Rosa Importada</h4>
<p>Camisa rosa importada por um preço acessível e pano de qualidade</p>
</div>
</figure>
<div class="btn-group">
<a href="#" class="btn btn-default">R$ 170,00</a>
<a href="#" class="btn btn-primary"><span class="glyphicon glyphicon-shopping-cart"></span> Comprar</a>
</div>
</div>
</main>
</body>
</html>
solução!
Olá Roberto,
Abri seu html e notei um erro no console do navegador:
bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery
at bootstrap.min.js:6Esse erro ocorre porque o Bootstrap depende do jQuery para funcionar. Veja que lá no head você está carregando o jQuery depois do Bootstrap:
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery-2.2.0.min.js" type="text/javascript"></script>Resolver esse erro é simples, basta trocar a ordem desses dois scripts.
Agora quanto a questão de layout do navbar, acredito que faltou essa classe no button do Menu:
class="navbar-toggle collapsed"Seu button então ficaria assim:
<button type="button" data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle collapsed">Menu</button>Como não fiz o curso, não sei dizer se esse é o layout esperado para o navbar.
Para mais detalhes de como o navbar funciona e conferir alguns exemplos de código, sugiro dar uma olhada na documentação do navbar.
Abraço!
Muito obrigado amigo, que coisa boba hein?! Rs, grato de mais pela ajuda, abçs!