Problème Bootstrap
xooit21
Messages postés
99
Date d'inscription
Statut
Membre
Dernière intervention
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour,
Je crée actuellement un site web avec l'aire de Bootstrap(dernière version), mais j'ai un problème avec:
qui devrait me faire un liste déroulante, mais cela ne fonctionne pas
Voici mon code
EDIT : Correction des balises de code ( ajout du Langage)
Cordialement
Je crée actuellement un site web avec l'aire de Bootstrap(dernière version), mais j'ai un problème avec:
data-toggle="dropdown"
qui devrait me faire un liste déroulante, mais cela ne fonctionne pas
Voici mon code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Debut de bootstrap!-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- fin de bootstrap!-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>work in french</title>
</head>
<body>
<div class="container-fluid ">
<img src="images/ok-1.jpg" class="ban">
<!-- menu -->
<nav class="navbar navbar-expand-md bg-dark">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link text-light text-uppercase" href="#" style="font-weight:bold;">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link text-light text-uppercase mx-5" href="#" style="font-weight:bold;">test1</a>
</li>
<li class="nav-item">
<a class="nav-link text-light text-uppercase px-3" href="#" style="font-weight:bold;">test-2</a>
</li>
<li class="nav-item">
<a class="nav-link text-light text-uppercase mx-5" href="#" style="font-weight:bold;">test-3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link text-light text-uppercase px-3" href="#" style="font-weight:bold;"
data-toggle="dropdown">
Galerie
</a>
<!-- sous- menu!-->
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Line 1</a>
<a class="dropdown-item" href="#">Lien 2</a>
<a class="dropdown-item" href="#">Lien 3</a>
</div>
<!--fin de sous menu !-->
</li>
</ul>
</nav>
<!--fin menu -->
</div>
</body>
</html>
EDIT : Correction des balises de code ( ajout du Langage)
Cordialement
Configuration: Windows / Chrome 101.0.4951.67
A voir également:
- Openjdk 64-bit server vm warning: sharing is only supported for boot loader classes because bootstrap classpath has been appended
- Winrar 64 bit - Télécharger - Compression & Décompression
- What is my movie français - Télécharger - Divers TV & Vidéo
- Cle windows 10 professional 64 bit gratuit - Guide
- Boot camp windows 10 64 bit download - Télécharger - Systèmes d'exploitation
- Dual boot - Guide
4 réponses
Bonjour,
D'où sors tu ton code ?
Tu es sûr que ça vient de la dernière version de bootstrap ?
Regarde les exemples de la doc :
https://getbootstrap.com/docs/5.0/components/dropdowns/
D'où sors tu ton code ?
Tu es sûr que ça vient de la dernière version de bootstrap ?
Regarde les exemples de la doc :
https://getbootstrap.com/docs/5.0/components/dropdowns/
Bon j'ai essayé en copiant les codes du site
https://getbootstrap.com/docs/5.0/components/dropdowns/
Mais ça ne fonctionne toujours pas?
https://getbootstrap.com/docs/5.0/components/dropdowns/
Mais ça ne fonctionne toujours pas?
Tu es sûr que tu utilises la version 5 de bootstrap ??
Tu utilises bien la version bundle ? ( celle qui contient la lib popper ??)
Car, comme le dit la doc
Tu pourrais remplacer le chargement du css et du js par ceux fournis dans la documentation ?
Tu utilises bien la version bundle ? ( celle qui contient la lib popper ??)
Car, comme le dit la doc
Dropdowns are built on a third party library, Popper, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js /
Tu pourrais remplacer le chargement du css et du js par ceux fournis dans la documentation ?
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
pour info je suis debutant...
Edit: correction des balises de code (ajout du langage... Encore !)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Debut de bootstrap!-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- fin de bootstrap!-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>titre</title>
</head>
<body>
<div class="container-fluid ">
<img src="images/ok-1.jpg" class="ban">
<!-- menu -->
<div>
<button class="btn btn-primary mt-2"> Accueil</button>
<button class=" btn btn-primary mt-2">tesqt-1</button>
<button class="btn btn-primary mt-2 dropdown-toggle" id="gal">test-2</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">sous-menu-1</a>
</li>
<li>
<a href="dropdown-item" href="#">sou- menu-2</a>
</li>
</ul>
</div>
<!--fin menu -->
</div>
</body>
</html>
Edit: correction des balises de code (ajout du langage... Encore !)
merci