Olá, por gentileza como faço pra resolver esse problema utilizando a versão 5 do bootstrap?
Solucionado
Olá, por gentileza como faço pra resolver esse problema utilizando a versão 5 do bootstrap?
hoje, com a Alura e o Google Gemini
Tem algum erro no console do navegador? O bootstrap.js foi carregado corretamente? Os atributoes estão corretos?
Olá Diego, não tem nenhum erro no console. Segue abaixo o código, se puder me ajudar agradeço muito.
Receita refrescante e cheia de vitaminas para o seu café da manhã!
Receita refrescante e cheia de vitaminas para o seu café da manhã!
Receita refrescante e cheia de vitaminas para o seu café da manhã!
Receita refrescante e cheia de vitaminas para o seu café da manhã!
Receita refrescante e cheia de vitaminas para o seu café da manhã!
Receita refrescante e cheia de vitaminas para o seu café da manhã!
contato:email@frutafruto.com.br
Diego, estou copiando e colando o código mas não aparece (aparece o "site"). Sou estudante nível básico ainda e não sei como alterar isso... se puder me orientar eu agradeço. Abraço :) Até
Oi Renata, nao tem problema, a única diferença entre eu e você é quando a gente começou a estudar!
para colar o código aqui, primeiro clique no icone </> do lado da tabela, ele vai abrir tres crases. Então cole o seu código entre ele
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Ele deve ficar mais ou menos assim
Ahhh ahhaha agora entendi... muito obrigada pela paciência Segue então o código, lembrando que não aparece nenhum erro no console. ;) Obrigada.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>fruta e fruto</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="src/style.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light active nav-link">
<div class="container-fluid">
<a class="navbar-brand" href="#">fruta & fruto</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">início</a>
<a class="nav-link" href="#">receitas</a>
<a class="nav-link" href="#">quem somos</a>
<a class="nav-link">contato</a>
</div>
</div>
</div>
</nav>
</header>
<title>fruto & fruta</title>
<h1>Reaproveite melhor os alimentos!</h1>
<h1>Economize e ganhe em saúde!</h1>
<h2>Receitas para economizar e ganhar saúde</h2>
<h2>Nossas receitas ajudam você a aproveitar melhor os alimentos, economizar, ganhar tempo e praticidade</h2>
<img class="d-block w-100" src="src/img/receita-abacate.jpg" alt="tigela com salada de abacate, vista superior">
<h3>Tigela de abacate</h3>
<p>Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
<img class="d-block w-100" src="src/img/receita-kiwi.jpg" alt="tigela de mingau com kiwi, vista superior">
<h3>Salada de kiwi</h3>
<p>Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
<img class="d-block w-100" src="src/img/receita-mix.jpg" alt="prato com mix de vegetais e mão de pessoa adicionando azeite, vista superior">
<h3>Mix de vegetais</h3>
<p>Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
<img class="d-block w-100" src="src/img/receita-pimentoes.jpg" alt="prato de salada de pimentões com alguns ingredientes ao lado, vista superior">
<h3>Pimentões à Juliana</h3>
<p>Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
<img class="d-block w-100" src="src/img/receita-oriental.jpg" alt="tigela com salada de vegetais estilo oriental, vista de cima">
<h3>Prato oriental</h3>
<p>Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
<img class="d-block w-100" src="src/img/receita-beterrabas.jpg" alt="tigela com beterrabas e dentes de alho assados em primeiro plano, com ingredientes ao fundo">
<h3>Beterrabas assadas</h3>
<p>Receita refrescante e cheia de vitaminas para o seu café da manhã!
</p>
<p>contato:<a href="mailto:email@frutafruto.com.br">email@frutafruto.com.br</a></p>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src=""></script>
</body>
</html>
Oi Renata, tudo bom? Agora ficou mais simples para debugar :D
O problema está no seu JS. Voce adicionou a biblioteca Bootstrap 2x. Remova uma delas para poder funionar corretamente.
O que acontece por trás dos panos é que cada uma das biblioteca adiciona seus eventos para os mesmos elementos, entao quando vc clica no botao para fechar, a primeira biblioteca fecha o botao e a segunda abre. Aí da a impressão que nao funciona, mas na verdade está funcionando mas 2x seguidas.
Abraços
Diegoooooooooooooooo funcionou!!!! ahahahhaha Aiiiii não creio que era isso ahhahahahahaa Muito obrigada mesmoooooo :) Grande abraço a vc e a toda equipe. Até.
Oi Renata, que legal que funcionou!
Espero que continue nessa jornada bacana de aprendendizado que você vai longe!
Eu não faço parte da equipe da Alura, na verdade eu sou só um mero usuário da plataforma assim como você. Porém com os cursos que fiz aprendi bastante e atualmente eu moro e trabalho em Londres como desenvolvedor javascript.
Abraços e boa sorte!
Que legal, muito obrigada pela atenção. Grande abraço. Até. :)