这是我的HTML
<html lang ="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<p></p>
<button class="btn btn-outline-primary" data-toggle="modal" data-target="#insertData">Insert Data</button>
<!-- Modal -->
<div class="modal fade" id="insertData" tabindex="-1" role="dialog" aria-labelledby="insertLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="insertLabel">Insert Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form>
<div class="modal-body">
<form>
<div class="form-group">
<label for="nm">Full Name</label>
<input type="email" class="form-control" id="nm" aria-describedby="emailHelp" placeholder="Full Name">
</div>
<div class="form-group">
<label for="em">Email</label>
<input type="password" class="form-control" id="em" placeholder="Email">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" onclick="saveData()" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
<p></p>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
当我点击按钮时，没有任何事情发生。不知何故，如果我将样式链接更改为URL，按钮可以工作，但没有像this那样的背景颜色我已经下载了Bootstrap并将其放入我的文件夹中。我错过了什么或做错了什么？
答案 0 :(得分：2)
您 应该 将引导程序和 jquery 导入head，而不是{{1} }}。检查此代码。
编辑 @ Swellar的更正：＆＃34;您也可以将脚本放入其中。这只是你何时使用脚本及其依赖的顺序问题，因此大部分时间位于上面，尤其是body＆＃34;
jquery.min.js
答案 1 :(得分：0)
根据我们的对话，您希望将Insert Data设为主要颜色。然后移除outline中的btn-outline-primary。您也可以从Save按钮
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<p></p>
<button class="btn btn-primary" data-toggle="modal" data-target="#insertData">Insert Data</button>
<!-- Modal -->
<div class="modal fade" id="insertData" tabindex="-1" role="dialog" aria-labelledby="insertLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="insertLabel">Insert Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form>
<div class="modal-body">
<form>
<div class="form-group">
<label for="nm">Full Name</label>
<input type="email" class="form-control" id="nm" aria-describedby="emailHelp" placeholder="Full Name">
</div>
<div class="form-group">
<label for="em">Email</label>
<input type="password" class="form-control" id="em" placeholder="Email">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" onclick="saveData()" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
<p></p>
</div>
这是原始代码（除了bootstrap＆＃39; css文件和jquery）
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<p></p>
<button class="btn btn-primary" data-toggle="modal" data-target="#insertData">Insert Data</button>
<!-- Modal -->
<div class="modal fade" id="insertData" tabindex="-1" role="dialog" aria-labelledby="insertLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="insertLabel">Insert Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form>
<div class="modal-body">
<form>
<div class="form-group">
<label for="nm">Full Name</label>
<input type="email" class="form-control" id="nm" aria-describedby="emailHelp" placeholder="Full Name">
</div>
<div class="form-group">
<label for="em">Email</label>
<input type="password" class="form-control" id="em" placeholder="Email">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" onclick="saveData()" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
<p></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
答案 2 :(得分：-1)
实际上你被标记为BS4，但你使用的是外部BS3 js，外部jQuery 2.x和本地未知的BS css。
首先正确使用BS，请阅读documentation。