Ik krijg geen dropdown menu met Bootstrap
Ik probeer een dropdown menu met een knop te maken. De code is als volgt:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">?</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item" id="help-guide">Handleiding</a>
<a href="#" class="dropdown-item" id="help-shortcuts">Sneltoetsen</a>
<a href="#" class="dropdown-item" id="help-about">Over...</a>
</div>
<!-- end dropdown div -->
</div>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">?</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item" id="help-guide">Handleiding</a>
<a href="#" class="dropdown-item" id="help-shortcuts">Sneltoetsen</a>
<a href="#" class="dropdown-item" id="help-about">Over...</a>
</div>
<!-- end dropdown div -->
</div>
In de head staan volgende regels:
Code (php)
1
2
3
2
3
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css" type="text/css">
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"></script>
Ik moet zeggen, de links die in de dropdown moeten zitten, zijn onzichtbaar, maar de ? knop is geen dropdown menu.
Wat doe ik hier fout?
Hier heb je wel de code die in een gewoon .html bestand zou moeten werken:
Code (php)
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
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
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DSAdres</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row"><header class="page-header">
<div class="col-md-9">
<div class="btn-group">
<button class="btn btn-primary" id="new-contact">Nieuw contact toevoegen</button>
<button class="btn btn-warning" id="settings">Instellingen (voor experts)</button>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">?</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item" id="help-guide">Handleiding</a>
<a href="#" class="dropdown-item" id="help-shortcuts">Sneltoetsen</a>
<a href="#" class="dropdown-item" id="help-about">Over...</a>
</div>
<!-- end dropdown div -->
</div>
<!-- End btn-group div -->
</div>
<!-- End col div -->
</div>
<div class="col-md-3">
<form class="form-inline">
<div class="form-group">
<label for="searchbox">Zoek een contact</label>
<input type="text" name="searchbox" id="searchbox">
<button class="btn btn-success" id="searchbtn">Zoeken</button>
</div>
</form>
<!-- End col div -->
</div></header>
<!-- End row div -->
</div>
<div class="row">
<div class="col-md-12">
<p tabindex="0">Dit is de plaats waar later de contacten gaan komen.</p>
<!-- End col div -->
</div>
<!-- End row div -->
</div>
<!-- End container div -->
</div>
</body>
</html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DSAdres</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row"><header class="page-header">
<div class="col-md-9">
<div class="btn-group">
<button class="btn btn-primary" id="new-contact">Nieuw contact toevoegen</button>
<button class="btn btn-warning" id="settings">Instellingen (voor experts)</button>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">?</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item" id="help-guide">Handleiding</a>
<a href="#" class="dropdown-item" id="help-shortcuts">Sneltoetsen</a>
<a href="#" class="dropdown-item" id="help-about">Over...</a>
</div>
<!-- end dropdown div -->
</div>
<!-- End btn-group div -->
</div>
<!-- End col div -->
</div>
<div class="col-md-3">
<form class="form-inline">
<div class="form-group">
<label for="searchbox">Zoek een contact</label>
<input type="text" name="searchbox" id="searchbox">
<button class="btn btn-success" id="searchbtn">Zoeken</button>
</div>
</form>
<!-- End col div -->
</div></header>
<!-- End row div -->
</div>
<div class="row">
<div class="col-md-12">
<p tabindex="0">Dit is de plaats waar later de contacten gaan komen.</p>
<!-- End col div -->
</div>
<!-- End row div -->
</div>
<!-- End container div -->
</div>
</body>
</html>
Ik heb alleen de link- en scripttags veranderd naar CDN's.
Gewijzigd op 01/06/2018 15:08:34 door Jordy Deweer
Ik ben een app aan eht ontwikkelen mbt electron.
Bij jou zie ik het volgende:
Code (php)
1
Uncaught TypeError: Bootstrap dropdown require Popper.js
Ik neem aan dat het gewoon een extra script toevoegen is, niet? Want, dat werkt eerlijk gezegd niet...
Met "Dat werkt niet" kan niemand hier je verder op weg helpen. Wat werkt er niet? Waarom niet? Waar gaat het mis? Foutmeldingen? Etc?
Je maakt gebruik van Bootstrap, dus daar staan ook diverse documentaties, zoals dit bijvoorbeeld.
Dan heb ik gezorgd dat alle foutmeldingen wegwaren en ik heb niets meer dan wat ik al bescreef. Ik heb dus géén foutmeldingen en de rest van het probleem is onveranderd gebleven (zie oorspronkelijke post)
PS: Ik gebruik geen echte browser, want ik ben aan het werken met Electron.
Gewijzigd op 01/06/2018 21:54:37 door Jordy Deweer
Quote:
PS: Ik gebruik geen echte browser, want ik ben aan het werken met Electron
Uh? Electron maakt gebruik van NodeJS en dan maak je toch gebruik van een browser om layout van je html's te bekijken?
Of je bedoelt het anders? Ik ben zelf niet bekend met Electron overigens.
Als je toch met Electron werkt, dan kun je beter gebruik maken van template engine zoals Pug (vroeger Jade) of Twig in plaats van simpele html's. Daar heb je namelijk veel meer mogelijkheden in.
@Davier Welke meerwaarde zou een template engine hebben, als ik gewoon een knop ald dropdown menu werkend wil krijgen?