我是bootstrap的新手。我遇到了关于下拉按钮功能的问题。包括来自远程服务器的jQuery和bootstrap文件(即来自code.jquery.com,cdnjs.cloudflare.com,maxcdn.bootstrapcdn。 com)下拉功能工作正常。但是当通过包含本地存储的文件离线工作时,下拉功能不起作用。请帮忙。提前谢谢。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="btn-toolbar" role="toolbar" aria-level="Toolbar example">
<div class="btn-group btn-group-lg mr-2" role="group" aria-level="Button Group 1">
<button class="btn btn-outline-primary">Button 1</button>
<button class="btn btn-outline-primary">Button 2</button>
<button class="btn btn-outline-primary">Button 3</button>
<button class="btn btn-outline-primary">Button 4</button>
</div>
<div class="btn-group btn-group-lg mr-2" role="group" aria-label="Button group with nested dropdown">
<button class="btn btn-outline-secondary">Button 1</button>
<button class="btn btn-outline-secondary">Button 2</button>
<button class="btn btn-outline-secondary">Button 3</button>
<button class="btn btn-outline-secondary">Button 4</button>
<!--- Nested menu -->
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<div class="input-group">
<span class="input-group-addon" id="btnGroupAddon">@</span>
<input type="text" class="form-control" placeholder="Email" aria-describedby="btnGroupAddon">
</div>
</div>
</div>
<script src="jquery/jquery-3.2.1.slim.min.js"></script>
<script src="popper/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
&#13;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="btn-toolbar" role="toolbar" aria-level="Toolbar example">
<div class="btn-group btn-group-lg mr-2" role="group" aria-level="Button Group 1">
<button class="btn btn-outline-primary">Button 1</button>
<button class="btn btn-outline-primary">Button 2</button>
<button class="btn btn-outline-primary">Button 3</button>
<button class="btn btn-outline-primary">Button 4</button>
</div>
<div class="btn-group btn-group-lg mr-2" role="group" aria-label="Button group with nested dropdown">
<button class="btn btn-outline-secondary">Button 1</button>
<button class="btn btn-outline-secondary">Button 2</button>
<button class="btn btn-outline-secondary">Button 3</button>
<button class="btn btn-outline-secondary">Button 4</button>
<!--- Nested menu -->
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<div class="input-group">
<span class="input-group-addon" id="btnGroupAddon">@</span>
<input type="text" class="form-control" placeholder="Email" aria-describedby="btnGroupAddon">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
&#13;
答案 0 :(得分:0)
包含顺序可能是错误的。首先是jquery,然后是bootstrap和你的脚本。
检查页面源中的本地文件路径。 Ctrl
+ U
会打开它。
阅读在浏览器中使用Web控制台的信息。会节省你很多时间。
答案 1 :(得分:0)
好的,你可以去离线引导下拉:
@ApiOperation(value = "Update Developer (dev)",
response = ResponseEntity.class)
@RequestMapping(method = RequestMethod.PATCH,
value = "/{type:developer}")
public ResponseEntity<Response> updateDeveloper(
@PathVariable String type,
@RequestParam("year") String year,
@RequestBody Developer employeeUpdate,
) { .....}
@ApiOperation(value = "Update Manager (manager)",
response = ResponseEntity.class)
@RequestMapping(method = RequestMethod.PATCH,
value = "/{type:manager}")
public ResponseEntity<Response> updateManager(
@PathVariable String type,
@RequestParam("year") String year,
@RequestBody Manager employeeUpdate,
) { .....}