Problème Bootstrap

Fermé

xooit21 Messages postés 99 Date d'inscription mardi 2 janvier 2018 Statut Membre Dernière intervention 4 août 2023 - Modifié le 18 mai 2022 à 20:24
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 - 18 mai 2022 à 23:26

Bonjour,
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
What is my movie français - Télécharger - Divers TV & Vidéo
Winrar 64 bits windows 10 - Télécharger - Compression & Décompression
Cle windows 10 professional 64 bit gratuit - Guide
Dual boot - Guide
Boot camp windows 10 64 bit download - Télécharger - Systèmes d'exploitation

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
18 mai 2022 à 20:23

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/

xooit21 Messages postés 99 Date d'inscription mardi 2 janvier 2018 Statut Membre Dernière intervention 4 août 2023
18 mai 2022 à 21:36

D'une vidéo YouTube.. qui doit être vieille
merci

Réponse 2 / 4

xooit21 Messages postés 99 Date d'inscription mardi 2 janvier 2018 Statut Membre Dernière intervention 4 août 2023
18 mai 2022 à 22:06

Bon j'ai essayé en copiant les codes du site
https://getbootstrap.com/docs/5.0/components/dropdowns/

Mais ça ne fonctionne toujours pas?

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
18 mai 2022 à 22:43

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

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>

Réponse 3 / 4

xooit21 Messages postés 99 Date d'inscription mardi 2 janvier 2018 Statut Membre Dernière intervention 4 août 2023
18 mai 2022 à 22:54

non, rien ne change

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
18 mai 2022 à 22:56

Tu nous remontre ton code complet s'il te plaît

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717 > jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024
Modifié le 18 mai 2022 à 22:57

Et bien entendu, entre chaque essai, tu vismdes bien complètement le cache de ton navigateur ?

Réponse 4 / 4

xooit21 Messages postés 99 Date d'inscription mardi 2 janvier 2018 Statut Membre Dernière intervention 4 août 2023
Modifié le 18 mai 2022 à 23:24

pour info je suis debutant...

<!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 !)

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
18 mai 2022 à 23:26

Tu pourrais tester un des exemples de la documentation tel qu'ils te sont donnés ?
Car la, j'ai l'impression que tu as oublié des éléments ..

Discussions similaires

À quoi sert le port common interface 5v only Samsung ?

Disque dur qui ne boot pas: no boot disk has been detected...

Utilisateur anonyme - 9 déc. 2014 à 21:30
Utilisateur anonyme - 1 janv. 2015 à 17:51

minimal bash-like line editing is supported