0
引導主題爲標題說我試圖重新內置在自帶的引導「導航欄」的主題，可以在這裏看到http://v4-alpha.getbootstrap.com/examples/navbar/打造「導航欄」，在ASP.NET
雖然這聽起來確實很簡單我一直在重新創建它非常麻煩。我已經通過我的代碼幾次了目前還找不到什麼不對，我也雙重檢查所有的JS和CSS引用確實是正確的但我的頁面加載像這樣http://i.imgur.com/01uAMtW.png
的默認HTML（正確的）這個代碼主題如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="navbar.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-xs" id="navbar-header">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav> <!-- /navbar -->
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default responsive navbar works. It's placed within a <code>.container</code> to limit its width and will scroll with the rest of the page's content.</p>
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a>
</p>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
我在試圖重現這創造了一個VS Web應用程序，我使用的是母版頁，併爲導航欄一個用戶控件。我的代碼如下：
默認菜單用戶控制
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="DefaultMenu.ascx.vb" Inherits="APPLICATION.DefaultMenu" %>
<div class="container">
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-xs" id="navbar-header">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
</div>
我的母版
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Main.Master.vb" Inherits="APPLICATION.Main" %>
<%@ Register Src="/Controls/DefaultMenu.ascx" TagPrefix="uc1" TagName="DefaultMenu" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" href="/favicon.ico" />
<title>Default Masterpage
</title>
<link href="/CSS/bootstrap.min.css" rel="stylesheet" />
<link href="/CSS/CSS.css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="HeaderContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<uc1:DefaultMenu runat="server" ID="DefaultMenu" />
<asp:ContentPlaceHolder ID="BodyContent" runat="server"></asp:ContentPlaceHolder>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/JS/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="/JS/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/JS/ie10.js"></script>
</form>
</body>
</html>
我的內容頁
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="/Masterpages/Main.Master" CodeBehind="Default.aspx.vb" Inherits="APPLICATION.Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeaderContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="BodyContent" runat="server">
<div class="container">
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default responsive navbar works. It's placed within a <code>.container</code> to limit its width and will scroll with the rest of the page's content.</p>
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a>
</p>
</div>
</div>
</asp:Content>
請幫我在VS Web應用程序中設置這個基本主題。我花了好幾個小時完全喪失了我做錯了什麼。我清除了我的緩存以及在幾個不同的瀏覽器中測試過，但它們都顯示不正確，如我在上面張貼的屏幕截圖/圖像中所看到的。