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

Barra de navegacão não exibe a lista

Referente ao curso Bootstrap: velocidade no front-end

por Charles lopes
| 140.1k xp | 10 posts
Desenvolvedor

Ao clicar no botão a lista não aparece, HELP!

<!DOCTYPE html>
<html>
<head>
    <title>Bilioteca Virtual</title>
    <meta charset="UTF-8"/>
    <link href="resource/css/bootstrap.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <header>
        <nav>
            <div class="navbar-header    ">
                <a href="#" class="navbar-brand">Virtual-Book</a>
                <button type="button" data-target=".navbar-callapse" data-toggle="collapse">Menu</button>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">Novidades</a></li>
                    <li><a href="#">Mais Vendidos</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="resource/img/camisa-azul.png" alt="Camisa Azul Importada"/>
                <div>
                    <h4>Camisa Azul Importada</h4>
                    <p>Camisa Azul importada por um preço acessivel e com 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">Comprar</a>
            </div>
        </div>

        <div class="col-xs-12 col-md-4 thumbnail text-center">
            <figure>
                <img src="resource/img/camisa-rosa.png" alt="Camisa Rosa Importada"/>
                <div>
                    <h4>Camisa Rosa argentina</h4>
                    <p>Camisa Rosa argentiina por um preço acessivel e com pano de qualidade</p>
                </div>
            </figure>
            <div class="btn-group">
                <a href="#" class="btn  btn-default">R$ 210,00</a>
                <a href="#" class="btn btn-primary">Comprar</a>
            </div>
        </div>

        <div class="col-xs-12 col-md-4 thumbnail text-center">
            <figure>
                <img src="resource/img/camisa-azul.png" alt="Camisa Azul Importada"/>
                <div>
                    <h4>Camisa Azul Nacional</h4>
                    <p>Camisa Azul Nacional por um preço acessivel e bonita</p>
                </div>
            </figure>
            <div class="btn-group">
                <a href="#" class="btn btn-default">R$ 90,00</a>
                <a href="#" class="btn btn-primary">Comprar</a>
            </div>
        </div>
    </main>    
</body> 
</html>
7 respostas
por Romário Torres Alcântara
| 279.3k xp | 488 posts
Moderador

Olá Charlie! Você não importou o arquivo jQuery nem o JavaScript em sua página. Adicione a referencia aos arquivos ao final de sua tag <body> a exemplo da seguinte forma:

...
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
por Charles lopes
| 140.1k xp | 10 posts
Desenvolvedor

Romário mesmo fazendo isso continua do mesmo jeito.

por Romário Torres Alcântara
| 279.3k xp | 488 posts
Moderador

Certo.. mande seu código novamente para ver como está. Também faltou você adicionar a classe no botão Menu. Deve ter a seguinte classe: class="navbar-toggle"

O Botão deve estar desse jeito:

<button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">Menu</button>
por Charles lopes
| 140.1k xp | 10 posts
Desenvolvedor

Aqui o código Romário

<!DOCTYPE html>
<html>
<head>
    <title>Bilioteca Virtual</title>
    <meta charset="UTF-8"/>
    <link href="resource/css/bootstrap.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width">
    <style type="text/css">
        .navbar-header button{
            color: #fff;
        }
    </style>
</head>
<body>
    <header>
        <nav class="navbar navbar-inverse">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">Caelum</a>    
                <button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">Menu</button>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav nav">
                    <li><a href="#">Novidades</a></li>
                    <li><a href="#">Mais vendidos</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="resource/img/camisa-azul.png" alt="Camisa Azul Importada"/>
                <div>
                    <h4>Camisa Azul Importada</h4>
                    <p>Camisa Azul importada por um preço acessivel e com 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">Comprar</a>
            </div>
        </div>

        <div class="col-xs-12 col-md-4 thumbnail text-center">
            <figure>
                <img src="resource/img/camisa-rosa.png" alt="Camisa Rosa Importada"/>
                <div>
                    <h4>Camisa Rosa argentina</h4>
                    <p>Camisa Rosa argentiina por um preço acessivel e com pano de qualidade</p>
                </div>
            </figure>
            <div class="btn-group">
                <a href="#" class="btn  btn-default">R$ 210,00</a>
                <a href="#" class="btn btn-primary">Comprar</a>
            </div>
        </div>

        <div class="col-xs-12 col-md-4 thumbnail text-center">
            <figure>
                <img src="resource/img/camisa-azul.png" alt="Camisa Azul Importada"/>
                <div>
                    <h4>Camisa Azul Nacional</h4>
                    <p>Camisa Azul Nacional por um preço acessivel e bonita</p>
                </div>
            </figure>
            <div class="btn-group">
                <a href="#" class="btn btn-default">R$ 90,00</a>
                <a href="#" class="btn btn-primary">Comprar</a>
            </div>
        </div>
    </main>    
    <script src="resource/js/bootstrap.js"></script>
</body> 
</html>
por Charles lopes
| 140.1k xp | 10 posts
Desenvolvedor

E Romário vi aqui na navegador que está dando erro no javaScript na linha 8

nesse trecho

if (typeof jQuery === 'undefined') {
  throw new Error('Bootstrap\'s JavaScript requires jQuery')
}
por Romário Torres Alcântara
| 279.3k xp | 488 posts
Moderador

Charles, esse erro que você viu foi porque você não importou o jQuery. É preciso adicionar o jQuery como eu disse anteriormente. Você pode fazer download no link que deixarei ao final. Também outro erro que vi é que você escreveu data-target=".navbar-collapse" na tag <button> quando o correto é: data-target=".navbar-collapse".

Bem, espero ter ajudado! Bons Estudos!

jQuery

solução!
por Charles lopes
| 140.1k xp | 10 posts
Desenvolvedor

Romário vlw aew pela ajuda amigo, conseguir resolver aqui o problema,

RESOLUÇÃO: jquery-2.1.4.min.js tinha que baixar esse carinha aqui pois o javascript do Bootstrap depende dele \o/

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