Question

何友。

我在Bootstarp中使用navbar。用于折叠调用data-toogle和data-target属性的div元素。但我没有在我的页面中找到这些属性，因为这些原因崩溃无效。有些人可以帮助我的代码中缺少的内容以及为什么在键入这些属性时没有显示这些属性。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="../Content/bootstrap.css" rel="stylesheet" />
    <link href="../Content/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <link href="../Content/bootstrap-theme.css" rel="stylesheet" />
    <script src="../Scripts/angular-ui-router.js"></script>
    <script src="../Scripts/angular-ui-router.min.js"></script>
    <script src="../Scripts/Collapse.JS"></script>

</head>
<body>
    <div>
        <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle"  data-target="#mynavbar" data-toogle="collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="mynavbar">
                <ul class="nav navbar-nav">
                    <li><a href="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Gallery</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
                <ul class="nav navbar-right navbar-nav">
                    <li><a href="#">Login/SignUp</a></li>
                </ul>
            </div>

        </nav>
    </div>
</body>
</html>

Answer 1

您的按钮中有一个拼写错误，它表示数据应该说数据切换。

<button type="button" class="navbar-toggle"  data-target="#mynavbar" data-toggle="collapse">

使用bootstrap

1 个答案: