我正在尝试编写我的第一个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>
以下是我的解决方案中显示上述文件的屏幕截图:
我正尝试在顶部创建一个菜单栏,其代码来自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>
我得到的是,而不是单杠:
我很感激任何帮助,让我开始有希望成为一个优秀的框架。
答案 0 :(得分: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的标准版本,你只需要包含其中一个。