[Résolu] Problème navbar ne se déroulant pas - Html, bootstrap par ROBIN_24MENARD - page 1

Bonjour, je suis actuellement en train de suivre une formation sur bootstrap, cependant, je n'arrive pas à faire un menu déroulant, et quand je copie colle les codes de mon formateur sur mes codes, les siens non plus ne se déroulent pas

Je ne sais pas réellement d'où vient le problème, et après quelques recherches, je ne trouves pas.

Je vous demande donc votre aide pour m'éclaircir à ce sujet.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<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 type="text/javascript" src="js/javascirpt.js"></script>
<script type="text/javascript" src="/js/jquery.js"></script>
				
				<!--div regroupant tout le header-->
				<div>
					
					<nav class="navbar navbar-expand-md navbar-dark bg-success">
						
							<div class="container">
										
										<a href="#" class="navbar-brand">OwnTea</a>
								<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarText">
									<span class="navbar-toggler-icon"></span>
								</button>		


								<div class="collapse navbar-collapse" id="navbarText">
									
									<ul class="navbar-nav">
										<li class="nav-item active">
											<a href="#" class="nav-link">Nos différents thés</a>
										</li>
									
									
										<li class="nav-item">
											<a href="#" class="nav-link">Blog</a>
										</li>  
									
									
										<li class="nav-item">
											<a href="#" class="nav-link">Se connecter</a>
										</li>
									</ul>


								</div>

							</div>	


					</nav>

				</div>









</body>
</html>

-
Edité par ROBIN_24MENARD 10 janvier 2022 à 17:28:12

ROBIN_24MENARD

10 janvier 2022 à 17:27:22

tomlahaye

10 janvier 2022 à 17:48:06

Bonjour,

Vérifie bien la version Bootstrap qui est utilisé dans ta formation.

Dans ton code tu utilises la version 5 (5.1.3).

Dans ton bouton tu as :

data-toggle="collapse" data-target="#navbarText"

Remplace cette partie par :

data-bs-toggle="collapse" data-bs-target="#navbarText"

Bonne journée.

-
Edité par tomlahaye 10 janvier 2022 à 17:53:17

Apprenti Technicien Informatique

10 janvier 2022 à 17:51:13

tomlahaye a écrit:

Bonjour,

Vérifie bien la version Bootstrap qui est utilisé dans ta formation.

Toi dans ton code tu utilise la version 5 (5.1.3).

Dans ton bouton tu as :
data-toggle="collapse" data-target="#navbarText"
Remplace cette partie par :
data-bs-toggle="collapse" data-bs-target="#navbarText"
Bonne journée.

Je te remercie d'avoir régler mon soucis.

Passes une agréable soirée.

Problème navbar ne se déroulant pas

Html, bootstrap

Supprimer

Modérer

Signaler le message aux modérateurs