2016-10-22 11 views
0

私はブートストラップを使用してナビゲーションバーを作成しました。小さなサイズのディスプレイ用ナビゲーションバーは折りたたまれてしまいました。折り畳まれたナビゲーションバーを表示するためのボタンを作成しました。折り畳まれたナビゲーションは表示されません。折りたたまれたナビゲーションアイテムが見たいです。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

</head> 

<body> 
<div class="container"> 
<div class="navbar navbar-default" role="navigation"> 
<div class="navbar-header"> 
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> Menu</button> 
<span class="navbar-brand">Demo</span> 

</div> 
<div class="navbar-collapse collapse"> 
<ul class="nav navbar-nav"> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link2</a></li> 
</ul> 
</div> 
</div> 




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

答えて

0

jQueryプラグインとbootstrap.min.jsプラグインがありません。

そのナビゲーション崩壊が動作します後(ヘッド)または(本体の底部)には、このプラグインを追加します。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
\t <title>Menu Collapse</title> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
\t <div class="navbar navbar-default" role="navigation"> 
 
\t \t <div class="navbar-header"> 
 
\t \t \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> Menu</button> 
 
\t \t \t <span class="navbar-brand">Demo</span> 
 
\t \t </div> 
 
\t \t <div class="navbar-collapse collapse"> 
 
\t \t \t <ul class="nav navbar-nav"> 
 
\t \t \t \t <li><a href="#">Link</a></li> 
 
\t \t \t \t <li><a href="#">Link2</a></li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 
    
 
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
</body> 
 
</html>

+0

ありがとうございました –

-1

はい、あなたは正しいです、あなたはjQuery.jsとbootstrap.min.jsファイルを追加する必要があり、それが働いています。

このjsファイルをHTMLページの下部に追加してください。

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
+0

まだ私はどうしたらいいですか? –

+0

ここにあなたのコードを入れてチェックしてお知らせします –

+0

ここに私の働くリンクがありますので、それを確認してください。 https://jsfiddle.net/DineshV/5104yjrn/ –

関連する問題