2012-02-11 31 views
5

Tôi đang cố gắng viết trang ASP.NET đầu tiên của mình và tôi thực sự muốn sử dụng Twitter Bootstrap nhưng tôi thất bại ở rào cản đầu tiên.Sử dụng Twitter Bootstrap trong dự án ASP.NET

Tôi tải về các tập tin Zip từ here, giải nén nó và thêm vào các tập tin vào giải pháp của tôi và những dòng sau vào tập tin _LAyout.cshtml tôi:

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

Dưới đây là một bức ảnh chụp các tập tin trên trong giải pháp của tôi :

CSS files Scripts

tôi đang cố gắng để tạo ra một thanh menu trên đầu với mã này được lấy từ this turorial

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

Những gì tôi nhận được, thay vì thanh ngang là thế này:

Result - vertical bar instead of horizontal

tôi sẽ đánh giá cao bất kỳ sự giúp đỡ để có được tôi bắt đầu với những gì hứa hẹn sẽ, một khuôn khổ tuyệt vời.

Trả lời

9

Bạn đang sử dụng Twitter Bootstrap 2.0, nhưng hướng dẫn đã được viết cho Twitter Bootstrap 1.0, đã có khá nhiều thay đổi đối với đánh dấu bạn cần sử dụng để có được giao diện mong muốn.

Nó giải thích một số các thay đổi đối với thành phần navbar trong changelog, cũng có một số ví dụ cơ bản về cách nó được thực hiện tại:

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

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

Ngoài (không liên quan đến câu hỏi), bạn bao gồm cả hai phiên bản được rút gọn và phiên bản tiêu chuẩn của css/js, bạn chỉ cần bao gồm một trong mỗi phiên bản.

+2

Cảm ơn rất nhiều! Điều đó giải quyết được vấn đề của tôi và cũng nhấn mạnh tài liệu thực sự khá hữu ích trên Github mà tôi đã không thể phát hiện ra. – Stu

Các vấn đề liên quan