このようなレスポンシブ ナビゲーション バーの作成に関するチュートリアルをオンラインで見たことがあります。
それに応じてcssファイルをjsファイルとともに追加しましたが、機能していません。こんな感じに仕上がる。GUIは実際にうまく機能しています。ただし、上の図のように他の 2 つのオプションを表示する拡張機能はありません。拡張機能をクリックしても何も起こりません。
これは、レスポンシブナビゲーションバーのコードを入力する方法です
<!DOCTYPE html>
<html lang="en">
<head id="Head1" runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>iPolice</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<asp:ContentPlaceHolder ID="head" runat="server" >
</asp:ContentPlaceHolder>
<!--[if lt IE 8]>
<script src ="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE8.js"></script>
<![endif]-->
</head>
<body>
<div class="nav bar navbar-fixed-top">
<div class="navbar-inner">
<div class ="container">
<a class ="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-th-list"></span>
</a>
<a href="#" class="brand">Your Logo</a>
<div class="nav-collapse colapse">
<ul class="nav pull-right">
<li class="active"><a href="#">Entry01</a></li>
<li><a href="#">Entry02</a></li>
</ul>
</div>
</div>
</div>
</div>
<form id="form1" runat="server">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"> </script>
<div id="ContentPlaceHolder">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
cssとjavascriptファイルを正しい位置に追加したと確信しています。
幅が縮小されているときに、レスポンシブ デザインの下にナビゲーション バー (下の図) がうまく表示されるようにしようとしています。
このリンクからブートストラップもダウンロードしました
任意のヘルプと支援をいただければ幸いです。
ありがとう。
PS: 下の図に示すように、Web アプリケーションには既に独自のダークグレーのナビゲーション バーがあります。twitterbootstrap と既存のナビゲーション バーの両方を統合することは可能でしょうか?
アップデート
ごめん。私の最初の投稿では、Visual Studio2012 の ASP マスターページと CSS の間のリンクなど、重要なものが省略されていました。ただし、必要な css を追加しているにもかかわらず、ブートストラップの拡張機能がうまく機能しません。