Twitter Bootstrap 包含问题答案

【问题标题】：Twitter Bootstrap inclusion issueTwitter Bootstrap 包含问题
【发布时间】：2014-06-05 13:10:32
【问题描述】：

我在使用 Asp.Net MVC 5 的 Visual Studio 中的页面上显示 Bootstrap 组件时遇到了一些问题。我将这些示例 here 用于下拉菜单，here 用于按钮组。

这是页面的样子：

这是生成的页面源

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>NewIndex</title>
</head>
<body>
    <script src="/Scripts/jquery-1.10.2.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/respond.js"></script>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/justified-nav.css" rel="stylesheet"/>

    New Index page

    <div class="dropdown">
        <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu2" data-toggle="dropdown">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>
    </div>

    <br />

    <div class="btn-group">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>


</body>
</html>

所有引用的文件都在它们各自的路径中。知道可能出了什么问题吗？

【问题讨论】：

您的“.css”未在页面上正确添加。因为您为此使用了“”标签。你应该使用 .

标签： jquery css asp.net twitter-bootstrap visual-studio-2013

【解决方案1】：

根据我的评论：

您应该添加带有link 标签的CSS 文件，而不是<script></script> 块。脚本块用于添加Javascript。

在您的网页上添加外部样式表 (CSS)：

每个页面都必须包含指向带有标记的样式表的链接。标签进入头部：

<head>
<link rel="stylesheet" type="text/css" href="yourstyle.css">
</head>

试试这个：

<link rel="stylesheet" type="text/css" href="/Content/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/Content/site.css" />
<link rel="stylesheet" type="text/css" href="/Content/justified-nav.css" />

根据 @cvrebert 注释，您必须在其他 javascript 文件之前包含 Jquery 库引用 (jquery-1.10.2.js)。脚本文件的正确顺序是：

<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

如上所述，您必须将 link 标签放入 head 部分。所以页面的正确 HTML 如下所示 -

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>NewIndex</title>
    <!--Your CSS Style Sheets-->
    <link rel="stylesheet" type="text/css" href="/Content/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="/Content/site.css" />
    <link rel="stylesheet" type="text/css" href="/Content/justified-nav.css" />
</head>
<body>
    <!--Your Script Files-->
    <script src="/Scripts/jquery-1.10.2.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/respond.js"></script>
    <div> 
        New Index page
        <br />
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
            <li role="presentation" class="dropdown-header">Dropdown header</li>
            ...
            <li role="presentation" class="divider"></li>
            <li role="presentation" class="dropdown-header">Dropdown header</li>
            ...
        </ul>
    </div>


    <div class="dropdown">
        <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>
    </div>
 </body>
</html>

【讨论】：

感谢仅对按钮组有效。下拉菜单似乎不起作用
@user20358：请检查浏览器控制台。有什么错误吗？或检查工作小提琴jsfiddle.net/BqKNV/310
控制台说引导程序需要 Juery。但我已经参考了它..
它在 jsfiddle 中工作，但我使用的是 jquery-1.10.1.js。我的代码有 jquery-1.10.2.js.. 这可能是问题吗？它不应该是理想的。
@user20358：我确实没有任何使用 Jquery-1.10.2.js 的经验。所以，我不能告诉你这些事情。抱歉......但它适用于 Jquery 1.10.1.js 。见jsfiddle.net/BqKNV/312。（我想，你应该试试这个）

【解决方案2】：

将您的 bootstrap.css 引用从脚本标签更改为链接标签。示例：

<link href="../Styles/mystyle.min.css" rel="stylesheet" />

【讨论】：

感谢仅对按钮组有效。下拉菜单似乎不起作用。