当我按下导航栏中的链接时,我试图打开模态窗口。我试图复制并粘贴一些示例代码并稍微调整一下,但是当我按下链接时没有任何反应。我错过了什么?我还在学习Bootstrap所以请耐心等待:)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cool Website</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/enabletooltips.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/index-styling.css">
</head>
<body>
<div class="sticky-header-navbar-container">
<div class="well">
<div class="navbar navbar-default navbar-fixed-top" id="navbar">
<ul class="nav navbar-nav">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<form class="navbar-form" role="search">
<div class="input-group" style="width: 100%">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term-header">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form">
<span>Login</span>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email Address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox" style="padding-right: 15px;padding-left: 10px">
<label>
<input type="checkbox" value="remember-me">
Remember Me
</label>
</div>
<button type="button" class="btn btn-success btn-bg" id="signin-btn"><span class="glyphicon glyphicon-log-in"></span></button>
</form>
</li>
<li style="padding-right: 20px">
<a href="#" class="tooltip-bottom" data-toggle="modal" data-target="#registration-modal"
data-tooltip="Only Required to Upload, Comment and Rate!">Not Registered? Click Here!</a>
</li>
</ul>
</div>
</div>
</div>
<div id="registration-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some Text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="header-container">
<div class="container" style="padding-top: 25px">
<div class="jumbotron jumbotronic">
<h1 class="h1">Cool Website</h1>
<p>Catchphrase!</p>
</div>
</div>
</div>
<div class="search-bar-container">
<div class="container">
<div class="h1" style="color: #ffffff;text-align: center;">Search Here</div>
<form role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</div>
</div>
<div class="categories-container">
<div class="container">
<div class="h1" style="color: #ffffff;text-align: center;">Or Click One of these</div>
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group" style="padding-right: 10px">
<button type="button" class="btn btn-success btn-bg" id="category-gameplay-btn">Button 1</button>
</div>
<div class="btn-group" role="group" style="padding-right: 10px">
<button type="button" class="btn btn-warning btn-bg" id="category-editor-btn">Button 2</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger btn-bg" id="category-engine-btn">Button 3</button>
</div>
</div>
</div>
</div>
<div class="footer-container">
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container" style="text-align: center">
<span>This website was made using the following tools</span>
<br>
<span>
<a href="http://getbootstrap.com/">Bootstrap</a> | <a href="http://glyphicons.com/">glyphicons</a>
</span>
</div>
</div>
</div>
</body>
</html>
编辑:完整代码张贴
答案 0 :(得分:1)
工作正常,你必须包括bootstraps.min.js 像这样:
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/enabletooltips.js"></script>
将脚本放在页面末尾会更好。