2016-04-05 9 views
-1

Ich verweise Bootstrap Css und Js (sowie jQuery Js) in einigen dynamisch generierten HTML, und dann eine Bootstrap-Klasse auf ein H1-Element anwenden, aber es ändert nicht das Aussehen der genannten H1-Text. Ich bin Erzeugung der Schlüssel (für diese Frage) Teil des HTML mit diesem Code:Warum ist es nicht genug, um die Bootstrap CSS und JS Referenz Bootstrap-Klassen zu verwenden?

 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(); 
     } 

... und davon, erhalte ich die folgende html zurückgegeben:

<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> 

... Ich füge dann andere HTML an es an; Die Seite wird zwar gerendert, aber die Jumbotron-Klasse wird nicht auf den h1-Text angewendet - das div "Available Reports for ..." hat keine spezielle Darstellung.

Warum wird die Jumbotron-Klasse des Bootstrap nicht angewendet? Ich verweise auf die Bootstrap CSS und Javascript, sowie die jQuery JS-Datei, so theoretisch (ISTM) sollte es funktionieren.

Ich dachte vielleicht, dass die CSS- und Skriptverweise dem öffnenden "body" -Tag vorausgehen müssten, aber das Verschieben der css- und Skriptverweise über den body-Tag macht keinen Unterschied.

+4

Sie können keine Ressourcen von der Festplatte referenzieren. Sie müssen URLs vom Server verwenden. – SLaks

+3

Sie können Ressourcen von der Festplatte referenzieren, aber nicht so. Sie sollten die Methode file: // verwenden (beachten Sie, dass \ wie folgt geändert werden muss): 'file: /// C:/Projects/...' Auch css sollte innerhalb des head-Elements sein. (Beachten Sie, dass die Dateien auf dem Computer, auf dem der Webbrowser ausgeführt wird, funktionieren müssen, damit file: // funktionieren kann. Dies funktioniert nicht, wenn sich Ihr Webserver und diese Dateien auf einem separaten Computer befinden) –

+1

Vielleicht möchten Sie die css und js von einem CDN anstelle von lokalen Dateien. Siehe https://www.bootstrapcdn.com/ und https://code.jquery.com/ –

Antwort

3

Sie könnten die Bootstrap und jquery CSS und JS von einem CDN anstatt einer lokalen Datei verweisen möchten.

Die Links zu den neuesten Versionen finden Sie unter https://www.bootstrapcdn.com/ und https://code.jquery.com/.

Beachten Sie auch, dass das CSS innerhalb des Kopfelements sein sollte

0

Vorschlag Ben Holness verwenden, das ist, was ich getan habe (es funktioniert):

. . . 
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>"); 
. . . 
Verwandte Themen