Question

我正在尝试编写我的第一个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

我正尝试在顶部创建一个菜单栏，其代码来自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

我很感激任何帮助，让我开始有希望成为一个优秀的框架。

Answer 1

您正在使用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的标准版本，你只需要包含其中一个。

在ASP.NET项目中使用Twitter Bootstrap

1 个答案: