Использование Twitter Bootstrap в проекте ASP.NET

Я пытаюсь написать свой первый веб-сайт ASP.NET, и я действительно хочу использовать Twitter-бутстрап, но у меня не получается первый барьер.Использование Twitter Bootstrap в проекте ASP.NET

Я скачал файл Zip из here, расстегнул его и добавили файлы в моем решении и следующие строки в моем _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

Я пытаюсь создать строку меню через вершину с этим кодом, который был взят из 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>

Что я получаю, вместо того, чтобы турник это:

Result - vertical bar instead of horizontal

Я был бы признателен за любую помощь, чтобы я начал с того, что обещает быть отличной основой.

источник

2012-02-11 Stu

Вы используете Twitter Bootstrap 2.0, но учебник был написан для Twitter Bootstrap 1.0, было внесено немало изменений в разметку, которую вы должны использовать, чтобы получить желаемый вид.

Это объясняет некоторые изменения в компонент NavBar в changelog, есть также некоторые основные примеры того, как это делается сейчас:

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

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

Кроме того (не связан с вопрос), вы включаете как мини-версию, так и стандартную версию css/js, вам нужно включить только один из них.

источник

2012-02-11 20:23:29 pjumble

Большое спасибо! Это решило мою проблему, а также выделило очень полезную документацию по Github, которую я не заметил. – Stu

Использование Twitter Bootstrap в проекте ASP.NET

ответ

Смежные вопросы