Sujet Précédent Sujet Suivant

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 38275 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 novembre 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:

4 réponses

Réponse 1 / 4
jordane45 Messages postés 38275 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 novembre 2024 4 696
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/
1
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
0
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?
0
jordane45 Messages postés 38275 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 novembre 2024 4 696
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>
0
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
0
jordane45 Messages postés 38275 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 novembre 2024 4 696
18 mai 2022 à 22:56
Tu nous remontre ton code complet s'il te plaît
0
jordane45 Messages postés 38275 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 novembre 2024 4 696 > jordane45 Messages postés 38275 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 novembre 2024
Modifié le 18 mai 2022 à 22:57
Et bien entendu, entre chaque essai, tu vismdes bien complètement le cache de ton navigateur ?
0
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 !)
0
jordane45 Messages postés 38275 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 novembre 2024 4 696
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 ..
0

Discussions similaires

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

29 réponses
minimal bash-like line editing is supported
Mass -
brucine -

1 réponse