在ASP.NET项目中使用Twitter Bootstrap

时间:2012-02-11 20:05:44

标签: asp.net 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

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

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

1 个答案:

答案 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的标准版本,你只需要包含其中一个。