为什么引用 Bootstrap css 和 js 来使用 Bootstrap 类还不够？答案

【问题标题】：Why is it not enough to reference the Bootstrap css and js to use Bootstrap classes?为什么引用 Bootstrap css 和 js 来使用 Bootstrap 类还不够？
【发布时间】：2016-07-25 16:25:05
【问题描述】：

我在一些动态生成的 HTML 中引用 bootstrap css 和 js（以及 jQuery js），然后将 bootstrap 类应用于 h1 元素，但它不会改变所述 h1 文本的外观。我正在使用以下代码生成 HTML 的密钥（对于这个问题）部分：

        private string GetBeginningHTML()
        {
            StringBuilder builder = new StringBuilder();
            builder.Append("<html>");
            builder.Append("<head>");
            builder.Append("<title>");
            string availableRpts = string.Format("Available Reports For {0}", _unit);
            builder.Append(availableRpts);
            builder.Append("</title>");
            builder.Append("</head>");
            builder.Append("<body>");

            builder.AppendFormat("<link href='{0}' rel='stylesheet' />",     
System.Web.Hosting.HostingEnvironment.MapPath(
"~/Content/bootstrap.min.css"));
            builder.AppendFormat("<script src='{0}'></script>",        
System.Web.Hosting.HostingEnvironment.MapPath(
"~/Scripts/bootstrap.min.js"));
            builder.AppendFormat("<script src='{0}'></script>",     
System.Web.Hosting.HostingEnvironment.MapPath(
"~/Scripts/jquery-
1.10.2.min.js"));

            // Add Header rows
            builder.Append("<div class=\"jumbotron\">"); 
            builder.Append(String.Format("<h1>Available Reports for {0}
</h1>", _unit.ToUpper

()));
            builder.Append("</div>");

            return builder.ToString();
        }

...从中，我得到以下 html 返回：

<html>
<head>
<title>Available Reports For GRAMPS</title>
</head>
<body>
<link href='C:\Projects\PlatypusWebReports\PlatypusWebReports\Content\bootstrap.min.css' rel='stylesheet' />
<script src='C:\Projects\PlatypusWebReports\PlatypusWebReports\Scripts\bootstrap.min.js'></script>
<script src='C:\Projects\PlatypusWebReports\PlatypusWebReports\Scripts\jquery-
1.10.2.min.js'></script>
<div class="jumbotron">
<h1>Available Reports for GRAMPS</h1>
</div>

...然后我将其他 html 附加到它；页面呈现正常，但 jumbotron 类未应用于 h1 文本 - “可用报告...” div 没有特殊外观。

为什么没有应用 bootstrap 的 jumbotron 类？我引用了引导 css 和 javascript，以及 jQuery js 文件，所以理论上（ISTM）它应该可以工作。

我认为可能需要在开始的“body”标签之前添加 css 和脚本引用，但是将 css 和脚本引用移到 body 标签上方没有任何区别。

【问题讨论】：

您无法从磁盘引用资源。您需要使用来自服务器的 URL。
你可以从磁盘中引用资源，但不是这样。您应该使用 file:// 方法（注意 \ 需要更改为 /），如下所示：file:///C:/Projects/ ... 此外，css 应该在 head 元素内。（请注意，要使 file:// 工作，文件必须位于运行 Web 浏览器的机器上，因此如果您的网络服务器和这些文件位于单独的机器上，这将不起作用）
您可能希望从 CDN 获取 css 和 js，而不是使用本地文件。见bootstrapcdn.com 和code.jquery.com
@BenHolness，把它作为一个答案，我会这样标记它。

标签： javascript html css twitter-bootstrap asp.net-web-api

【解决方案1】：

使用 Ben Holness 的建议，这就是我所做的（它有效）：

. . .
builder.Append("</title>");
builder.Append("<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' />");
builder.Append("<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>");
builder.Append("<script src=\"https://code.jquery.com/jquery-1.12.2.min.js\" integrity=\"sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=\" crossorigin=\"anonymous\"></script>");
builder.Append("</head>");
. . .

【讨论】：

【解决方案2】：

您可能希望从 CDN 而不是本地文件引用 bootstrap 和 jquery CSS 和 JS。

有关最新版本的链接，请参阅 https://www.bootstrapcdn.com/ 和 https://code.jquery.com/。

还要注意 CSS 应该在 head 元素内

【讨论】：