2012-02-11 78 views
5

使用Twitter的引導,我想寫我的第一個ASP.NET網站,我真的想使用Twitter的引導,但我的第一道關卡失敗。在ASP.NET項目

我從here下載的ZIP文件,解壓縮它並添加文件到我的解決方案和下面的幾行我_LAyout.cshtml文件:

<link href="@Url.Content("~/Context/bootstrap.css")" rel="stylesheet" type="text/css" /> 
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" /> 
<script src="@Url.Content("~/Scripts/bootstrap.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/bootstrap-min.js")" type="text/javascript"></script> 

這是表示我的解決方案上面的文件截圖:

CSS files Scripts

我想創建橫跨頂部的菜單欄這個代碼是從取

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>@ViewBag.Title</title> 
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script> 
    <link href="@Url.Content("~/Context/bootstrap.css")" rel="stylesheet" type="text/css" /> 
    <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" /> 
    <script src="@Url.Content("~/Scripts/bootstrap.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/bootstrap-min.js")" type="text/javascript"></script> 

</head> 
<body> 
    <div class="topbar"> 
     <div class="fill"> 
      <div class="container"> 
       <h3>Present Ideas</h3> 
       <ul> 
        <li>Blog</li> 
        <li>About</li> 
        <li>Help</li> 
       </ul> 
       <ul class="nav secondary-nav"> 
        <li class="menu"> 
         <a href="#" class="menu">Account Settings</a> 
         <ul class="menu-dropdown"> 
          <li>Login</li> 
          <li>Register</li> 
          <li class="divider"></li> 
          <li>Logout</li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
     <div class="container-fluid"> 
      @RenderBody() 
     </div> 
     <footer> 
     </footer> 
    </div> 
</body> 
</html> 

我能得到什麼,而不是單槓是這樣的:

Result - vertical bar instead of horizontal

我希望得到任何幫助讓我開始有什麼承諾,是一個很好的框架。

回答

9

您正在使用Twitter Bootstrap 2.0,但本教程是爲Twitter Bootstrap 1.0編寫的,您需要使用標記進行相當多的更改才能獲得所需的外觀。

它解釋了一些在changelog更改到導航欄組件,還有它是如何現在做了一些基本的例子:

http://getbootstrap.com/2.3.2/getting-started.html#examples

http://getbootstrap.com/2.3.2/components.html#navbar

而且(無關問題),你包括這兩個的縮小版本和標準版本的CSS/JS,你只需要包括每一個。

+2

非常感謝!這解決了我的問題,並突出了Github上真正非常有用的文檔,我沒有發現。 – Stu 2012-02-11 23:51:55