twitter bootstrap 的基本 asp.net 设置答案

【问题标题】：basic asp.net setup for twitter bootstraptwitter bootstrap 的基本 asp.net 设置
【发布时间】：2012-10-29 23:53:07
【问题描述】：

我正在尝试在 Visual Studio 2010 Ultimate 中使用 twitter bootstrap 和 asp.net。我找不到任何解释如何设置它以及为什么的东西。我尝试的一切都不太奏效。大多数文章都是针对 MVC 的，我对 asp.net 还是新手，所以我想在尝试 mvc 之前先从基础开始。

我得到的最接近的方法是让样式正常工作，但无论我尝试什么示例，javascript 似乎都不起作用。这是我得到的最接近的。它是 bootstrap 网站上的模态示例 sn-p 和我发现的一些关于将 bootstrap 与 mvc 结合使用的博客的混搭。

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication6.WebForm3" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link rel="stylesheet" href="~/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/bootstrap-responsive.min.css" />


</head>
<body>
    <script type="text/javascript" src="~/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="~/js/jquery-1.8.2.min.js"></script>
    <form id="form1" runat="server">

        <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

        <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Modal header</h3>
            </div>
            <div class="modal-body">
            <p>One fine body…</p>
            </div>
            <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
            </div>
            @RenderBody()
        </div>
    </form>
</body>
</html>

文件都在链接的位置。我开始认为我需要安装一些先决条件或其他东西。 @RenderBody() 显示为文本。

我找不到任何有效的示例。当我开始兜圈子时，任何帮助将不胜感激

【问题讨论】：

我强烈建议改用 MVC。我理解您说您想学习基础知识，但认为 asp.net 是 MVC 的更简单版本是一种误解。他们完全不同。虽然 MVC 可能有点困难，但您从学习 asp.net 中获得的知识在迁移到 MVC 时几乎没有帮助。虽然 microsoft 不想这样称呼它（这样使用 asp.net webforms 的人不会觉得落后），但 MVC 绝对是 asp.net webforms 的替代品。
您好，感谢您的建议。我确实打算很快学习 mvc，因为最终我只是想使我的技能保持最新，而不学习 mvc 将是愚蠢的。我已经掌握了一些 asp.net 知识，这将使我快速上手。从那里我打算学习 mvc 以及使用 winforms 中的服务器端软件做同样的事情（我也有一些经验），然后进入 wpf。尽管 mvc 正在取代 webforms，但这还没有发生，几乎所有雇主都期望两者（目前只是 web 表单）。任何 webforms 建议都会有很大帮助
如果你使用 NuGET 包管理器，那里有一个 BootStrap MVC 应用程序，它应该可以帮助你开始布局等。

标签： c# asp.net twitter-bootstrap

【解决方案1】：

这不是 asp.net 的问题，您只需在引导包含之前移动 jquery JS 文件。

如果您使用带有 javascript 控制台（如 chrome）的浏览器，这将对您有很大帮助，错误并不总是能准确地告诉您问题所在，但它可以帮助缩小范围。

【讨论】：

同意，把脚本放到head里，然后先加载jquery
@kolin Javascripts 并不总是最好放在头脑中，see some discussion here。但最佳实践表明它们应该在 html 的底部或头部，而不是像上面那样仅仅在头部之外！
嗨，非常感谢 Gez 和大家。更改 javascript 的顺序包括工作。对于任何初学者来说，调试控制台也是一个很好的提示。再次感谢保罗