2013-07-22 19 views
0

我觀看了一個在線教程有關創建這是假設這個樣子引導沒有相應的工作

enter image description here enter image description here

我也因此跟着一個負責任的導航欄,添加CSS文件與JS一起文件但它不起作用。它最終會像這樣。 GUI實際上工作正常。但是,沒有任何擴展可以顯示其他兩個選項,我喜歡上面的圖片。當我點擊擴展名時沒有任何反應。

enter image description here

我這是怎麼進入我的代碼爲響應導航欄

<!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文件。

我試圖讓我的導航欄(下圖)在寬度被縮小時在響應式設計下很好地顯示。

enter image description here

我也從這個link

任何幫助下載的引導和幫助將不勝感激。

謝謝。

P.S:如下圖所示,我的webapp中已經有了自己的darkgrey導航欄。我想知道是否可以將twitterbootstrap和我現有的導航欄結合在一起?

UPDATE

對不起。我的第一篇文章漏掉了一些重要的東西,比如Visual Studio2012中的asp masterpage和我的CSS之間的鏈接。但是,儘管添加了必要的CSS,但引導程序中的擴展功能並不完善。

回答

0

CSS無法加載;可以通過打開Developer Console> Network來證明。

刪除圍繞您的style.css的標籤。

+0

圍繞style.css中的「註釋」標籤是我的老導航欄的CSS。目前,我只是測試了在線教程給出的示例twitterbootstrap。所以「取消註釋」stlye.css不會有所作爲。 –

+0

但你沒有包含其他的CSS,因此你的頁面沒有CSS呈現。此外,評論代碼的語法不正確 – Raptor

+0

對不起。我已經遺漏了一些重要的東西,這是我的主頁和我在上面的問題中更新的CSS文件之間的鏈接。但是,添加CSS後,gui工作正常,但不是擴展名。當我點擊擴展名時,什麼也沒有發生 至於評論代碼,VS2012中有評論功能。我只是照着。問候。 –

1


你忘了文檔類型和bootstrap.css沒有鏈接。
你應該看看bootstrap網站。 (請參見下面的鏈接)
Basic template for bootstrap


你應該嘗試像:My code(我可以在這裏無法粘貼,發生錯誤)。


,看一下Bootstrap - Component

+0

對不起。我遺漏了一些重要的東西,這是我的主人和CSS文件之間的鏈接,我已經更新了我的問題。但是,添加CSS後,gui工作正常,但不是擴展名。當我點擊擴展名時,什麼也沒有發生 –

+0

我可以看到有很多對jQuery的引用。這是否正常?這可能是一個問題。你添加了文檔類型嗎? – Done

+0

是的,我添加了這個<!DOCTYPE html>。如果我在嘗試創建html網頁時沒有誤認爲是默認標記。至於各種參考,其中一些是啓用我的幻燈片標題的功能,我認爲它不應該影響其他人,因爲從我的角度來看,每個人都可以單獨工作。 –

相關問題