Menu déroulant avec bootstrap

**momjunior** · 19/12/2017, 17h23

Bonjour

J'ai inséré un bouton avec un menu déroulant mais lorsque je clique sur le bouton, la liste ne se déroule pas:

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
<!DOCTYPE HTML>
 
<html>
 
<head>
   <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
</head>
 
<body>
<div class="btn-toolbar" role="toolbar" aria-label="groupe_boutons1">
  <div class="btn-group" role="group" aria-label="bouton1">
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria- haspopup="true" aria-expanded="false">
       Menu déroulant
       <span class="caret"></span>
      </button>
        <ul class="dropdown-menu">
          <li><a href="#" title="Lien 1">lien 1</a></li>
          <li><a href="#" title="Lien 2">lien 2<s/a></li>
        </ul>
    </div>
  </div>
</div> 
</body>
 
</html>

Merci

**rizcolais** · 19/12/2017, 18h52

Bonsoir, peux-tu nous montrer ton dossier avec tes fichiers? Pour voir si ton fichier est bien placé et si le lien vers ton fichier bootstrap s'applique bien

Sur le site W3schools ils donnent cet exemple là :

Code HTML :

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

1
2
3
4
5
6
7
8
9
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Invité · 19/12/2017, 19h31

Bonjour,

Bootstrap, ce n'est pas que du CSS.

Il manque le JS.

Documentation.

**momjunior** · 20/12/2017, 11h54

En fait sur le tuto que j'ai vu, il ne mentionnait pas l'utilisation du JS pour avoir le menu déroulant. Donc j'avais des doutes.

Je vais donc intégrer le JS.

Merci

**rizcolais** · 20/12/2017, 15h05

Sur le site de W3Wschool ils ont mis tout cela dans le head:

Code HTML :

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

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

donc effectivement il faut utiliser du java script*

Invité · 20/12/2017, 15h10

Ne confonds pas Java et JavaScript.
Rien à voir.

Et va plutot voir sur le site officiel Bootstrap.

**momjunior** · 20/12/2017, 11h11

Je pense que mon fichier Bootstrap est bien placé. En effet, le dossier bootstrap et index.html sont à la même racine. Ensuite mon dossier bootstrap contient le dossier css, et ce dernier contient le fichier bootstrap.css. En gros j'ai Bootstrap - css - bootstrap.css

Concernant le code que tu viens de me donner, ça veut dire que je peux avoir le menu déroulant sans utiliser du javascript ou jquery?

Menu déroulant avec bootstrap

Framework CSS Bootstrap

Vue hybride

Discussions similaires

Partager

Partager