Question

<!DOCTYPE html>
<html>
    <head>
        <title>HI THERE</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href = "css/bootstrap.min.css" rel="stylesheet">
        <link href = "css/styles.css" rel = "stylesheet">
    </head>
    <body>
        <div class = "navbar navbar-inverse navbar-static-top">
            <div class = "container">
                <a href = "#" class = "navbar-brand">ABC</a>
                <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                    BUTTON
                </button>   
                <div class = "collapse navbar-collapse navHeaderCollapse">
                    <ul class = "nav navbar-nav navbar-right">
                        <li class="active"><a href ="#">home</a></li>

                    </ul>

                </div>
            </div>
        </div>
        <script src = "http//code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src = "js/bootstrap.js"></script>

    </body>

</html>

这是我使用twitter bootstrap进行基本响应式折叠Navbar的代码。我正在调用按钮“BUTTON”，我希望在屏幕压缩时可以看到它。当我点击这个按钮时，我想在下面添加“Home”链接和其他一些链接。出于某种原因，当我压缩屏幕时，按钮不会级联。我只看到按钮，但当我点击它时，它不会扩展！

PS - 我猜这对于这个网站上的很多程序员来说都是非常基本的东西，但是如果你想让我在代码中添加注释条目以逐行清楚我的意图，请告诉我我很乐意这样做。

Answer 1

您对jquery的链接不正确。你错过了：http。

之后

如同，请阅读：

<script src = "http://code.jquery.com/jquery-1.10.2.min.js"></script>

在开始使用功能之前要检查的一件重要事情是确保正确包含所有css和jquery文件。您可以通过在浏览器中打开控制台来执行此操作，如果任何外部资源无法加载，则会出现相关错误。

祝你好运。

Answer 2

除了按钮的颜色外，您的代码似乎没有任何问题。看看这个JSBin：http://jsbin.com/uyEYUMo/3/edit

如何在Twitter Bootstrap中崩溃才能在这里工作

2 个答案: