Discussion :

[Matteo53]

Bonjour,
Je viens juste de commencer avec Bootstrap, j'ai fait un menu responsive en suivant un tutoriel. Le problème est le menu déroulant ne se déroule pas et sur petit écran la même chose avec le menu hamburger.
Voici mon code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<nav class= " navbar navbar-expand-md navbar-light bg-dark">
            <a class="navbar-brand nav-link text-light font-weight-bold text-uppercase px-3" href="">Mon logo</a>
            <button type="button" class="navbar-toggler bg-light" data-toggle="collapse" data-target="#nav"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse justify-content-between" id="nav">
                <ul class= "navbar-nav">
                    <li class="nav-item">
                        <a class ="nav-link text-light font-weight-bold text-uppercase px-3" href="#">
                            Home
                        </a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class ="nav-link text-light font-weight-bold text-uppercase px-3 dropdown-toggle" href="#" data-toggle="dropdown">
                            Catégories
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item"  href="">Menu</a>
                            <a class="dropdown-item" href="">Menu</a>  
                            <a class="dropdown-item" href="">Menu</a>     
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class ="nav-link text-light font-weight-bold text-uppercase px-3" href="#">
                        Contact
                        </a>
                     </li>
                </ul>
                <ul class= "navbar-nav">
                    <li class="nav-item">
                        <a class ="nav-link text-light font-weight-bold text-uppercase px-3" href="#">
                            se connecter
                        </a>
                    </li>
                </ul>
            </div> 
 </nav>

Est-ce que c'est un problème de version Bootstrap 4 ou 5 ou bien mon code est erroné?
merci

[NoSmoking]

Bonjour,
Mauvais paramétrage de ton élément, ce que tu as mis :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class ="nav-link text-light font-weight-bold text-uppercase px-3 dropdown-toggle" href="#" data-toggle="dropdown">

ce qu'il faudrait :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class ="nav-link text-light font-weight-bold text-uppercase px-3 dropdown-toggle" href="#" data-bs-toggle="dropdown">

la différence n'est pas énorme mais fait tout !

[Matteo53]

Bonjour,
Voilà en ajoutant data-bs-toggle="dropdown" j'ai résolu le souci quand je clique sur catégorie le menu se déroule, je vous en remercie.
Il me reste le problème quand je suis sur petit écran mon Button (menu hamburger) ne se déplie pas. J'ai même modifié pour le button data-bs-toggle ="collapse" (j'ai tenté d'ajouter le bs mais rien y fait)
Je suis un peu perdu parce que j'ai trouvé une solution mais je ne sais pas si c'est la bonne.. mais tout marche (le menu catégorie et le menu hamburger) :
j'ai changé mes balises script et j'ai une balise de plus jQuery :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Puis concernant mon code html j'ai dû réenlever le bs à data-bs-toggle="dropdown" et maintenant les deux se déroulent et marchent.
Qu'en pensez-vous ? Puis je laisser cela dans l'état vu que tout marche ?
Merci pour votre aide

[NoSmoking]

Le conseil que je pourrais te donner est de passer à BootStrap v.5x, si tu ne peux pas t'en passer

[Matteo53]

Voila tout marche j'ai suivi la documentation pour les barres de navigation BOOSTRAP 5, merci pour le lien, j'étais un peu perdu avec les versions et les tutoriels anciens. Avant de fermer le post comme résolu j'aurais une dernière question : Dans les barres de navigation je vois souvent des petites images par exemple une petite enveloppe pour les e-mail, les images de connexion etc. comme la barre de ce forum à droite; Est ce que cela fait partie aussi de BOOTSTRAP et comment s'appellent t'ils ? (c'est pour rechercher dans la documentation).
Merci

[NoSmoking]

Avant de fermer le post comme résolu j'aurais une dernière question : Dans les barres de navigation je vois souvent des petites images par exemple une petite enveloppe pour les e-mail, les images de connexion etc. comme la barre de ce forum à droite; Est ce que cela fait partie aussi de BOOTSTRAP et comment s'appellent t'ils ?

Tu trouveras tout cela dans BootStrap icons, les explications de mise en oeuvre sont à la rubrique install.

[Matteo53]

merci beaucoup pour votre aide et votre réponse.
Bonne soirée

[binarygirl]

Effectivement, avec Bootstrap il faut faire très attention à la version car la documentation peut porter à confusion si elle se rapporte à une version antérieure. Les noms des classes ont évolué. Moi-même j'ai eu ce problème à mes débuts.

Dans les barres de navigation je vois souvent des petites images par exemple une petite enveloppe pour les e-mail, les images de connexion etc. comme la barre de ce forum à droite; Est ce que cela fait partie aussi de BOOTSTRAP et comment s'appellent t'ils ? (c'est pour rechercher dans la documentation).

Une alternative intéressante (mais ce n'est pas la seule): Font Awesome

[Matteo53]

Bonjour,
merci pour ces informations précieuse, je vais regarder tout cela.
Bonne journée.