在ASP.NET项目中使用Twitter Bootstrap

Question

在ASP.NET项目中使用Twitter Bootstrap

我正在尝试编写我的第一个ASP.NET网站,我真的想使用Twitter Bootstrap但是我在第一个障碍时失败了.

我从这里下载了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>

Run Code Online (Sandbox Code Playgroud)

以下是我的解决方案中显示上述文件的屏幕截图:

CSS文件

我试图在顶部创建一个菜单栏,这个代码是从这个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>

Run Code Online (Sandbox Code Playgroud)

我得到的,而不是横条是这样的:

结果 - 垂直条而不是水平条

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

Answer 1

pju*_*ble 9

您正在使用Twitter Bootstrap 2.0,但该教程是为Twitter Bootstrap 1.0编写的,您需要使用标记进行相当多的更改才能获得所需的外观.

它解释了更改日志中导航栏组件的一些更改,还有一些基本的示例,说明它现在是如何完成的:

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

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

也(与问题无关的),你包括两个缩小的版本和标准版本的CSS/JS的,你只需要包括各一个.

非常感谢!这解决了我的问题,并且还突出了我没有发现的关于Github的非常有用的文档. (2认同)

归档时间：	14 年，3 月前
查看次数：	12660 次
最近记录：	11 年，9 月前