从链接

时间:2015-10-30 15:56:23

标签: html5 twitter-bootstrap

当我按下导航栏中的链接时,我试图打开模态窗口。我试图复制并粘贴一些示例代码并稍微调整一下,但是当我按下链接时没有任何反应。我错过了什么?我还在学习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">&times;</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>

编辑:完整代码张贴

1 个答案:

答案 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>

将脚本放在页面末尾会更好。