2012-02-11 6 views
5

私は最初のASP.NET Webサイトを作成しようとしています。本当にTwitter Bootstrapを使いたいのですが、最初のハードルでは失敗しています。ASP.NETプロジェクトでTwitter Bootstrapを使用する

私は、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

私は任意の助けをいただければ幸いです

Result - vertical bar instead of horizontal

私は、優れたフレームワークであることを約束するものを始めるために:水平のバーは、これがある代わりに、私は何を得る

<!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> 

、。

答えて

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

関連する問題