2016-08-28 20 views
0

Ho friends。データターゲットがブートストラップを使用して動作していません

私は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> 

答えて

1

あなたは、データトグルと言うべきデータトゥーと言うあなたのボタンにタイプミスがあります。

<button type="button" class="navbar-toggle" data-target="#mynavbar" data-toggle="collapse"> 
関連する問題