[Bootstrap] Liste déroulante ne fonctionne pas

**Tamzoro** · 06/10/2018, 16h36

Bonjour,

J'ai un petit soucis avec Bootstrap, j'ai choisi un modèle dans le site et ensuite je l'ai incorporé dans mon code, sauf que les éléments de ma liste déroulante sont introuvables, en cherchant sur google, j'ai trouvé que le problème venait sans doute du fait que bootstrap aurait besoin du JS ?

J'ai été dans le site de bootstrap et j'ai copié ceci ci-dessous et malgré cela ça ne fonctionne toujours pas.

Code html :

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

1
2
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Voici une idée du code

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">
 
    <title>App Name -@yield('title')</title>
 
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 
 
  </head>
 
  <body>
 
    <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
      <a class="navbar-brand" href="#">Top navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline mt-2 mt-md-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
 
    <div class="container">
        @yield('body')
    </div>
 
    <div class="container">
        @yield('body2')
    </div>
 
    <div class="container">
        @yield('content')
    </div>
 
 
 
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

**psychadelic** · 06/10/2018, 19h04

tu mélange les versions de Bootstrap
si tu utilise Boostrap 4 il faut utiliser le JS de la version 4 aussi.

Ensuite, Bootstrap utilise jQuery, alors il faut aussi l'associer sur les pages Web. et il integre aussi popper.js.

mais tout cela est indiqué dans la doc faut la lire, ne serait-ce qu'en diagonale.
=> http://getbootstrap.com/docs/4.1/get...arter-template

[Bootstrap] Liste déroulante ne fonctionne pas

Framework CSS Bootstrap

Discussions similaires

Partager

Partager