Dúvida no Ex. 2 da Aula 3 - Barra de navegação | Bootstrap: velocidade no front-end

Solucionado (ver solução)

Solucionado
(ver solução)

7
respostas

Referente ao curso Bootstrap: velocidade no front-end, no capítulo Barra de navegação e atividade Escondendo a lista de link em telas menores

por Roberto Valdetaro

| 232.8k xp | 57 posts

Apliquei o código collapse navbar-collapse e não escondeu o menu. Não sei o que pode estar acontecendo.

<!DOCTYPE html>
<html>
    <head>
        <title>Loja virtual</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/animate.css" />
        <meta name="viewport" content="width=device-width" />
    </head>
<body>
    <header>    
        <nav>
            <a href="#" class="navbar-brand">Caelum</a>

            <div class="collapse navbar-collapse">
                <ul>
                    <li><a href="#">Novidades</a></li>
                    <li><a href="#">Mais vendidos</a></li>
                </ul>
            </div>

        </nav>
    </header>
</body>
</html>

7 respostas

por Mauricio Nunes

| 175.6k xp | 53 posts

UX Design/Front-end Developer

21/10/2015

Ja verificou se o cominho do bootstrap esta correto?

por Roberto Valdetaro

| 232.8k xp | 57 posts

21/10/2015

Já verifiquei e está correto e até testei com o bootstrap sem o .min.css, coloquei navbar-collapse com um ponto(.) antes (.navbar-collapse) e até deu uma melhorada mas sem sucesso.

por Ricardo Coimbra da Silva

| 404.7k xp | 5 posts

Ag. Administrativo

22/10/2015

Está faltando incluir o JavaScript antes de fechar a tag body.

<html>
    <head>
    ...
    </head>
    <body>
        //Todo o seu código

        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

Vê se é isso que falta. Abraço.

por Roberto Valdetaro

| 232.8k xp | 57 posts

23/10/2015

O problema continua, testei ele no windows .Pesquisei no site do bootstrap e em outros sites e nada.

Adicionei estas linhas:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

e nada.

por Natan Souza

| 2095.5k xp | 3690 posts

Instrutor Product Design Lead na Alura

23/10/2015

Roberto,

Faz a chamada do Jquery e do Bst.js antes da tag de fechamento do body. E usa os arquivos locais, as vezes esses links CDN não funcionam local.

A chamada do CSS você deixa dentro do elemento head mesmo.

abcs

solução!

por Rodrigo Achilles

| 650.3k xp | 26 posts

Analista de Sistemas

25/10/2015

Eu tive problemas com a barra também. Só funcionou quando coloquei o JQuery e o componente de Javascript do Bootstrap, nesta ordem:

<script src="js/jquery-2.1.4.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

por Roberto Valdetaro

| 232.8k xp | 57 posts

25/10/2015

Problema resolvido. Só tive adcionar um navbar-nav no button:

                <!-- aqui -->
<button class="navbar navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">Menu</button>

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />    
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
    <script src="js/jquery-2.1.4.js"></script>    
    <script src="js/bootstrap.min.js"></script>    
    <style>
        .navbar-header button {
        color:#FFFFFF;
    }
    </style>
</head>
<body>
<header>
    <nav class="navbar-inverse">
        <div class="navbar-header">
            <!-- Se colocar data-toggle o botão some -->
            <a href="#" class="navbar-brand">Caelum</a>
            <button class="navbar navbar-toggle" type="button" data-target=".navbar-collapse" 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>
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Camisetas<span class="caret"><span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Masculina</a></li>
                        <li><a href="#">Feminina</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 sua pesquisa" />
                </div>
                <input type="submit" value="Buscar" class="btn btn-default" />
            </form>
        </div>    
    </nav>
</header>
</body>
</html>